Code prettifyを使う手順。
① HTMLの<head>～</head>の中に<script>タグでコードを読み込む
② ソースコードを記載するときは、<pre>タグを<pre class="prettyprint>に変更する。
以上、終わり。
まず、HTMLの～の中に
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js" type="text/javascript" />標準のテーマは5種類あるので、他のものを選択したければ
https://raw.githack.com/google/code-prettify/master/styles/index.html
からテーマを選び、こんな感じにする。skin=で指定する際に全部小文字にすることに要注意。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian" type="text/javascript" />ソースコードを書くときは、こんな感じにする。
<code><pre class="prettyprint linenums:1 lang-html">
<!-- ここにソースコードを貼り付ける -->
</pre></code>設定の意味
- linenumsは、行番号を表示させるオプション。
- linenums:1の1は、行番号を1から始めるの意味。
- lang-htmlは指定する必要はないが、ソースコードの言語を指定する。自動的に言語判定をしてくれるので、通常は指定する必要はない。指定できる言語は以下の通り。
"bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java", "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml", "xsl".
注意事項
- <code>と<pre>の順序が逆になると、1行目に空行が入ってしまうようだ。
- 記事を書くときに、改行を自動的に変換する設定にしていると、ソースコードが1行おきに表示されることになる。
- <pre>で囲ったソースコード内のHTMLタグを自動変換してくれるわけではないので、HTMLタグを変換してくれるサイトなどで、変換してから記載すること。
