如何使用

很明顯地，這只針對程式碼區塊（<pre><code>）運作，不適用於內聯程式碼。

將 line-numbers 類別新增到您想要的 <pre> 或任何其祖先，Line Numbers 外掛程式就會負責其它的部分。若要賦予所有程式碼區塊行號，請將 line-numbers 類別新增到頁面的 <body>。這是全域啟動機制的一部分，當將 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;"。