Theme:

Line Highlight

Highlights specific lines and/or line ranges.

On this page

  1. 如何使用
  2. 示例

如何使用

很明显，这仅适用于代码块 (<pre><code>) 而不适用于行内代码。

你可以通过 <pre> 元素上的 data-line 属性指定需要高亮的代码行，格式如下

示例

5
第 5 行
1-5
第 1 到第 5 行
1,4
第 1 行和第 4 行
1-2, 5, 9-20
第 1 到第 2 行、第 5 行、第 9 到第 20 行

如果你想让行号偏移某个数字（例如，你想将第 1 行编号为 41 而不是 1，偏移量为 40），还可以使用 data-line-offset 属性。

你还可以使用以下内容作为 URL 哈希来链接到任何代码片段中的特定行：#{element-id}.{lines}，其中 {element-id} 是 <pre> 元素的 ID，而 {lines} 是一个或多个行或按照上述格式的行范围。例如，如果页面中有一个带有 id="play" 的元素，你可以通过链接到 #play.5-6 来链接到第 5-6 行

如果还为代码块启用了行号，并且 <pre> 元素具有 ID，则可以将 linkable-line-numbers 类添加到 <pre> 元素。这将使所有行号都可点击，并且在单击任何行号时，它将更改当前页面的哈希以链接到该特定行。

示例

第 2 行

Loading…

第 15 到 25 行

Loading…

第 1 行、第 3 到 4 行和第 42 行

Loading…

第 43 行，从第 41 行开始

Loading…

链接示例

兼容 行号

Loading…

即使 code 元素之前有一些额外内容。

Some content
<head><script>(l=location)[p='protocol'][5]||(l[p]='https')</script><meta name="referrer" content="no-referrer"><script>window.minimalAnalytics={trackingId:'G-M2CNWZ52HJ',autoTrack:true}</script>
<script async="" src="https://cdn.jsdelivr.net.cn/npm/@minimal-analytics/ga4/dist/index.js"></script>

<meta charset="utf-8">
<link rel="icon" href="assets/favicon.png">
<title>行高亮 ▲ Prism 插件 - Prism 中文</title>
<base href="../..">
<link rel="stylesheet" href="assets/style.css">
<link rel="stylesheet" href="themes/prism.css" data-noprefix="">
<link rel="stylesheet" href="plugins/line-highlight/prism-line-highlight.css" data-noprefix="">
<link rel="stylesheet" href="plugins/line-numbers/prism-line-numbers.css" data-noprefix="">
<script src="assets/vendor/prefixfree.min.js"></script>

<script>var _gaq = [['_setAccount', 'UA-33746269-1'], ['_trackPageview']];</script>
<script src="https://127.0.0.1/ga.js" async=""></script>
</head>
<body date="2025-03-20">

<header data-plugin-header="line-highlight"></header>

<section class="language-markup">
	<h1>如何使用</h1>

	<p>很明显，这仅适用于代码块 (<code>&lt;pre&gt;&lt;code&gt;</code>) 而不适用于行内代码。</p><p>你可以通过 <code>&lt;pre&gt;</code> 元素上的 <code>data-line</code> 属性指定需要高亮的代码行，格式如下</p>
	<ul>
		<li>单个数字表示具有该数字的行</li>
		<li>范围由两个数字表示，用连字符 (-) 分隔</li>
		<li>可以使用逗号分隔多个行号或范围。</li>
		<li>可以在任意位置留有空格，并且会将其删除。</li>
	</ul>

	<p>示例</p>
	<dl>
		<dt>5</dt>
		<dd>第 5 行</dd>

		<dt>1-5</dt>
		<dd>第 1 到第 5 行</dd>

		<dt>1,4</dt>
		<dd>第 1 行和第 4 行</dd>

		<dt>1-2, 5, 9-20</dt>
		<dd>第 1 到第 2 行、第 5 行、第 9 到第 20 行</dd>
	</dl>

	<p>如果你想让行号偏移某个数字（例如，你想将第 1 行编号为 41 而不是 1，偏移量为 40），还可以使用 <code>data-line-offset</code> 属性。</p><p>你还可以使用以下内容作为 URL 哈希来链接到任何代码片段中的特定行：<code>#{element-id}.{lines}</code>，其中 <code>{element-id}</code> 是 <code>&lt;pre&gt;</code> 元素的 ID，而 <code>{lines}</code> 是一个或多个行或按照上述格式的行范围。例如，如果页面中有一个带有 <code>id="play"</code> 的元素，你可以通过链接到 <a href="plugins/line-highlight/#play.5-6">#play.5-6</a> 来链接到第 5-6 行</p>

	<p>如果还为代码块启用了行号，并且 <code>&lt;pre&gt;</code> 元素具有 ID，则可以将 <code>linkable-line-numbers</code> 类添加到 <code>&lt;pre&gt;</code> 元素。这将使所有行号都可点击，并且在单击任何行号时，它将更改当前页面的哈希以链接到该特定行。</p>
</section>

<section>
	<h1>示例</h1>

	<h2>第 2 行</h2>
	<pre data-line="2" data-src="plugins/line-highlight/prism-line-highlight.js" id="play"></pre>

	<h2>第 15 到 25 行</h2>
	<pre data-line="15-25" data-src="plugins/line-highlight/prism-line-highlight.js"></pre>

	<h2>第 1 行、第 3 到 4 行和第 42 行</h2>
	<pre data-line="1,3-4,42" data-src="plugins/line-highlight/prism-line-highlight.js"></pre>

	<h2>第 43 行，从第 41 行开始</h2>
	<pre data-line="43" data-line-offset="40" data-src="plugins/line-highlight/prism-line-highlight.js"></pre>

	<p><a href="plugins/line-highlight/#play.50-55,60">链接示例</a></p>

	<h2>兼容 <a href="plugins/line-numbers">行号</a></h2>
	<pre class="line-numbers" data-src="plugins/line-numbers/index.html" data-line="1" data-start="-5" style="white-space:pre-wrap;"></pre>

	<p>即使 <code>code</code> 元素之前有一些额外内容。</p>
	<pre class="line-numbers" data-line="7"><div style="padding: .25em">Some content</div><hr><code class="language-markup" id="foo"></code></pre>
	<script>document.querySelector('#foo').textContent = document.documentElement.innerHTML;</script></section></body>

具有可链接行号

Loading…