介绍
vue-markdown-highlight 是一个基于 Vue.js 和 markdown-it 的轻量级 MarkDown 语法高亮渲染器。该包可解析 MarkDown 文本并自动添加语法高亮效果，使页面更美观易读。
安装
可以通过 NPM 依赖管理器进行安装：
npm install vue-markdown-highlight --save
使用
- 将包导入模块中:
import Vue from 'vue'; import vueMarkdownHighlight from 'vue-markdown-highlight'; Vue.use(vueMarkdownHighlight);
- 使用
vue-markdown-highlight组件：
-- -------------------- ---- -------
----------
----------------------- ------------------------------------------
----------
--------
------ ------- -
------ -
------ -
------- --- ----- -------
-
-
--
---------配置
该包支持的语言类型：
- JavaScript (js)
- HTML (html)
- CSS (css)
- Shell (sh)
- JSON (json)
- CSV (csv)
- C++ (cpp)
- C# (csharp)
- Java (java)
- PHP (php)
- Python (python)
- Ruby (ruby)
- Go (go)
你需要将指定类型的语言代码以及语言代码类型信息放在三个反引号（ ` ）之后嵌套在代码块中。
```js
console.log('Hello World!');
```示例代码
-- -------------------- ---- -------
----------
-----
----------------------- ------------------------------------------
------
----------
--------
------ --- ---- ------
------ -------------------- ---- -------------------------
------------------------------
------ ------- -
------ -
------ -
------- -- -- ---- ----
-- ------ ------- ----- ------------------- - ------ -- --- ---------
-- -------- -- ----
------ ---- -----
--------
------------------ ---------
------
-- - ----
- ---- -
- ---- -
- ---- --
-
-
--
---------结语
vue-markdown-highlight 是一个非常方便的 MarkDown 渲染器，不仅可以让页面内容更加深入易读，同时也可以提高开发效率。希望这篇教程能够带给大家一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056be881e8991b448e5a08