语法突出显示（以及更多！）在静态网站上带有棱镜

本教程演示了如何将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"> 使用&lt;code&gt;navigator.clipboard.writeText&lt;/code&gt;的&lt;code&gt;createCopyButton&lt;/code&gt;函数的元素。使用CSS样式按钮。</pre><div class="contentsignin">登录后复制</div></div>

该综合指南为将Prism.js集成到您的下一个博客中提供了强大的解决方案，从而实现了增强的代码演示文稿。请记住将代码片段调整到您的特定项目结构中。

以上是语法突出显示（以及更多！）在静态网站上带有棱镜的详细内容。更多信息请关注PHP中文网其他相关文章！