Astro 搭建博客系列：高亮 markdwon 代码块扩展语法

最新推荐文章于 2025-05-30 09:06:46 发布

yq612

最新推荐文章于 2025-05-30 09:06:46 发布

阅读量609

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Astro 文章标签：前端 astro 博客 reactjs html5

本文链接：https://blog.csdn.net/qq_20794095/article/details/132229172

Astro 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在官方demo不支持的高亮功能下，通过astro-expressive-code插件在Astro项目中实现代码块的自定义样式，包括安装依赖、创建并使用CSS变量以及修改astro配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官方提供的 demo 版本默认不支持高亮 md 代码块扩展语法，比如设置标题，高亮删减行、特定行、特定代码段等。

我们需要通过 astro 提供的 astro-expressive-code 插件来配置我们的主题。

修改配置

步骤 1，安装依赖

yarn add astro-expressive-code

步骤 2，新建 src/utils/expressive-code.ts。
这里是用到了两个 css 变量：--theme-code-bg 和 --theme-code-tabs。

import { astroExpressiveCode } from "astro-expressive-code";

export const astroDocsExpressiveCode = () =>
  astroExpressiveCode({
    theme: "one-dark-pro",
    styleOverrides: {
      codeBackground: "var(--theme-code-bg)",
      scrollbarThumbColor: "hsl(269deg 20% 90% / 0.25)",
      scrollbarThumbHoverColor: "hsl(269deg 20% 90% / 0.5)",
    },
    frames: {
      styleOverrides: {
        editorTabBarBackground: "var(--theme-code-tabs)",
        editorActiveTabBackground: "hsl(24.77deg 40% 65% / 15%)",
        editorActiveTabBorderBottom: "hsl(25.36deg 95.22% 49.22%)",
        editorTabBarBorderBottom: "var(--theme-code-tabs)",
        terminalTitlebarBackground: "var(--theme-code-tabs)",
        terminalTitlebarBorderBottom: "transparent",
        terminalBackground: "var(--theme-code-bg)",
      },
    },
    textMarkers: {
      styleOverrides: { defaultChroma: "55" },
    },
  });

步骤 3，进入 src/styles/base.css，添加 css 变量

@layer base {
  :root,
  html[data-theme="light"] {
    --theme-code-tabs: #22272f;
    --theme-code-bg: #282c34;
  }
  html[data-theme="dark"] {
    --theme-code-tabs: #22272f;
    --theme-code-bg: #282c34;
  }
}

步骤 4，修改 astro 配置

import { astroDocsExpressiveCode } from "./src/utils/expressive-code";

export default defineConfig({
  integrations: [
    astroDocsExpressiveCode(), //添加
    react(),
    sitemap(),
    // ... others
  ],
  markdown: {
//    shikiConfig: {
//      theme: "one-dark-pro",
//      wrap: true,
//    },
    extendDefaultPlugins: true,
  },
});