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

1.　設置方法

2.　表示例

3.　開始行指定

4.　改行

1.　設置方法

　特に設置方法はありません。
　ダウンロード時に「Line Numbers」プラグインのチェックをいれておけばよいだけ。
　あとは、前項で説明したように、ヘッダの中に、「prism.css」と「prism.js」の記述をいれるだけです。

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


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