2025-12-12

代码高亮分享

代码高亮的使用方法

标题

1
console.log("hello world");

代码标题

方式一：

1
console.log("Title attribute example");

方式二：

1
<div>File name comment example</div>

终端帧

1
Write-Output "This one has a title!"

部署代码高亮并适配暗夜模式

使用组件

Expressive Code

安装

1
npx astro add astro-expressive-code

配置

1
//代码高亮
2
import astroExpressiveCode from "astro-expressive-code";
3

4
  markdown: {
5
    // 关键：关掉 Astro 默认 Shiki 高亮，否则你看到的仍是 Shiki 输出
6
     syntaxHighlight: false,
7
  },
8
integrations: [
9
    //代码高亮，基于渲染顺序，需要在mdx前
10
    astroExpressiveCode(),
11
    mdx(),
12
    ...

配置文件

这里放置代码高亮相关的配置，文件创建到根目录下

1
//代码高亮相关配置
2
import { defineEcConfig } from "astro-expressive-code";
3
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
4

5
export default defineEcConfig({
6
  //主题
7
  themes: ["github-dark-default", "gruvbox-dark-hard"],
8
  useDarkModeMediaQuery: false, //禁用自动媒体查询切换
9
  themeCssRoot: "html", //指定主题CSS变量的作用域根元素
10
  //暗夜模式切换
11
  themeCssSelector: (theme) =>
12
    theme.type === "dark" ? ".dark" : ":not(.dark)",
13

14
  //展示行号
15
  plugins: [pluginLineNumbers()],
16
});

主题部分，可通过以下命令，找到所有可用主题

查看当前支持的主题

1
node -e "const { bundledThemes } = require('shiki'); console.log(Object.keys(bundledThemes))"
2
## 前50个
3
node -e "const { bundledThemes } = require('shiki'); console.log(Object.keys(bundledThemes).slice(0,50))"

# 代码高亮 # Astro

Using MDX

Lorem ipsum dolor sit amet

Astro 开发建议

用 Astro 搭个人博客（而且你经常写代码分享、要画流程图）挺合适的。下面是我建议你在架构选型、内容格式、代码展示、流程图、构建发布、SEO/性能这些点上提前踩稳的“注意事项清单”。