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

第一种

安装:
cnpm i hyperdown -S
cnpm i prismjs -S

创建:
在根目录下创建两个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(/(?<=
]*?>)[\s\S]*?(?=<\/code><\/pre>)/gi, v => {
    v = v.replace(/_&/g, ' ').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>').replace(/&/g, '&');
    return Prism.highlight(v, Prism.languages.javascript);
  });
  return (
    ``
  );
}

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')}],
        }, );
    },
};
 
 
最后
在main.js引入主题就可以了
后面你不管用哪种引入方法都可以引入xxx.md
 
 
import 'prismjs/themes/prism-okaidia.css';
 
 
 
 
第二种
 
 
安装
 
 
cnpm i vue-router -S
cnpm i less less-loader
cnpm i vue-markdown-loader -S
cnpm i highlight.js -S
 
 
第一步：创建vue.config.js
 
 
module.exports = {
  publicPath:"./",
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}
 
 
 
 
第二步：router
 
 
const routes = 
[
  {
    path: '/',
    component: () => import('../markdown/1.md')
  }
]


 
 
第三步：封装
 
 
创建js文件height.js
 
 
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night-bright.css'; 

let Highlight = {};
Highlight.install = function (Vue) {
       Vue.directive('highlight', {
      
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
       
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};
 
export default xHight
 
 
 
 
第四步：main.js引入
 
 
import xHight from './utils/highlight'; 
Vue.use(xHight);
 
 
第五步：使用
 
 

     
 
 
注意：样式自己调节 默认自选择
 
 
/* Tomorrow Night Bright Theme */
    /* Original theme - https://github.com/chriskempson/tomorrow-theme */
    /* http://jmblog.github.com/color-themes-for-google-code-highlightjs */
    
    /* Tomorrow Comment */
    .hljs-comment,
    .hljs-quote {
        color: #969896;
    }
    
    /* Tomorrow Red */
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-regexp,
    .hljs-deletion {
        color: #15b8cf;
    }
    
    /* Tomorrow Orange */
    .hljs-number,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params,
    .hljs-meta,
    .hljs-link {
        color: #e78c45;
    
    }
    
    /* Tomorrow Yellow */
    .hljs-attribute {
        color: #e7c547;
    }
    
    /* Tomorrow Green */
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition {
        color: #7aa6da;
    }
    
    /* Tomorrow Blue */
    .hljs-title,
    .hljs-section {
        color: #7aa6da;
    }
    
    /* Tomorrow Purple */
    .hljs-keyword,
    .hljs-selector-tag {
        color: #f92672;
    }
    
    .hljs {
        display: block;
        overflow-x: auto;
        background: black;
        color: #eaeaea;
        padding: 2.5em;
        line-height: 1.5;
    }
    
    .hljs-emphasis {
        font-style: italic;
    }
    
    .hljs-strong {
        font-weight: bold;
    }
    
    thead {
        background: #a8a8a8;
    }
    
    td:nth-child(odd) {
        border-right: 1px solid #ccc;
    }
    
    table {
        width: 100%;
        text-align: center;
        border: 1px solid #ccc;
    }
    
    blockquote {
        background: #eaeaea;
        color: #546E7A;
        padding: 1px 17px;
        margin: 0;
        margin-bottom: 20px;
        border-left: 7px solid #03A9F4;
    }
    
    code {
        max-height: 300px !important;
        color: #e83e8c;
        display: block;
    }
 
 
第三步 不封装
 
 


 
 
加载慢的解决
 
 
我发现这个方法加载太慢了，需要5秒才可以。原因使用的周期是updated，解决方法就是先执行完基础样式后加载高亮。而且执行多次然后停止