HTML - シンタックスハイライト - prism.js - 行番号表示プラグインを使ってみる

1.　設置方法

2.　表示例

3.　開始行指定

4.　改行

1.　設置方法

　特に設置方法はありません。
　ダウンロード時に Line Numbers プラグインのチェックをいれておけばよいだけ。

　あとは、前項で説明したように、ヘッダの中に１行、ボディを閉じる前に１行いれるだけです。

2.　表示例

　行番号をいれるには <pre> の中に class="line-numbers" をいれるだけです。

　こののように記述すると


<pre class="line-numbers"><code class="language-c">
#include <stdio.h>

int main(int argc, char* argv[])
{
	print("Hello World!");

	return 0;
}
</code></pre>


　このように表示されます。


#include <stdio.h>

int main(int argc, char* argv[])
{
	print("Hello World!");

	return 0;
}


3.　開始行指定

　開始行を変更するには <pre> の中に data-start="番号" をいれます。

　こののように記述すると


<pre class="line-numbers" data-start="3"><code class="language-c">
int main(int argc, char* argv[])
{
	print("Hello World!");

	return 0;
}
</code></pre>


　このように表示されます。


int main(int argc, char* argv[])
{
	print("Hello World!");

	return 0;
}


4.　改行

　行末を折り返しにしたときの行番号を確認してみます。


if (cli)
{
}

ってなんなの～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～ふにふにを単語として数えているんだね～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～～どういう数え方をしているんだろうか？	①	②

ちゃんと行数数えてる？  行数の数え方は Good
8
9
10


　行数の数え方は思い通りです。
　わたしの思うカスタマイズもできそうです。
　わたしの思うカスタマイズについては次項、以降で。