Markdown 扩展

信息

与 Hexo 不同，Valaxy 在框架层面实现了一些 Markdown 扩展（如 Container、数学公式）等，而无需主题开发者再次实现。

这与 VitePress 许多功能类似，Valaxy 从 VitePress 中借鉴了许多，并复用了 mdit-vue 的插件。但也存在一些不同之处，Valaxy 默认使用 KaTeX（渲染速度快），同时也支持 MathJax（对齐 VitePress，SVG 输出无需外部 CSS/字体）。

注意：features.katex 与 math 请勿同时开启，两者使用不同的渲染引擎，同时启用可能导致公式重复渲染或样式冲突。启用 math（MathJax）时，features.katex 会被自动忽略。

valaxy.config.ts

ts[object Promise]

当然，你仍然可以在 Valaxy 中通过添加 MarkdownIt 插件来实现更多功能。

在 Markdown 中使用 Vue

可以直接在 Markdown 文件中导入和使用 Vue 组件。

例如在 components 目录下创建一个 Vue 组件 CustomVueDemo.vue：

components/CustomVueDemo.vue

vue[object Promise]

pages/posts/xxx.md

md[object Promise]

Emoji 表情支持 🎉

输入

md[object Promise]

输出

🎉 💯

这是一个我们所支持的 Emoji 列表。

代码行高亮

md[object Promise]

输出

js[object Promise]

输入

md[object Promise]

输出

ts[object Promise]

代码块的增减色块标识

在一行上添加 // [!code --] 或者 // [!code ++] 注释将创建该行代码的增减标识，同时保持代码块的颜色。

输入

请注意，在 !code后面只需要一个空格，这里有两个空格以防被渲染。

md[object Promise]

输出

js[object Promise]

代码块中的错误和警告

在一行代码后中添加 // [!code warning] 或者 // [!code error] 注释将会使改行代码呈现指定颜色块。

输入

请注意，在 !code后面只需要一个空格，这里有两个空格以防被渲染。

md[object Promise]

输出

js[object Promise]

导入代码片段

您可以通过以下语法从现有文件中导入代码片段：

md[object Promise]

它还支持行高亮:

md[object Promise]

输入

md[object Promise]

代码文件

snippet.js

js[object Promise]

输出

snippet.js

js[object Promise]

提示

@ 的值与源根相对应。默认情况下是博客根目录，除非配置了 srcDir 。另外，你也可以从相对路径导入：

md[object Promise]

您也可以使用 VS Code region 只包含代码文件的相应部分。您可以在文件路径后的 # 后提供自定义区域名称：

输入

md[object Promise]

代码文件

snippet-with-region.js

js[object Promise]

输出

snippet-with-region.js

js[object Promise]

您也可以像这样在大括号（{}）内指定语言：

md[object Promise]

代码分组

您可以像这样对多个代码块进行分组：

输入

md[object Promise]

输出

config.jsconfig.ts

js[object Promise]

ts[object Promise]

你也可以在代码组中导入代码片段。

输入

md[object Promise]

输出

snippet.jssnippet with region

js[object Promise]

ts[object Promise]

容器

通过对 markdownIt 进行配置，你可以自由设置自定义块区域的文字以及图标及图标的颜色。

提示

tip

注意

warning

警告

danger

信息

info

md[object Promise]

Click to expand

Details Content

md[object Promise]

你也可以自定义新的容器名称。

md[object Promise]

valaxy.config.ts

ts[object Promise]

添加代码块标题与图标

它基于 vitepress-plugin-group-icons 实现，内置了一些常用图标，你可以如下自定义更多图标。

valaxy.config.ts

ts[object Promise]

此时，使用以下语法：

md[object Promise]

我们将会得到带有 valaxy.config.ts 标题与 Valaxy 图标的代码块：

valaxy.config.ts

ts[object Promise]

还会得到带有 sample.dockerfile 标题与 Docker 图标的代码块：

