使い方

これは当然のことながら、コードブロック（<pre><code>）に対してのみ機能するように想定されており、インラインコードに対しては機能しません。

目的の <pre> またはその祖先のいずれかに line-numbers クラスを追加すると、Line Numbers プラグインが後の作業を処理します。すべてのコードブロックに行番号を付与するには、ページの <body> に line-numbers クラスを追加します。これは、要素に line-numbers（または no-line-numbers）クラスを追加すると、その要素内のすべてのコードブロックに対して Line Numbers プラグインが有効（または無効）になる一般的なアクティベーションメカニズムの一部です。
例

<body class="line-numbers"> <!-- enabled for the whole page -->

	<!-- with line numbers -->
	<pre><code>...</code></pre>
	<!-- disabled for a specific element - without line numbers -->
	<pre class="no-line-numbers"><code>...</code></pre>

	<div class="no-line-numbers"> <!-- disabled for this subtree -->

		<!-- without line numbers -->
		<pre><code>...</code></pre>
		<!-- enabled for a specific element - with line numbers -->
		<pre class="line-numbers"><code>...</code></pre>

	</div>
</body>

省略可能: <pre> 要素に data-start（数値）属性を指定できます。これによって行カウンターがシフトされます。

省略可能: ソフトラップを使用して複数行の行番号をサポートするには、CSS の white-space: pre-line; または white-space: pre-wrap; を目的の <pre> に適用します。

例

JavaScript

CSS

この <pre> には line-numbers クラスはありませんが、その親にはあることに注意してください。

HTML

以下のコードの data-start="-5" に注意してください。

不明な言語

This raw text
is not highlighted
but it still has
line numbers

ソフトラップサポート

以下のコードの style="white-space:pre-wrap;" に注意してください。