V2 Migration

Legacy Mode

You can pass the second argument true to enable legacy mode when calling mdEnhancePlugin, and the plugin will try to run with V1 behavior.

New Features

• Markdown link check

  The plugin now check your Markdown links and warn you when broken links are detected.

  You can control this behavior with checkLinks option

• image mark support

  Use #light and #dark suffix to mark images to display them in light mode or dark mode via imgMark option.

• v-pre support

  The following container support is removed from @vuepress/core, so vPre option is added

  ::: v-pre
  
  Some {{vue syntax}}.
  
  :::
  

• Chart.js support

  Adds chart.js support via chart option

  ::: chart Title
  
  ```json
  {
    // chart.js config
  }
  ```
  
  :::
  
  ::: chart Title
  
  ```js
  const config = {
    // chart.js config
  };
  ```
  
  :::
  

• ECharts support

  Adds ECharts support via echarts option

  ::: echarts Title
  
  ```json
  {
    // chart.js config
  }
  ```
  
  :::
  
  ::: echarts Title
  
  ```js
  const option = {
    // chart.js config
  };
  ```
  
  :::
  

• content include support

  Use <!-- @include: --> to include other file content in Markdown via include options.

  Use <!-- @include: filename --> to include a file.

  To partially import the file, you can specify the range of lines to be included:

  • <!-- @include: filename{start-end} -->
  • <!-- @include: filename{start-} -->
  • <!-- @include: filename{-end} -->

  Also, you can include file region:

  • <!-- @include: filename#region -->

• tabs support

  Use tabs container to create tabs via tabs option.

Changed

• renamed codegroup to codetabs

• Now all options are disabled by default

• Code demo syntax changed

  Before:

  ::: demo Title
  
  <!-- demo content -->
  
  :::
  
  ::: demo [vue] Title
  
  <!-- demo content -->
  
  :::
  
  ::: demo [react] Title
  
  <!-- demo content -->
  
  :::
  

  After:

  ::: normal-demo Title
  
  <!-- demo content -->
  
  :::
  
  ::: vue-demo Title
  
  <!-- demo content -->
  
  :::
  
  ::: react-demo Title
  
  <!-- demo content -->
  
  :::
  

• Code Group changed to code tab

  Before:

  :::: code-group
  
  ::: code-group-item pnpm
  
  ```bash
  pnpm create vuepress-theme-hope [dir]
  ```
  
  :::
  
  ::: code-group-item npm:active
  
  ```bash
  npm init vuepress-theme-hope [dir]
  ```
  
  :::
  
  ::::
  

  After:

  ::: code-tabs
  
  @tab pnpm
  
  ```bash
  pnpm create vuepress-theme-hope [dir]
  ```
  
  @tab:active npm
  
  ```bash
  npm init vuepress-theme-hope [dir]
  ```
  
  :::
  

Removed Options

• enableAll removed

  There are too many noob users who don't know what they are doing, and they just enable this option without using all the feature provided, yet they complain about load speed.

• lineNumbers removed

  VuePress 2 supports line number config per code block now.

• imageFix removed

  Mr.Hope already made a PR to fix broken image links in Markdown, so it's no longer needed