如何在markdown中高亮部分代码块

Question

我想突出显示使用三个反引号（```）以 Markdown 编写的代码块的一部分。 这是我想要的图像。

我想复制如何用荧光笔/记号笔在书中突出显示句子。 我已经使用了

<pre></pre>

和

<mark></mark>

但这些标签在代码块内不起作用，如下所示；

```
<pre>
<b>some bold text</b>
<pre/>
```

Answer 1

我同时使用 rehype-prism-plus 和 mdx 库 next-mdx-remote。

rehype-prism-plus

是一个 rehype 插件，用于使用 Prism 突出显示 HTML 中的代码块（通过 refractor）带有额外的行突出显示和行号 功能。

使用

next-mdx-remote

设置非常简单：

import { serialize } from "next-mdx-remote/serialize";
import rehypePrism from "rehype-prism-plus"

const mdxSource = await serialize(markdownContent, {
    mdxOptions: {
      remarkPlugins: [],
      rehypePlugins: [rehypePrism], // 🔴 here it is
    },
  });

Answer 2

目前仅单词以黄色突出显示。

对于那些想知道这个答案中建议的解决方案的作用的人，这里是。它们是 Node.js 插件（包）。您可以将它们安装在 Node 环境中并通过它们运行相应的 HTML。我将结果称为转译 HTML，类似于在常规 JavaScript 中转译 Coffee Script，因为 JavaScript 没有 Coffee Script 中可用的功能。在这里，Markdown 无法突出显示单个单词，因此建议将您所拥有的内容“管道”/传递给此 Node 包，它会吐出突出显示特定单词所需的 HTML。 问题是它无法扩展。你每次都必须进行转译。这个想法是在你想要突出显示的单词周围放置一个标签，类似于单词，它只以黄色显示。