Bloggerでシンタックスハイライトを利用する

code-prettifyを利用する方法。
https://github.com/google/code-prettify

(1)ブログ管理画面の”Template”から、テンプレートのHTMLを編集する。
haedタグの中に以下を記述する。

<script src='https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sunburst'/>

(2)シンタックスハイライトを利用したい部分を、以下のタグで囲う。

<pre class="prettyprint">
(任意のコード)
</pre>

classに、追加で”lang-*”を指定すると対象言語を明示的に指定できる。lang-*の”*”の部分にはデフォルトで以下が利用できる

    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html",
    "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh",
    "xhtml", "xml", "xsl".

ヘッダ行のrun_prettify.jsを呼び出すパラメタにskinを指定すると、シンタックスハイライトのスタイルを切り替えられる。上記の例ではsunburstというスタイルを利用している。
デフォルトで利用可能なスタイルの一覧は以下。
https://rawgit.com/google/code-prettify/master/styles/index.html

その他にも呼び出し時のパラメタで挙動を変更することができ、詳しい設定は以下を参照。
https://github.com/google/code-prettify/blob/master/docs/getting_started.md

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

CAPTCHA