v-md-editor

# vuepress 主题

# 介绍

markdown 解析使用 markdown-it (opens new window) 来实现，代码块解析使用 prism (opens new window) 来实现。

效果如下：

# 内置功能

vuepress 主题内置扩展了 tip 功能。同时你也可以在 left-toolbar 属性中配置 tip 来快捷插入。

效果如下：

示例代码：

<template>
  <v-md-editor v-model="text" left-toolbar="undo redo | tip" height="500px" />
</template>

<script>
  const text = `::: tip
  你可以点击 toolbar 中的 tip 来快速插入
:::

::: warning
  这是一段警告
:::

::: danger
  这是一个危险警告
:::

::: details
  这是一个详情块，在 IE / Edge 中不生效
:::

::: tip 自定义标题
  你也可以自定义块中的标题
:::

::: danger STOP
  危险区域，禁止通行
:::
`;

  export default {
    data() {
      return {
        text,
      };
    },
  };
</script>

# 扩展 markdown-it

import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';

import Prism from 'prismjs';

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
  extend(md) {
    // md为 markdown-it 实例，可以在此处进行修改配置,并使用 plugin 进行语法扩展
    // md.set(option).use(plugin);
  },
});

# 扩展代码高亮语言包

请通过babel-plugin-prismjs (opens new window)插件按需引入对应的语言包。

安装 babel-plugin-prismjs 插件

# yarn
yarn add babel-plugin-prismjs --dev

# npm
npm install babel-plugin-prismjs

按需引入语言包（推荐）

// babel.config.js
module.exports = {
  plugins: [
    [
      'prismjs',
      {
        languages: ['json'],
      },
    ],
  ],
};

引入所有语言包（不推荐）

// babel.config.js
const components = require('prismjs/components');
const allLanguages = Object.keys(components.languages).filter((item) => item !== 'meta');

module.exports = {
  plugins: [
    [
      'prismjs',
      {
        languages: allLanguages,
      },
    ],
  ],
};

# vite 中扩展代码高亮语言包

请通过vite-plugin-prismjs (opens new window)插件按需引入对应的语言包。

安装 vite-plugin-prismjs 插件

# yarn
yarn add vite-plugin-prismjs --dev

# npm
npm install vite-plugin-prismjs

按需引入语言包（推荐）

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjs({
      languages: ['json'],
    }),
  ],
});

引入所有语言包（不推荐）

// vite.config.js
import { defineConfig } from 'vite';
import prismjs from 'vite-plugin-prismjs';

export default defineConfig({
  plugins: [
    prismjs({
      languages: 'all',
    }),
  ],
});

查看 prism 支持的语言包 (opens new window)

扩展后就能支持对应的代码块高亮了，如下

← API →