語法突出顯示（以及更多！）在靜態網站上帶有棱鏡

本教程演示瞭如何將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屬性添加到您的標記<pre class="brush:php;toolbar:false"></pre>標籤（例如[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屬性，獲取<pre class="brush:php;toolbar:false"> 元素的寬度，並動態設置CSS自定義屬性以突出指定行。</pre>

無線數字的線突出顯示：

要突出顯示行不顯示行號的線路，請添加一個.hide-numbers類和CSS規則，以隱藏線號，同時保持突出顯示。

複製到捲板功能：

添加一個按鈕複製代碼段。在components/post-body.tsx中，將一個按鈕附加到每個按鈕<pre class="brush:php;toolbar:false"> 使用&lt;code&gt;navigator.clipboard.writeText&lt;/code&gt;的&lt;code&gt;createCopyButton&lt;/code&gt;函數的元素。使用CSS樣式按鈕。</pre>

該綜合指南為將Prism.js集成到您的下一個博客中提供了強大的解決方案，從而實現了增強的代碼演示文稿。請記住將代碼片段調整到您的特定項目結構中。

以上是語法突出顯示（以及更多！）在靜態網站上帶有棱鏡的詳細內容。更多資訊請關注PHP中文網其他相關文章！