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%);
}

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.

Contributors

zhenghaoyang24pengzhanbo

Changelog

3/27/25, 1:06 PM

View All Changelog

• 9f99a-docs: add en markdown doc (#538)on 3/27/25