VuePress Markdown 段落对齐容器配置

通过对 vuepress-plugin-container 进行额外的配置注入，你可以使用

::: center 要居中的段落
:::

::: right 要居右的段落
:::

来对你的段落对齐进行自定义。

Markdown 在设计上是刻意不管排版的，它只描述内容的结构，样式交给渲染层决定。所以正文段落一律左对齐，没有任何标记能改这件事。表格的列对齐算是唯一的例外，靠分隔行里的冒号位置控制，但那个语法只作用于表格单元格，管不到普通段落。

实际写作时还是会遇到需要居中或居右的场合：图片下面那行说明文字、引用出处、文末的署名和日期、一小段需要突出的标语。真要实现，只能在 Markdown 里插一段带内联样式的 div，写成 <div style="text-align: center">。这么做的毛病有两个：一是源文件里混入 HTML 标签，段落一多就很难读；二是 HTML 块级标签内部的内容，Markdown 解析器默认是不会继续处理的，也就是说包在里面的链接、加粗这些语法会失效，得改回 HTML 写法，越写越乱。

这个插件的做法是复用容器语法。::: 名称 这套写法本来是 vuepress-plugin-container 用来做提示框的，插件在它基础上注册了 center 和 right 两个容器类型，编译时转成带对齐样式的包裹元素。好处是容器内部依然按 Markdown 解析，链接、强调、行内代码都照常生效，源文件也保持了 Markdown 的观感。

配置

一个 align 开关就够了，center 和 right 两种容器一起注册进去，不用分别配置。左对齐是默认行为，所以没有对应的容器名。

// .vuepress/config.ts
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用自定义对齐
      align: true,
    }),
  ],
};

// .vuepress/config.js
import { mdEnhancePlugin } from 'vuepress-plugin-md-enhance';

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用自定义对齐
      align: true,
    }),
  ],
};

演示

内容写在容器名后面同一行，或者换行写在容器内部，两种都可以，前面开头那段示例用的是同一行的写法。

下面这个例子特意做得复杂一点，展示对齐容器嵌在别的容器里面的情况。外层是一个 danger 提示框，里面又套了 center 和 right 两个对齐容器。注意外层用的是四个冒号 ::::，内层用三个 :::。这是容器语法的嵌套规则：外层的冒号数量必须多于内层，解析器靠这个来配对开闭标记。要是内外都写三个，第一个 ::: 闭合标记会被当成外层容器的结束，后面的内容就跑到容器外面去了，结构直接错乱。

再往里嵌一层的话，最外层就得用五个冒号，依此类推。

:::: danger W.I.P VuePress Theme Hope V2 版本仍在制作中，API 可能会有

::: center 重大的变动。
:::

如果你在使用过程中遇到了 bug，可以

::: right
[提一个 issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues)。
:::

::::

对照上面的渲染结果可以看到，居右那段里的链接是正常工作的，这就是前面说的容器方案相比直接写 div 的实际收益。另外容器和它前后的普通段落之间要留空行，紧贴着写有可能被解析成同一个段落的一部分。