@beoe/rehype-code-hook (英语)

Rehype 插件,以更容易为代码写入自定义处理器,例如:

Block-code:
<pre><code class="language-js">const x = 1;</code></pre>

Inline-code:
<code>x</code>

在减记中,它相当于:

Block-code:

```js
const x = 1;
```

Inline-code:
`x`

如果您想要创建回旋插件, 此插件是有用的 :

• 突出显示代码, 如 @shikijs/rehype, (中文(简体) ), rehype-prism, (中文(简体) ), rehype-highlight 包括:.
• 渲染图表,比如 rehype-mermaid
• 做别的事情,像 rehype-color-chips

使用量

基本例子是这样的:

import { rehypeCodeHook } from "@beoe/rehype-code-hook";
import { generateSvg } from "./generateSvg.js";

export const rehypeExampleDiagram = (options = {}) => {
  return rehypeCodeHook({
    ...options,
    code: ({ code }) => generateSvg(code),
  });
};

如果您有这样的代码( 在 Markdown 标记中更为清晰, 但插件实际上在 rehype 级别上有效 ) :

```js {1,10}
const x = 1;
```

code 将调用回调:

{
  code: "const x = 1;\n",
  inline: false,
  language: "js",
  meta: "{1,10}"
}

如果你有这样的代码:

`const x = 1;`

code 将调用回调:

{
  code: "const x = 1;",
  inline: true,
  language: undefined,
  meta: undefined
}

现在是时候让你的东西:

• 您可以检查 code, (中文(简体) ), inline, (中文(简体) ), language, (中文(简体) ), meta 如果你要找的不是这里 你可以回去了 undefined - 挡板不变
• 如果你决定做一些东西 你可以回来 string (例如SVG或HTML),您可以返回 HAST 片段,也可以返回对字符串或 HAST 的许诺
  • 如果返回值是 HAST 片段, 它将会替换整个代码块
  • 如果返回值是字符串, 它将被转换为 HAST, 然后将替换整个代码块
  • 如果返回值是承诺的,它会等到它解决,并做上面的一个步骤

您可以配置您的插件, 仅用于特定的情况, 例如 :

• 仅用于语言 example数字 : rehypeCodeHook({language: "example",..})
• 仅用于内置代码 : rehypeCodeHook({inline: true,..})

要启动缓冲需要通过 Map- 像存储 :

rehypeCodeHook({ code, cache: new Map(), hashTostring: true });

我查过了 @ beoe/ cache (帮助),但它应该工作 任何存储有 Map 像接口。 你可以通过额外的 salt 参数以重置缓存,例如当您的插件配置改变时.

提示

元字符串

如果你需要解析 meta 参数,例如:

• https://github.com/Microflash/fenceparser (英语)
• https://github.com/frencojobs/fenceparser 互联网档案馆的存檔,存档日期2013-12-02

天体

如果您想要使用复韵插件 code astro 中的元素, 您需要禁用内置高亮显示器, 然后确保它会出现在您的回旋插件之后

import { rehypeShiki, markdownConfigDefaults } from "@astrojs/markdown-remark";

export default defineConfig({
  markdown: {
    syntaxHighlight: false,
    rehypePlugins: [
      // you rehype plugin goes here
      // re-enable default Astro code highlighter
      [rehypeShiki, markdownConfigDefaults.shikiConfig],
    ],
  },
});

星光

重要 使用 v. 22+ 数据

export default defineConfig({
  markdown: {
    rehypePlugins: [
      // you rehype plugin goes here
      // after you can insert code highlighter
    ],
  },
});

图像而非内置 SVG

我的主要用例是内置 SVG, 但如果您想要生成图像, 您可以使用 数据 URL像这样

{
  code: () =>
    `<img src="data:image/png;base64,${dataBuffer.toString("base64")}">`;
}

如果您想要转换 SVG 数据 URL 使用 mini-svg-data-uri 或类似.

我没有调查 如何将图像与 vfile 文档。 。 。 .

开始

• 测试同步函数和缓存