highlight.js を Blogger に導入した

そのうちソースコードとか載せたくなった時に、見た目ちょっと良くなるかなーって。


シンタックスハイライトの表示がしたくなったので

ちょっと苦戦したんで、導入方法をメモっておきます。
例えばJavaだとこんな感じに見えるみたい。（コード拝借元）
なんだか賢い記事を書いているような気分がしていいね、これ。

/**
 * @author John Smith 
 * @version 1.0
*/
package l2f.gameserver.model;

import java.util.ArrayList;

public abstract class L2Character extends L2Object {
  public static final Short ABNORMAL_EFFECT_BLEEDING = 0x0_0_0_1; // not sure

  public void moveTo(int x, int y, int z) {
    _ai = null;
    _log.warning("Should not be called");
    if (1 > 5) {
      return;
    }
  }
}

必要なものをゲットしてくる

とりあえず公式サイトに行こう。
https://highlightjs.org/

「Get version 9.1.0」ってのから、cdnjsをコピー。
その後、一旦戻ってUsageをクリックして、「hljs.initHighlightingOnLoad();」の行をコピーする。

最終的にこんな感じ。

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

ちみに、この "default.min.css" を変えることでテーマをいじることができる。
今のうちの設定は "github.min.css" というの。

テーマに関してはここから選べる。
https://github.com/isagalaev/highlight.js/tree/master/src/styles

テーマごとの見た目サンプルはここ。
https://highlightjs.org/static/demo/

※".min.css"を付け忘れないこと！


追加する

いずれか好きな方を選べる。

1. テンプレートに追加する方法
2. ガジェットとして追加する方法

ちなみにこのブログは 1. テンプレートに追加する方法 を利用しています。

1. テンプレートに追加する場合
「テンプレート」→「HTMLを編集」を選択。
</head>を見つけ出し、その上にさっきの3行を追加して保存する。

2. ガジェットとして追加する場合
「レイアウト」から、ガジェット「HTML/Javascript」を追加する。
先程の3行を本文に書き込む。
タイトルは適当でOK。

使ってみる

投稿画面で、HTMLを編集する。
以下の要領で書き込めばOK。
< > カッコはエスケープ文字にしなきゃいけないので注意。
あと、codeタグのclass属性は省略可能。

<pre><code class="言語名">
   // ここにコードを書き込む
</code></pre>

参考サイト

highlight.jsを使ってBloggerでコードをハイライトする（furico tech blog）