从VuePress迁移至Astro后代码块行高亮失效，如何开启？

问题描述 #

我正从VuePress迁移至Astro。在VuePress中，我可以使用如下语法实现代码行高亮：

public override int GetHashCode()
{
    return prop1.GetHashCode() ^ prop2.GetHashCode()
}

上述代码的第一行会在生成的HTML中被高亮。但在Astro中，我无法实现该效果，请问如何开启代码块行高亮功能？另外，我在Astro官方文档中看到了更多代码块的实用特性，包括差异对比、特定文本高亮，但目前我仅需解决行高亮问题。

解决方案 #

Astro支持代码行高亮，只需注意语法细节和配置即可，具体步骤如下：

1. 确认行高亮语法格式 #

Astro中代码行高亮的语法和VuePress类似，但要保证语言标识与行号参数之间无空格，示例如下：

public override int GetHashCode()
{
    return prop1.GetHashCode() ^ prop2.GetHashCode()
}

如果之前写法未生效，先检查是否存在多余空格或格式错误。

2. 确保Markdown配置启用代码高亮 #

Astro默认用Shiki作为代码高亮引擎，也支持切换为Prism，两种方案的配置如下：

方案一：使用默认Shiki引擎

打开astro.config.mjs，确认markdown配置未禁用Shiki，默认配置已启用行高亮，如需自定义主题可参考：

import { defineConfig } from 'astro/config';

export default defineConfig({
  markdown: {
    shikiConfig: {
      theme: 'github-dark', // 可替换为你需要的主题
      // 行高亮默认启用，无需额外配置
    },
  },
});

方案二：切换为Prism引擎

若偏好Prism，需先确保安装对应插件，再修改配置：

import { defineConfig } from 'astro/config';
import remarkPrism from '@astrojs/markdown-remark/prism';

export default defineConfig({
  markdown: {
    syntaxHighlight: 'prism',
    remarkPlugins: [remarkPrism],
  },
});

Prism同样支持{行号}语法实现指定行高亮。

3. 验证并排查问题 #

修改配置后重启Astro开发服务器，检查代码块是否正常高亮。若仍未生效，可排查以下情况：

• 是否有自定义CSS覆盖了高亮样式
• 尝试更换Shiki/Prism主题测试
• 确认代码块的语言标识正确（如csharp拼写无误）

内容的提问来源于stack exchange，提问作者mnj