ソースコードの表示

code-prettify

Google code-prettify は、簡単に設置できて、シンタックスハイライトにより非常にソースコードが見やすくなる。
https://github.com/google/code-prettify からソースコードを持ってきて設置しても良いし、CDN版を利用することも可能。

使い方は簡単でドキュメントに下記を追加するだけで準備OK

<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>

<pre class="prettyprint">
//コードを記述
</pre>

ただし、実際に使用するときは、行番号の表示が5行おきだったり、「<」,「>」がそのまま使えなかったり、それなりに不便だったりする。
このページでは、スキンに sunburst を適用して、下記の CSS を追加設定している。

.prettyprint ol{
  padding: .2rem 0 .5rem .8rem;    /* 間隔の調整(必要であれば) */ 
}
 
.prettyprint ol.linenums > li {
  list-style-type: decimal;        /* 1行ごとに行番号を表示 */ 
  border-left:solid 1px orange;    /* 区切り線を表示 */
  margin-left:0.5rem;              /* 間隔の調整(桁に合わせて) */
  padding-left:0.5rem;             /* 間隔の調整(必要であれば) */
}

C言語のソースコードは下記のように表示される。

#include <stdio.h>

int main(int argc, char **args)
{
	printf("Hello, world!\n");
	return 0;
}

このページは言多の備忘録を元に再構成しています。