Home

markdownのコードに
シンタックスハイライトをつける

update: 2019-04-25

react

コードが読みづらい問題

本記事はmarkdownで記述し、react-markdownでHTML化しています。テクブログってことなのでコードブロックを結構書きますが、HTML化されたコードは黒文字だけ😎具体的にはcodeタグで囲まれclassが指定されるだけといった感じ。

↑これが↓こうなります。

対応方法

なんとかカラフルにカッコいい感じにする方法がないかなと色々調査してたら見つかりました。

要約すると、シンタックスハイライトをつける人気のライブラリは下記2点あるが、jsxに対応してるPrismを使用。 - [highlight.js](https://highlightjs.org/) - [Prism](https://prismjs.com/)

react-syntax-highlighterという上記2つに対応したライブラリがあるので、これをreact-markdownのcodeブロックレンダリング処理として組み込むだけ。具体的な実装は紹介記事を読んでください。すごく簡単にできました。

対応してる言語多いので安心(pythonとjsしか書くつもりないが🤪)
AVAILABLE_LANGUAGES_PRISM.MD