如何在Markdown中突出显示代码块的一部分

Question

我想突出显示使用三个反引号（```）编写的markdown代码块中的一部分。 下面是我想要的效果的图片。 code block with highlighting-imgur

我想复制在书中用荧光笔/标记器突出显示句子的方式。 我已经使用了<pre></pre>和<mark></mark>，但这些标签在代码块中不起作用，如下所示；

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

- Alekh Kumar

---

你正在使用哪个Markdown工具？普通的Markdown不支持这样的功能（或者在代码块中提供语法高亮）。 - Chris

我正在使用普通的Markdown，感谢提供信息。我一直在寻找方法，但它并不存在。 - Alekh Kumar

在这种情况下，您将完全依赖HTML来处理该部分。移除\``标记，只需使用<pre><code>...</code></pre>`即可。 - Chris

可以这样做，但我必须在不同语言的语法突出显示方面做出妥协。但我看不到其他解决办法，这是最接近的可能解决办法。感谢您的建议。 - Alekh Kumar

好的，Markdown本身并不会对源代码进行语法高亮。您必须使用特定的工具来添加它。 - Chris

Answer 1

我使用rehype-prism-plus和一个mdx库next-mdx-remote一起使用。

rehype-prism-plus是一个rehype插件，用于通过Prism（通过refractor）在HTML中突出显示代码块，并提供了额外的行高亮和行号功能。

使用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
    },
  });

- iamCY