Bloggerのコードハイライト その2

先日はhighlight.jsを使ってみたが、今回はSyntaxHighlighterを使ってみる。 SyntaxHighlighter

こちら bloggerでSyntaxHighlighterを表示する方法 などを参考に、下記コードを適用。
前回同様、「テーマ」から「HTMLの編集」を選択し、headタグ内に配置する。

使用方法としては、投稿画面HTML編集で、

.....

のようにコードの種類を指定してタグで囲む。
また、bloggerで使用する際は、
bloggerMode を true に設定。
auto-links は false
toolbar は false　に設定した。

hightlihgt.jsでBloggerのコードをハイライト

Bloggerを始めるにあたりコードも書こうかと思っているので、調べたところ,
highlight.jsを使ってみることにした。
ざっくりと設定方法をメモ。

highlight.js

cdnjsから2行をコピーし、テーマのCSSを変更、Usageから3行目をコピーして、以下の3行を作成。

<link href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/agate.min.css' rel='stylesheet'/>
<script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

Bloggerの管理画面「テーマ」から「HTMLを編集」を選択し、ヘッダーの一番最後に貼り付ける。
また、モバイル用テーマのカスタマイズ画面で、「デフォルト」→「カスタム」に変更。

使用方法としては、投稿画面のHTML編集で、以下のようにする。

<pre><code class="vbnet">...</code></pre>

コードの種類をclassで指定する。htmlとかvbnetとか。

3/15※この投稿もSyntaxHighlighter向けにタグを更新

Blog開設

Blog開設します。
プログラミングなどの記録やメモとして使っていこうかなと思っています。