Overview

The marker pen feature extends Markdown's ==Mark== syntax, allowing text to be marked with various colors and customizable options.

Syntax

Basic Usage

Use == == to mark text. Note the spaces around the equals signs.

Input:

vuepress-theme-plume is a ==simple and beautiful== theme

Output:

vuepress-theme-plume is a simple and beautiful theme

Color Customization

Different marker pen colors are set using Markdown attribute syntax.

Add {.classname} immediately after the ==Mark== syntax to customize colors.

Input:

==a tip=={.tip} ==a warning=={.warning} ==an error=={.danger} ==important content=={.important}

Output:

a tip a warning an error important content

Built-in Color Schemes

The theme includes these predefined schemes:

• default: ==Default== - Default
• info: ==Info=={.info} - Info
• note: ==Note=={.note} - Note
• tip: ==Tip=={.tip} - Tip
• warning: ==Warning=={.warning} - Warning
• danger: ==Danger=={.danger} - Danger
• caution: ==Caution=={.caution} - Caution
• important: ==Important=={.important} - Important

Custom Color Schemes

Marker pen can be customized via custom styles.

You can fully customize highlighter colors, including modifying built-in schemes.

Within the theme, markers are set using the combination of class name and CSS variables.

The following are CSS variables related to markers:

• --vp-mark-text - Text color of marker pen
• --vp-mark-bg - Background color of marker pen
• --vp-mark-linear-color - gradient color, only used in the built-in --vp-mark-bg-image
• --vp-mark-bg-shift - Built in gradient background offset of marker pen
• --vp-mark-bg-image - Background image of marker pen

Modifying Built-in Schemes

Copy these built-in configurations to your style file for modification:

mark {
  --vp-mark-text: currentcolor;
  --vp-mark-bg: transparent;
  --vp-mark-bg-shift: 0.55lh;
  --vp-mark-linear-color: var(--vp-c-brand-3);
  --vp-mark-bg-image: linear-gradient(to right, var(--vp-mark-linear-color) 50%, transparent 50%);
  animation: var(--vp-mark-animation, mark-highlight 1.5s 0.5s forwards);
}

[data-mark-mode="lazy"] mark {
  --vp-mark-animation: none;
}

[data-mark-mode="lazy"] mark.vp-mark-visible {
  animation: mark-highlight 1.5s 0.2s forwards;
}

mark.note {
  --vp-mark-linear-color: #ff0;
}

mark.info {
  --vp-mark-linear-color: var(--vp-c-default-1);
}

mark.tip {
  --vp-mark-linear-color: #39ff14;
}

mark.warning {
  --vp-mark-linear-color: #fc0;
}

mark.caution, mark.danger {
  --vp-mark-linear-color: #f99;
}

mark.important {
  --vp-mark-linear-color: #ccf;
}

[data-theme="dark"] mark.note {
  --vp-mark-linear-color: #660;
}

[data-theme="dark"] mark.tip {
  --vp-mark-linear-color: #063;
}

[data-theme="dark"] mark.warning {
  --vp-mark-linear-color: #c60;
}

[data-theme="dark"] mark.caution,
[data-theme="dark"] mark.danger {
  --vp-mark-linear-color: #c66;
}

[data-theme="dark"] mark.important {
  --vp-mark-linear-color: #66c;
}

Adding New Schemes

Add new color schemes in your style file using this format:

mark.classname {
  --vp-mark-text: marktext;  /* Text color */
  --vp-mark-bg-image: none;  /* Background image */
  --vp-mark-bg: mark;        /* Background color */
  --vp-mark-linear-color: mark;  /* Gradient color */
}

Use ==Mark=={.classname} in Markdown.

You can name classname freely and add other CSS properties besides modifying CSS variables.

Animation Modes

By default, the highlight animation plays as soon as the page renders.

If you prefer to animate only when the marker enters the viewport, set markdown.mark to 'lazy' in your theme config:

.vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    markdown: {
      mark: 'lazy',
    },
  }),
})

Contributors

zhenghaoyang24pengzhanboHonahec

Changelog

10/12/25, 1:56 PM

View All Changelog

• 5c0d2-feat(plugin-md-power): add lazy animation mode for mark highlights (#718)on 10/12/25
• 4d236-feat(theme)!: add collections support (#704)on 10/7/25
• 9f99a-docs: add en markdown doc (#538)on 3/27/25