2016年12月24日土曜日

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

0 件のコメント:

コメントを投稿