今までソースコードの表示にGoogle Code Prettifyを使用していました。Google Code Prettifyに不満はなかったのですが、highlight.jsの方がいろいろな人がカスタマイズをしていて情報が豊富にあったため、ブログの見直しも兼ねてhighlixht.jsを導入時のメモを残しておきます。(javascriptやhtmlについて全く知らないため、導入時に調べたメモも残してます。)
↓Google Code Prettify導入時の記事
highlight.jsの導入方法
今回は導入するにあたり、下記ブログを参考にさせていただきました。
導入方法は簡単で、highlight.jsのサイトにアクセスして「Get version **」をを押下します。(下記画像で緑枠で囲んだところです。私が導入したときは11.6.0でした。)
次に参考文献同様にcdnjs欄に表示されているコードをコピーしてメモ帳などに張り付けておきます。
そしてlinkタグ内の.../default.min.css"の後ろに/を追記して次のようにします。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>末尾に/を追加する理由は空要素タグにするためだと思います。
空要素タグについてはこちらサイト(空要素について)を参照してください。
また、蛇足になりますが、こちらの方法で対応しているのは下記36言語みたいです。(上記画像の場所から下の方にスクロールすると対応言語一覧が出てきます。)
上記以外の言語を使用する場合は別の設定方法があるみたいですが、私の場合はC言語もしくはpythonぐらいしか使用予定がないため、このままで問題ございません。
そして下記1行をコピーして先ほどのコードの末尾に追加します。
最終的なコードは下記のようになります。
このコードをHTMLの編集画面から</body>の直前に張り付けて設定は完了です。
最後にBloggerにCSSを追加して設定は完了です。
挿入したいコードを下記のようにpreタグとcodeタグで囲みます。
基本的に言語は自動で検出して、言語に合わせたカラーリングで表示してくれます。
上記以外の言語を使用する場合は別の設定方法があるみたいですが、私の場合はC言語もしくはpythonぐらいしか使用予定がないため、このままで問題ございません。
次に再びトップページに戻ってUsageを押下します。
最終的なコードは下記のようになります。
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>このコードをHTMLの編集画面から</body>の直前に張り付けて設定は完了です。
(HTMLの編集方法が分からない方は過去記事Bloggerでソースコードを見やすくする(Google Code Prettify)を参照してください)
(補足)cdnjs、jsdelivr、unpkgの違い
この補足は興味がない人は読み飛ばしてください。今回はcdnjs、jsdelivr、unpkgの3つの名kでcdnjsのコードをコピーしましたが。自分はJavascriptを全く触ったことが無かったので、cdnjs、jsdelivr、unpkgの違いが判らなかったため調べました。
調べたところCDNサービスの違いのように理解しました。
CDNも初めて知った内容なので、下記サイトの説明が分かりやすかったです。
私の理解ではどのサーバーに保存されているライブラリ群を使用するかを選択するイメージだと理解しました(間違っていたら指摘お願いします。。。)
3つの違いを調べてみましたが、とりあえずunpkgはあまり利用者数が少なさそうに感じました。こちらのサイト(Unpkg vs. cdnjs(英語サイト))よりcdnjsとunpkgを比較するとcdnjsの方が利用者数が多いことが分かります。
また、cdnjsとjsdelivrの利用者数を比較したこちらのサイト(Comparison of the usage statistics of CDNJS vs. jsDelivr for websites(英語サイト))を見るとcdnjsの利用者数が一番多いみたいですので、cdnjsを選択するのが一般的であると思います。
ただし、こちらのサイト(JavaScriptライブラリはCDN使ったほうが便利だし早いっていう話)を見る限りjsdlivrの方が読み込み速度が速いみたいなので、速さをを求めるならjsdlivrを選択するのもアリだと思いました。今回はよくわかっていないということもあり、人気が高いcdnjsのコードをコピーしてます。
CSSを追加する
こちらも参考サイトをもとに実施しています。
CSSを追加することで、自分好みのデザインを表示させることができます。
下記デモサイトより変更したいデザインを選択します。
私は参考サイトと同様の A11 Y DARKを選択しました。
好みのデザインを選択したら下記Git hubからCSSのコードをコピーします。
今回は下記を選択して表示されたコードをコピーしてます。
最後にBloggerにCSSを追加して設定は完了です。
使い方
記事を投稿する際にHTMLビューを選択します。
挿入したいコードを下記のようにpreタグとcodeタグで囲みます。
<pre><code> (記事に張り付けたいコード)</code></pre>
基本的に言語は自動で検出して、言語に合わせたカラーリングで表示してくれます。
もし、明示的に言語を選択したい場合は下記のようにclass属性を指定してください。
<pre><code class="language-html">...</code></pre>
対応する言語については下記サイトを参照お願いします。
その他の使用方法についてはhighlight.jsのusageを参照してください。(How to use highlight.js)
カスタマイズをする
最低限コードを綺麗に表示できるようになりましたが、少し使いにくいためカスタマイズしていきます。
行番号を表示できるようにする
デフォルトのままだと行番号が表示されないので、行番号が表示されるようにカスタマイズしていきます。作業をするにあたって下記サイトを参考にさせていただきました。
highlightjs-line-numbers.js というものがあり、それを導入することで行番号のカウントができるみたいです。具体的に言うと先ほどのコードを下記のように更新して差し替えます。
<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/a11y-dark.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.1.0/highlightjs-line-numbers.min.js'/><!--行番号を表示するスクリプト-->
<script>hljs.highlightAll();</script>
<script>hljs.initLineNumbersOnLoad();</script><!--行番号を表示するスクリプト-->これで行番号が表示されるようになりましたが、書き方に少し注意が必要です。
このスクリプトは<pre><code>タグから改行をカウントして行番号を表示しているため、下記図の赤枠のようにHTMLの編集画面で<pre><code>で改行すると空の行がカウントされてしまいます。また、下記図の青枠のように</pre></code>前に改行があっても空の行がカウントされてしまいます。
下記図のように<pre><code>タグと同一行からソースコードを記述するのが正しい書き方となります。
次に参考文献と同じCSSを追加します。
CSS勉強中ですが、おそらく縦線を引くCSSのように見受けられます。
/*[START]行数表示のCSS*/
/* for block of numbers */
td.hljs-ln-numbers {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: center;
color: #ccc;
border-right: 1px solid #CCC;
vertical-align: top;
padding-right: 5px;
/* your custom style here */
}
/* for block of code */
td.hljs-ln-code {
padding-left: 10px !important;
}
/*[END]行数表示のCSS*/まとめ
今回はbloggerにhighlight.jsを導入しました。
まだ、カスタマイズが出来ていないため他のブログを参照しながらカスタマイズをしていきます。カスタマイズした際はこちらの記事を更新していこうと思います。
.png)
0 件のコメント:
コメントを投稿