記事中のソースコード表示を見やすくした 2018-12-11 (火) 02:49:00+09:00

 ソフトウェア

いろんなブログで見やすい表示をしているのでやってみたかったソースコード表示をやってみた。

などを参考に、Google code-prettify を使ってみた。

rNote への導入手順：

（１）上のページから「 Clone or download 」の「 Download ZIP 」を選び、アーカイブをダウンロードする。

（２） prettify.js, node_prettify.js, run_prettify.js, lang-*.js をサーバにアップロード。

（３） styles の中にある css ファイルをサーバにアップロード。

（４） html_head.skin の <head> </head> 内の </head> 直前に、

<link rel="stylesheet" href="code-prettify/styles/sons-of-obsidian.css">

を追加。

（５） html_body.skin の </body> 直前に、

<script src="code-prettify/js/prettify.js"></script> 
<script src="code-prettify/js/lang-css.js"></script>

を追加。（ lang*.js は、言語ごとの色付けの処理なので、必要なものをここで追加しておく。）

（６）記事の中にソースコードを表示させたい場合、ソースコードの直前に、

<pre><code class="prettyprint linenums">

を記述し、ソースコードの直後に、

</code></pre>

を記述する。

今は Open Live Writer を使用しているので、「Source」タブで直接タグを埋め込んでいる。これでなんとかなっているが、本来、 <pre> </pre> タグで囲んだ部分は、改行がそのまま反映されるのだが、 Open Live Writer がこの部分も改行を削除しだらだらと行をつなげてしまうので、やむを得ず、 <br /> タグを手打ちしている。

まだカスタマイズがあまり分かっていないので（例えば、行番号の部分だけ記事の背景色のままになっているのを、ソースコードの背景と同じ色にしたいが、どうすればいいか分からない、など）、あとで調べておこう。

キーワード: rNote Google Code-Prettify ソースコード表示