如何在Docpad/Markdown中突出显示一段代码

Question

我在我的博客中使用docpad + markdown。 我使用highlight.js插件来格式化代码示例。 格式化正常工作，关键字已突出显示。 现在，我想用附加格式强调代码块的某些部分，例如，显示与上一个块相比所做的更改。

是否可以突出显示代码块的某些部分，例如：

• 使函数调用粗体
• 划掉一些文本
• 将某些文本变为红色

这是Martin Fowler的博客上的样子：

唯一的区别是我希望保留关键字高亮显示。

- Mikhail Shilkov

Answer 1

根据Docpad的插件列表，您有几个选项。我快速浏览了下面列出的两个选项。可能还有其他我错过的。

1. Highlight.js插件
2. Pygments插件

如果您想自定义输出的外观方式，我认为您需要编辑任一插件使用的CSS。请参阅您选择的特定插件的文档。

---

例如，Highligh.js插件docs指出您需要单独下载样式表（这可能解释了为什么使用该插件时OP没有得到任何样式）。请查看提供的列表和演示，并选择最适合您所需外观的样式。

下载CSS文件并保存到适当的目录中。正如Docpad的docs所示，应该保存在src/render/styles/filename.css，确保将“filename.css”替换为文件名。正如文档所述：

Then, to include it in our pages, we'll update the styles Block in our default.html.eco layout to:

<%- @getBlock("styles").add(["/styles/style.css"]).toHTML() %>

再次强调，确保使用您的文件的实际名称。

要对使用的颜色/样式进行任何调整，您需要编辑CSS文件。请注意，Highlight.js提供了类名列表，您可以用于样式钩子。找到与您想要调整的项目相匹配的特定类名，并找到CSS文件中样式化该类的位置，并进行编辑，直到满意为止。

请注意，以上假设您正在使用DocPad文档中“入门”页面中解释的默认设置和插件。您的情况可能有所不同。

---

如果您想要突出显示更改，那么您需要创建一个diff来定义您的更改，然后将“diff”定义为语言。Highlight.js将使用diff高亮显示器来突出显示更改。不幸的是，没有办法同时获得语言突出显示和差异突出显示。换句话说，您只能突出显示关键字或突出显示更改，而不能两者兼备。

当然，您可以始终定义自己的“语言”，并注册它到Highlight.js中。但这超出了本论坛的范围。

- Waylan

---

是的，我已经在使用Highlight.js了，但我无法弄清楚如何在代码块内进行自定义格式设置。 - Mikhail Shilkov

@Mikhail，这些信息应该添加到你的问题中，因为它对提供有用（对你来说）的答案至关重要。我更新了我的答案，包括一些更具体的信息。请注意，我没有使用Docpad的经验，所以我对它的任何陈述都是直接来自他们的文档。他们的文档似乎非常清晰，我建议你仔细阅读。我预计大部分你的问题都会在那里得到解答。我怀疑你唯一缺少的就是需要单独下载样式表。我第一次也错过了这个。希望这可以帮助到你。 - Waylan

按照建议扩展了我的问题。语法高亮显示效果很好，但我想要的是在代码块的特定部分扩展默认语言格式，并使用自定义格式进行格式化。例如，划掉一个变量名并将新名称放在旁边。 - Mikhail Shilkov

在我的回答中添加了更多关于突出显示更改的信息。 - Waylan