在Vue中markdown以及高亮的多种解决方案

markdown转H5

当前Vue2.6.11,3.0无效
以下是这里的版本

"hyperdown": "^2.4.7",
"prismjs": "^1.22.0",
"vue-happy-scroll": "^2.1.1"

---

第一步：安装

cnpm i hyperdown -S

cnpm i prismjs -S

---

第二步：创建两个.js文件

在根目录下创建两个js，第一个文件名称md-loader.js

const HyperDown = require('hyperdown');
const Prism = require('prismjs');

function markdownLoader(val) {
  let parser = new HyperDown();
  let html = parser.makeHtml(val);
  html = html.replace(/(?<=<pre><code[^>]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi, v => {
    v = v.replace(/_&/g, ' ').replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&amp;/g, '&');
    return Prism.highlight(v, Prism.languages.javascript);
  });
  return (
    `<template><div class="markdown">${html}</div></template>`
  );
}

module.exports = markdownLoader;

第二个文件名称：vue.config.js

module.exports = {
    publicPath:'./',
    configureWebpack: config => {
        config.module.rules.push({
            test: /\.md$/,
            use: [{ loader: 'vue-loader',},{ loader: require.resolve('./md-loader')}],
        }, );
    },
};

---

引入css主题

在main.js引入主题就可以了，如果找不到那就直接创建.CSS源码在这里
import 'prismjs/themes/prism-okaidia.css';

code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:0;text-shadow:0 1px rgba(0,0,0,0.3);font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#272822}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:#8292a2}.token.punctuation{color:#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}

---

测试是否成功

<template>
    <div id="app">
        <component is="md"></component>
    </div>
</template>

<script>
    export default {
        components: {
            'md': () => import("./components/1.md"),
        },
    }
</script>

---

测试

> 测试引入

**测试加粗**

`cnpm i ceshi -S`

[百度](http://www.baidu.com)
![logo-dark.png](http://laji.mxlogo.com/uni1.png)

- 床前明月光
- 地上鞋两双

1. 吃饭
2. 喝酒
3. 打豆豆


|  |  |
| ----- | ----- |
| More | XXXXX |