最新の投稿

HKU\.Defaultはデフォルトユーザのものではない。

HKU\.DEFAULT(HKEY_USERS\.DEFAULT)は、あちこちで間違った認識をされている。HKU\.DEFAULT(HKEY_USERS\.DEFAULT)は、デフォルトユーザとかテンプレートユーザと呼ばれるアカウント(=今後作成されるユーザアカウントの初期設定)...

2020/05/21

記事内のコードをきれいに(code prettify)

記事に書いたコードをきれいに表示させるためのツール - code prettify
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タグを変換してくれるサイトなどで、変換してから記載すること。