【highlight.js】コードブロックを装飾して自分好みのテーマにしてみよう

投稿日 2021/07/12

このブログにもよくコードブロックを使ってコードを掲載していますが、特に何もしていないと、随分と殺風景…

cssでスタイルを当てようと思っても言語ごとに変えたり等々面倒なことも多いです。

ということでライブラリに頼りましょう。

シンタックスハイライトをしてくれるライブラリはいくつかありますが、今回は「highlight.js」を使用してみたいと思います。

他にもPrism.jsもありますが、それはまた今度。

highlight.jsの使い方

まずはインストール。

yarn add highlight.js

インストールが完了したら、JavaScriptで読み込みましょう。

hogehoge.ts

import highLight from 'highlight.js';

読み込めたらあとは以下を書くだけで自動的にすべてのコードブロックにシンタックスハイライトが付きます。

highLight.highlightAll()

基本的にはこれだけでOKです。

その他にも特定の言語だけ適用させたりと使い方はあるようですので興味のある方は以下から覗いてみてください。

これだけでもかなり見栄えがよくなりますね。

技術ブログにはコードブロックは必須だと思うので改めて設定しておくべきだなぁと思いました。

このような感じでこのブログでは日々自分が学んだ技術やライブラリ等を投稿しています。

興味を持たれた方はぜひ、他の記事もご覧になっていただけると幸いです。