React-Syntaxhighlighterを使ってみた

next.js でブログを作ったんのでシンタックスハイライトをつけたかった。

next.js でブログを作ったのでシンタックスハイライトをつけるのにどのライブラリがいいかいろいろ試してみた結果 React-Syntaxhighlihter が一番しっくりきたので使ってみた。

インストール

$ yarn add react-syntax-highlighter

使い方

公式の README にも書いてある通りだけれども...

import SyntaxHighlighter from "react-syntax-highlighter";
import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
const Component = () => {
  const codeString = "console.log('hello')";
  return (
    <SyntaxHighlighter language="javascript" style={dark}>
      {codeString}
    </SyntaxHighlighter>
  );
};

dark で設定したコードはこんな感じ

langage="javascript"のように対象の言語を記述
style={dark}のようにスタイルの選択が可能。とてもたくさんあるので選んでください。

---

使った時にでたエラー達

SyntaxError: Unexpected token ‘export’

import した時に出てきたエラー
どうやらインポートの仕方が間違っていた様で

// before
import { dark } from "react-syntax-highlighter/dist/esm/styles/hljs";
// after
import { dark } from "react-syntax-highlighter/dist/cjs/styles/hljs";

/dist/esm/ を /dist/cjs/
と変更したところ直りました。
なぜこう変更したら良くなったのかわからないのでまた調べておきます。

Error: Expected string for value, got [object Object]

String 型以外のものを渡そうとしたので怒られました。
余計なものはいりません、タグもいりません。

備忘録として使ってますので簡易的に書いてあります。
知識が更新され次第記事も更新していきたいと思っております。
よろしくお願いします。