2018年4月29日日曜日 Web系 ブログ

google-code-prettifyのメモ書き

ブログ内でソースコードを記述する際のハイライトとしてgoogle-code-prettifyを使おうと思いますが、プロパティとか忘れそうなので普段使いそうなものをメモ書きしておきます。
基本的にはGitHubに書いてることのまとめです。

どういうの

技術系サイトでよく見るこういうやつです。

以下はGitHubのサンプルコードをコピーしてきました。

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";
 
  // will not interfere with embedded <a href="#voila2">tags</a>}

自動でハイライトとかもしてくれて便利です。
詳しいことはGitHubに書いてますね。

導入方法

HTMLテンプレートのHeadタグ内に、以下のタグを追加します。

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

そして、該当のソース部分を「class="prettyprint"」で囲みます。

<pre class="prettyprint">
ソースコード
</pre>

行数も表示したい場合はクラスにlinenumsを追加すればいいようです。

言語の判定

イマイチデフォルトではどの言語をもとにハイライトしてるのかわかりませんが、自分で明示的に設定できるみたいです。

<pre class="prettyprint"><code class="language-java">...</code></pre>

このlanguage-javaのjavaの部分で言語を設定します。
全部は試してないですが、以下が使えるようです。
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl"

まとめ

他にもいろいろクラスがあるみたいですが、ひとまずこれだけ使えればなんとかなるのでここまでにします。

またなにか別のクラスを使うことがあればその都度更新しようと思います。