跳至主要內容

自定义对齐

大约 1 分钟MarkdownMarkdown对齐

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

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

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

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

配置

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        align: true,
      },
    },
  }),
});







 
 
 



语法

::: left
左对齐的内容
:::

::: center
居中的内容
:::

::: right
右对齐的内容
:::

::: justify
两端对齐的内容
:::
嵌套和转义
  • 嵌套可以通过增加外层容器的 marker 数量完成:

    :::: center
    居中的内容...
    ::: left
    左对齐的内容...
    :::
    居中的内容...
    ::::
    

    会被渲染为

    居中的内容...

    左对齐的内容...

    居中的内容...

  • 转义可以通过在 marker 前添加 \ 转义来完成:

    \::: left
    
    :::
    

    会被渲染为

    ::: left

    :::

演示

W.I.P

vuepress-theme-hope v2 仍在制作中,API 可能会有

重大的变动。

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

:::: danger W.I.P
vuepress-theme-hope v2 仍在制作中,API 可能会有

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

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

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

::::