语法高亮
Astro 内置了对 Shiki 和 Prism 的支持。这为以下内容提供了语法高亮:
- 所有在 Markdown 或 MDX 文件中使用的 代码围栏 (```)。
.astro
文件中使用 内置的<Code />
组件(由 Shiki 提供支持)的内容。.astro
文件中使用<Prism />
组件(由 Prism 提供支持)的内容。
添加 社区集成,如 Expressive Code ,以便在代码块中获取更多的文本标记和注解选项。
Markdown 代码块
段落标题 Markdown 代码块Markdown 代码块由开头和结尾处的三个反引号 ``` 表示。你可以在开头的反引号后面指定正在使用的编程语言,以指示如何为代码添加颜色和样式,使其更易于阅读。
Astro 的 Markdown 代码块默认由 Shiki 进行样式设置,预配置了 github-dark
主题。编译后的输出将仅限于内联 style
,不包含任何额外的 CSS 类、样式表或客户端 JS。
你可以 添加 Prism 样式表并切换到 Prism 的高亮显示,或使用 markdown.syntaxHighlighting
配置选项完全禁用 Astro 的语法高亮。
markdown.shikiConfig
参考,了解使用 Shiki 时可用的 Markdown 语法高亮选项。
设置默认 Shiki 主题
段落标题 设置默认 Shiki 主题你可以在 Astro 配置中为 Markdown 代码块配置任何内置 Shiki 主题:
设置明暗模式主题
段落标题 设置明暗模式主题你可以在 Astro 配置中为明暗模式指定双重 Shiki 主题:
然后,通过媒体查询或类添加 Shiki 的黑暗模式 CSS 变量 来应用于所有默认的 Markdown 代码块。将示例中 Shiki 文档中的 .shiki
类替换为 .astro-code
:
添加你的自己的 Shiki 主题
段落标题 添加你的自己的 Shiki 主题你可以从本地文件导入自定义 Shiki 主题,而不是使用 Shiki 的预定义主题。
自定义 Shiki 主题
段落标题 自定义 Shiki 主题你可以跟随 Shiki 的主题文档 了解更多关于主题、明暗模式切换或通过 CSS 变量进行样式设置的自定义选项。
Astro 代码块使用 .astro-code
类进行样式设置,因此你需要将示例中的 .shiki
类替换为 .astro-code
。
代码块组件
段落标题 代码块组件有两个 Astro 组件可用于渲染代码块:<Code />
和 <Prism />
。
你可以使用 ComponentProps
类型工具函数来获取这些组件的 Props
类型。
<Code />
段落标题 <Code />该组件由 Shiki 提供支持。它支持所有流行的 Shiki 主题和语言,以及其他一些 Shiki 选项,如自定义主题、语言、转换器 和默认颜色。
这些值分别由 theme
、lang
、transformers
和 defaultColor
属性作为 props 传递给 <Code />
组件。<Code />
组件不会继承你的 Markdown 代码块的 shikiConfig
设置。
转换器
段落标题 转换器
添加于:
astro@4.11.0
Shiki 转换器 可以通过将其作为数组传递到 transformers
属性中,来选择性地应用于代码。从 Astro v4.14.0 开始,你还可以为 Shiki 的 meta
属性 提供一个字符串,以将选项传递给转换器。
注意,transformers
只能用于类,同时你必须提供自己的 CSS 规则来针对代码块的元素。
<Prism />
段落标题 <Prism />此组件通过应用 Prism 的 CSS 类为代码块提供特定语言的语法高亮。请注意,你必须提供 Prism CSS 样式表(或者提供自己的)来为这些类设置样式。
要安装 Prism
高亮器组件,需要先安装 @astrojs/prism
包:
然后,你可以像使用其他 Astro 组件一样导入和使用 <Prism />
组件,传递语言和要渲染的代码。
除了 Prism 支持的语言列表 外,你还可以使用 lang="astro"
来显示 Astro 代码块。
添加 Prism 样式表
段落标题 添加 Prism 样式表如果你选择使用 Prism(通过配置 markdown.syntaxHighlighting: 'prism'
或使用 <Prism />
组件),Astro 将会使用 Prism 的 CSS 类而不是 Shiki 的类来为你的代码添加样式。你需要提供自己的 CSS 样式表来实现语法高亮。
-
从可用的 Prism 主题 中选择一个预制样式表。
-
添加此样式表到 你的项目的
public/
文件夹。 -
在 布局组件 中通过
<link>
标签将其加载到页面的<head>
中。 (参见 Prism 基本用法。)
你还可以访问 Prism 支持的语言列表 了解选项和用法。
Learn