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

 
3.1 設置方法
3.2 表示例

3.1 設置方法

 特に設置方法はありません。  ダウンロード時に Line Numbers プラグインのチェックをいれておけばよいだけ。  あとは、前項で説明したように、ヘッダの中に1行、ボディを閉じる前に1行いれるだけです。

3.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;
}
 開始行を変更するには <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;
}
 行末を折り返しにしたときの行番号を確認してみます。

if (cli)
{
}

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

ちゃんと行数数えてる?  行数の数え方は Good
8
9
10
 行数の数え方は思い通りです。  わたしの思うカスタマイズもできそうです。  わたしの思うカスタマイズについては次項、以降で。