sample.dockerfile

dockerfile[object Promise]

数学公式

提示

有关更多数学公式的信息可以在此处找到。

输入

md[object Promise]

输出

当 $a \neq 0$ 时， $(a x^{2} + b x + c = 0)$ 有两个解，他们是

x = \frac{- b \pm \sqrt{b^{2} - 4 a c}}{2 a}

麦克斯韦方程：

equation	description
$\nabla \cdot \vec{B} = 0$	divergence of $\vec{B}$ is zero
$\nabla \times \vec{E} + \frac{1}{c} \frac{\partial \vec{B}}{\partial t} = \vec{0}$	curl of $\vec{E}$ is proportional to the rate of change of $\vec{B}$
$\nabla \times \vec{B} - \frac{1}{c} \frac{\partial \vec{E}}{\partial t} = \frac{4 π}{c} \vec{j} \nabla \cdot \vec{E} = 4 π ρ$	wha?

自定义 KaTeX 选项

KaTeX选项

valaxy.config.ts

ts[object Promise]

包含 MarkDown 文件

提示

You can also prefix the markdown path with @, it will act as the source root. By default, it’s the Valaxy project root.

输入

your-file.md

md[object Promise]

部分文件

parts/basics.mdTEST.md

md[object Promise]

等效代码

md[object Promise]

它还支持选择行范围：

输入

md[object Promise]

部分文件

parts/basics.mdTEST.md

md[object Promise]

等效代码

md[object Promise]

所选行范围的格式可以是： {3,}, {,10}, {1,10}

注意

请注意，如果文件不存在，该功能不会出错。因此，在使用此功能时，请确保内容已按预期渲染。

UnoCSS

我们集成了 UnoCSS，因此您可以在 Markdown 文件中直接使用它。

自由控制你的布局！

更多配置见 UnoCSS Options | 配置。

pages/posts/your-post.md

html[object Promise]

Mermaid

Based on mermaid, you can use it in your markdown file directly.

txt[object Promise]

More examples see: Mermaid

脚注

你可以使用 [^1] 或 [^footnote] 来添加脚注，例如：

md[object Promise]

这是一个脚注

。

这是一段脚注

。

正确缩进的脚注段落会被自动附加。

使用 ^[content] 可以创建方便的内联脚注

。

脚注预览

借助 Floating Vue, 添加的脚注链接在鼠标悬停时会显示脚注内容。你可以在本页面的脚注链接上试一试！

如果你想要自定义脚注的样式，可以参考 Floating Vue 文档中的 config 设置 site.config.ts 中的 floatingVue，你也可以修改组件 ValaxyFootnoteTooltip 来达到这一点。

自定义

自定义 Markdown 容器 Class

你可以在 Markdown 文件的 frontmatter 中添加 markdownClass 来自定义 Markdown 容器的 Class。

md[object Promise]

这是一个脚注。 ↩︎
这是一段脚注。 ↩︎
比如这个！ ↩︎

To Be Continued.

Markdown 扩展

在 Markdown 中使用 Vue ​

Emoji 表情支持 🎉 ​

目录 ​

代码行高亮 ​

代码块的增减色块标识 ​

代码块中的错误和警告 ​

导入代码片段 ​

代码分组 ​

容器 ​

添加代码块标题与图标 ​

数学公式 ​

自定义 KaTeX 选项 ​

包含 MarkDown 文件​

UnoCSS ​

Mermaid ​

脚注 ​

脚注预览 ​

自定义 ​

自定义 Markdown 容器 Class ​

贡献者

在 Markdown 中使用 Vue

Emoji 表情支持 🎉

目录

代码行高亮

代码块的增减色块标识

代码块中的错误和警告

导入代码片段

代码分组

容器

添加代码块标题与图标

数学公式

自定义 KaTeX 选项

包含 MarkDown 文件

UnoCSS

Mermaid

脚注

脚注预览

自定义

自定义 Markdown 容器 Class