Custom alignment

Customize content alignment.

Settings

.vuepress/theme.ts

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

export default 
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

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

:::

Escaping

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

Real life example

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