この記事を読むのに必要な時間は約 6 分です。
こんにちは、トッドです。
ソースコードを紹介する旨の記事を書きたいと思ったとき、<pre><code>タグを用いて表現できます。
ただ、１色表現(文字色)になっちゃうんですよね。
そうやって表現されるコードは観づらいし、違和感を感じる、なんか違うってなることはありませんか？。
で、Codepenに行っちゃうんですね。
解決しちゃいましょう。
読み込むだけで簡単実装「highlight.js」
本日の主役になります。「highlight.js」です。実装する上で、今回は最もシンプルかつ簡単なCDN(コンテンツデリバリネットワーク)経由で読み込み、機能するまでの工程について書き記しておきたいと思います。
ココから飛べるよ↓
方法は簡単で自サイトの<head></head>に以下のソースコードをコピペするだけです。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/styles/atom-one-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.0/highlight.min.js"></script>
<!--表示する使用上コメントアウトしています。↓お忘れなく-->
<!--<script>hljs.initHighlightingOnLoad();</script>-->
コレだけでソースコードをハイライトする機能は実装されます。
注意して欲しい事は末尾にコメントアウトしてある、こちらの<script>hljs.initHighlightingOnLoad();</script>コードも必要ですのでコメントアウトを除去してあげてくださいね。
そして、配色にこだわりたいというニーズにもhighlight.jsは答えてくれます。
先にコピペ文言で紹介しているコードの１行目に注目してみてください。
こちらですね↓
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.1.1/styles/atom-one-dark.min.css">
この行の末尾を見て頂くと「atom-one-dark」と記載されている箇所を確認できるかと思います。こちらはhighlight.jsにて用意されているスタイルの一種であり、他にもたくさん種類があります。今、示した箇所を他のスタイル名に変更してもらうと好みのハイライト仕様に変更することができます。
こちらから、highlight.jsのその他スタイル一覧を観覧することができます。↓
リンク先に飛んでもらうと以下のようなページが表示されるのでこちらのサイドバーから「Style」と見出しがついている箇所に並んでいる語群がスタイル名の種類です。
プレビューもその場で確認することができるので好みの配色が見つけられることでしょう。
使い方
使い方は<pre><code></code></pre>で囲った中に表示させたいソースコードを記述します。そのとき記述するコードがエスケープ処理されている必要があります。
使いやすいモノにこちらのようなツールがあります↓
コレで万全！！と、言いたいところですがたまに中途半端に機能してしまうケースがあります。
そんな時は、<code class="言語名"></code>のように記述したソースコードの言語名をクラス指定すると反映されるようになります。
ココでの言語名指定には少し癖があります。例えば、HTMLの場合は”htmlbars”という具合です。
指定する言語名の表記はこちら↓の各種言語のファイル名と同名ですので該当するものを探してみてください。
ココまでの内容で今のところ筆者の環境では、問題なく機能しています。
参考になればいいなぁ〜
最後までみてくれてありがとう。
