本教程演示瞭如何將Prism.js語法集成到Next.js博客中，包括行號和行突出顯示。我們將利用remark-prism插件和一些自定義CSS/JavaScript用於高級功能。
構建next.js博客通常需要格式良好的代碼片段。本指南向您展示瞭如何使用Prism.js和remark-prism插件實現語法突出顯示，行號和單個線路的突出顯示。儘管某些方面比預期的要復雜，但本演練提供了解決方案。
先決條件：
本教程使用next.js博客入門，但原理適用於其他框架。安裝起動器和Prism.js：
npm我的備註優勢
基本的prism.js集成：
在您的markdownToHtml文件中啟用remark-prism （通常位於/lib中）：
從“備註”導入{備註}；
從“備註html”導入html；
從“備註 - 傑出人物”中進口言論；
導出默認異步函數markdowntohtml（markdown）{
const結果=等待備註（）
.use（html，{sanitize：false}）
。
.PROCESS（MARKDOWN）;
返回結果.tostring（）;
}根據您的版本，您可能需要調整remark-html使用。在pages/_app.js中導入Prism CSS：
導入“ prismjs/themes/prism-tomorrow.css”； 導入“ prismjs/plugins/line-numbers/prism-line-numbers.css”； 導入“ ../ styles/prism-overrides.css”;
創建prism-overrides.css用於自定義樣式。
添加行號：
當包含line-numbers插件時，您需要包括相應的CSS（如remark-prism Readme中所述）。您可能需要在prism-overrides.css中進行這樣的調整：
.line-numbers span.line-numbers行{
保證金頂：-1px;
}突出顯示線：
由於靜態站點的生成限制，Prism.js線高光插件與remark-prism優先不兼容。解決方法使用CSS和JavaScript。將此CSS添加到prism-overrides.css ：
：根 {
- 高光背景：RGB（0 0 0 /0）;
- 高光寬度：0;
}
.line-numbers span.line-numbers行> span {
位置：相對；
}
.line-numbers span.line-numbers行> span :: after {
內容： ” ”;
背景：var（ - 高光背景）;
寬度：var（ - 突出顯示）;
位置：絕對；
頂部：0;
}將data-line屬性添加到您的標記<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"></pre><div class="contentsignin">登入後複製</div></div>標籤（例如[data-line="3,8-10"] ）。在components/post-body.tsx中，使用JavaScript（示例顯示，適應您的結構）：
從“ react”導入{usefeft，useref}；
// ...
const rootref = useref（null）;
useeffect（（）=> {
// ...（代碼查找<pre class="brush:php;toolbar:false"> 元素和使用數據行屬性突出顯示行）...
}，[]）;
// ...（亮點代碼函數以基於數據行屬性應用樣式）...這涉及解析data-line屬性，獲取<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 元素的寬度，並動態設置CSS自定義屬性以突出指定行。</pre><div class="contentsignin">登入後複製</div></div>
無線數字的線突出顯示：
要突出顯示行不顯示行號的線路，請添加一個.hide-numbers類和CSS規則，以隱藏線號，同時保持突出顯示。
複製到捲板功能：
添加一個按鈕複製代碼段。在components/post-body.tsx中，將一個按鈕附加到每個按鈕<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 使用<code>navigator.clipboard.writeText</code>的<code>createCopyButton</code>函數的元素。使用CSS樣式按鈕。</pre><div class="contentsignin">登入後複製</div></div>
該綜合指南為將Prism.js集成到您的下一個博客中提供了強大的解決方案，從而實現了增強的代碼演示文稿。請記住將代碼片段調整到您的特定項目結構中。
以上是語法突出顯示（以及更多！）在靜態網站上帶有棱鏡的詳細內容。更多資訊請關注PHP中文網其他相關文章！
