Custom alignment

Customize content alignment.

Config

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

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

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

export default {
  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 and escaping

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

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

  will be

  Center contents...

  Left contents...

  Center contents...

• Escaping can be done by adding \ to escape the marker:

  \::: left
  
  :::
  

  will be

  ::: left

  :::

Demo

Warning

vuepress-theme-hope v2 is still in W.I.P, the API may have

Significant changes.

If you meet a bug during usage, you can

open an issue.

:::: danger
vuepress-theme-hope v2 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).
:::
::::