構文ハイライト「code-prettify」をブログに導入する


画像：いらすとや

せっかく導入したので、導入方法をメモしておく。
「code-prettify」はJavascryptとCSSで指定タグ内を構文ハイライトしてくれる。
オープンソースで、現在も「GitHub」で開発が進められている。

表示

多少CSSで見た目を変えてあるが、こんな表示である。

C

#include 
main()
{
   printf("hello world");
}

導入

ファイルをダウンロードして、サーバーにアップロードもできるが、CDNが楽。

CDNを追記する

CSSもJavaScryptもこれひとつで読み込むらしい。

HTML

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

スキンもあり、CSSでも多少変えられる。スキン指定は、上記コードに「?skin=doxy」のようにしてできる。

スキン

code-prettify

使用

preとcode要素にclassでprettyprintを指定する。

HTML

<pre class="prettyprint">表示したい内容</pre>

HTML

<code class="prettyprint">表示したい内容</code>

行番号

スキンによっては5行ずつ行番号が表示されるが、classにlinenumsを追加することで1行ごとにもできる。

linenums

<pre class="prettyprint linenums">表示したい内容</pre>

linenumsなし

#include 
main()
{
   printf("hello world");
}

linenums指定

#include 
main()
{
   printf("hello world");
}

言語指定

classに言語を指定すると、それに沿ってハイライトしてくれる。C言語ならクラスにlang-cを追加する。Pythonならlang-pyである。以下は行番号も表示する設定になっている。

HTML設定

<pre class="prettyprint  linenums lang-c">表示したい内容</pre>

言語設定をしなかったり間違えると以下のようにハイライトされない。

間違えて設定

#include 
main()
{
   printf("hello world");
}

どの言語をどう記述するかについては以下を参考にした。

ブログcode-prettify,プログラミング,ブログ

Posted by pyonnyan