astro 式式变压器未应用于 mdx 内容

Question

我正在尝试将

shikiji-transformers

添加到我的 astro 项目中。无论我尝试做什么，我都无法让示例工作。

export function foo() {
  console.log('Highlighted') // [!code highlight]
}

我必须遵循以下依赖关系：

"dependencies": {
    "@astrojs/mdx": "^2.1.1",
    "astro": "^4.4.0",
    "astro-compress": "^2.2.10",
    "shikiji-transformers": "^0.10.2",
  }

以及以下配置：

import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import * as transformers from 'shikiji-transformers';

const isProduction = process.env.NODE_ENV === 'production';

// https://astro.build/config
export default defineConfig({
  site: "https://www.sanderboer.nl/",
  prefetch: true,
  markdown: {
    syntaxHighlight: "shiki",
    shikiConfig: {
      // https://docs.astro.build/en/guides/markdown-content/#shiki-configuration
      // https://shikiji.netlify.app/packages/transformers
      transformers: Object.values(transformers)
    },
  },
  integrations: [
    mdx(),
  ],
});

我使用了 astro 文档中描述的配置，但没有运气。 在渲染输出中我得到

Answer 1

import { defineConfig } from "astro/config";
import { transformerNotationHighlight } from 'shikiji-transformers';

export default defineConfig({
  markdown: {
    syntaxHighlight: "shiki",
    shikiConfig: {
      // https://docs.astro.build/en/guides/markdown-content/#shiki-configuration
      // https://shikiji.netlify.app/packages/transformers
      transformers: [
        transformerNotationHighlight()
      ],
    },
  },
});

Answer 2

Shiki 包似乎没有在必要时将类分配给代码片段的

pre

和

span

标签（Shiki 旨在添加一个您可以设置样式的类，例如突出显示一行代码，或显示删除代码并添加代码。）我最终发现了一个更好的软件包，更容易使用。名字是

表达代码

。