Bloggerのコード・ハイライト
Prism の導入
Blogger のコードハイライト用に Prism を使用します。導入は簡単で、次のコードを Blogger テーマの HTML に次のコードを貼り付けるだけです。（テーマの HTMLの操作方法が分からない場合は、こちらなどを参考にしてください）
<!-- Prism -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js'></script>
<!-- /Prism -->
使い方
<pre><code class="lamguage-markup">...</code></pre>
<pre><code class="language-xxx"> と </code></pre>で表示したいコードを囲みます。「XXX」の部分には言語を指定します。記述方法については、Prism のSupported languages を参考にしてください。
オプション
CDN を追加することで、テーマの変更や行番号表示などができるようになります。テーマの変更
上記の設定で使用されるテーマはdefaultです。どのように表示されるかは、Prism のサイト で確認できます。右側の団子状に並んだ丸の1つをクリックすると、ページ内のコードが選択したもので表示されます。
気に入ったものがあれば、そのCDNをテーマの HTMLに設定します。
例えば、OKAIDIAを設定する場合は次のようになります。
手順
- cdnjs サイトに行き、css タブを選択してください（初期値はjsタブになっていると思います）。
- その中から、
https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.cssを探しコピーします（1.20.0 部分はバージョンなので適宜読み替えてください）。 - このコピーを、次のように
hrefの中に張り付けて、テーマの HTMLに設定してください。
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/themes/prism-okaidia.min.css' />
行番号
テーマの変更同様に、cdnjs サイトからURLをコピーしてテーマの HTMLに設定するだけですので、そのコードのみを示します（行番号については JavaScipt も必要ですので同時にインクルードします）。<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.css' />
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-numbers/prism-line-numbers.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/plugins/line-highlight/prism-line-highlight.min.js'></script>
言語
大半の言語はデフォルトでサポートされていますが、所望の言語がない場合は、cdnjs サイトの js タブの中からcomponents を含む URL をテーマの HTMLに設定します。【例】
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/components/prism-sass.min.js'></script>
Written with StackEdit.
0 件のコメント:
コメントを投稿