让代码块闪闪发光：使用marked和highlight.js进行渲染、高亮显示和自定义样式

2023-08-28 18:55:50

代码块渲染：提升可读性的秘密武器

引言

在当今信息爆炸的时代，代码已成为一种新的语言，广泛应用于软件开发、数据分析和人工智能等领域。如果您经常与代码打交道，您一定知道代码块对于组织和理解代码的重要性。

使用 marked 渲染代码块

要让代码块易于阅读和理解，您可以使用 marked，这是一个用于将代码渲染成 HTML 格式的库。其语法很简单：

console.log("Hello, world!");

生成的 HTML 将包含一个 <pre> 标签，其中包含一个 <code> 标签，其中包含代码。

使用 highlight.js 高亮显示代码块

为了让代码块更具吸引力，您可以使用 highlight.js，这是一个用于对代码块应用不同高亮样式的库。其语法与 marked 类似：

console.log("Hello, world!");

生成的 HTML 将包含一个 <pre> 标签，其中包含一个 <code> 标签，其中包含高亮显示的代码。

支持复制

如果您希望用户能够复制代码块，可以添加一个“复制”按钮，如下所示：

<button onclick="copyCode()">复制</button>

<script>
function copyCode() {
  var code = document.querySelector("pre code").textContent;
  navigator.clipboard.writeText(code);
  alert("已复制到剪贴板！");
}
</script>

选择不同的高亮样式

为了让用户自定义代码块的外观，您可以提供一个下拉列表，其中包含不同的高亮样式：

<select onchange="changeStyle()">
  <option value="default">默认</option>
  <option value="solarized">Solarized</option>
  <option value="monokai">Monokai</option>
  <option value="github">GitHub</option>
</select>

<script>
function changeStyle() {
  var style = document.querySelector("select").value;
  document.querySelector("pre code").className = style;
}
</script>