Custom alignment

Less than 1 minute

Customize content alignment.

Settings

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

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

Syntax

::: left
Contents to align left
:::

::: center
Contents to align center
:::

::: right
Contents to align right
:::

::: justify
Contents to align justify
:::

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...
::::

::: left

Escaping can be done by adding \ to escape the marker

:::

\::: left

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

:::

Demo

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

open an issue.

:::: 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).
:::
::::