Skip to main content

Custom alignment

Less than 1 minuteMarkdownAlignMarkdown

Customize content alignment.

Settings

TS
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

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







 
 
 


Syntax

::: left
Contents to align left
:::

::: center
Contents to align center
:::

::: right
Contents to align right
:::

::: justify
Contents to align justify
:::
Nesting

Nesting can be done by increasing marker number of outer container:

Center contents...

Left contents...

Center contents...

Nesting can be done by increasing marker number of outer container:

:::: center
Center contents...
::: left
Left contents...
:::
Center contents...
::::
Escaping

::: left

Escaping can be done by adding \ to escape the marker

:::

\::: left

Escaping can be done by adding `\` to escape the marker

:::

Demo

Real life example

Caution

VuePress Theme Hope V2 version is still in W.I.P, the API may have

Significant changes.

If you meet a bug during usage, you can

:::: caution
VuePress Theme Hope V2 version is still in W.I.P, the API may have

::: center
Significant changes.
:::

If you meet a bug during usage, you can

::: right
[open an issue](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues).
:::
::::