时间戳

首页 > 技术文章 > vue中如何使用md文件。highlight.js高光处理

vue中如何使用md文件。highlight.js高光处理

taozhibin 2020-06-08 19:09 原文

首先单纯页面若全部为md文件：如下~

  1.

npm install markdown-loader  html-loader --save-dev

npm install  showdown --save-dev

 2.build/webpack.base.conf.js添加

 { 
      test: /\.md$/, 
      use: [ 
        { loader: 'html-loader' }, 
        { loader: 'markdown-loader', options: {} } 
      ] 
 }

3.main.js

import showdown from 'showdown'// 引入md文件


Vue.prototype.md2html = (md) => {
  let converter = new showdown.Converter();
  let text = md.toString();
  let html = converter.makeHtml(text);
  return html
};

4.在相应的组件

   <div v-html="readme"></div>
   

  import readme from '../../XXXXXX.md'


   data () {
      return {
        readme:this.md2html( readme )
      }
    }

 

-----------------------------------------------------------------------------------

md：生成目录

 npm install -g i5ting_toc   //mac下分盘了是这个

npm install -g i5ting_toc    //win All 或者max下直接是home目录是这个命令

  之后进入当前MD的目录下

i5ting_toc -f xxxxx.md -o    //进入目录使用这个命令后 若成功自动打开页面

 

 -------------------------------------------------------------------------------------------------------------------------//

 有一种简单的加载md方法，且为高光 （推荐）

 最开始配置不改变-

1.首先安装highlight.js

       npm install highlight.js --save-dev

 

2.随后创建highlight.js 的配置文件

// src/utils/highlight.js 文件路径，纯属自定义

// highlight.js  代码高亮指令
import Hljs from 'highlight.js';
import 'highlight.js/styles/tomorrow-night.css'; // 代码高亮风格，选择更多风格需导入 node_modules/hightlight.js/styles/ 目录下其它css文件

let Highlight = {};
// 自定义插件
Highlight.install = function (Vue) {
    // 自定义指令 v-highlight
    Vue.directive('highlight', {
        // 被绑定元素插入父节点时调用
        inserted: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        },
        // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
        componentUpdated: function(el) {
            let blocks = el.querySelectorAll('pre code');
            for (let i = 0; i < blocks.length; i++) {
                Hljs.highlightBlock(blocks[i]);
            }
        }
    })
};

export default Highlight;

 

3.全局引入自定义插件

// highlight.js代码高亮插件

import Highlight from './utils/highlight'; // from 路径是highlight.js的路径，纯属自定义
Vue.use(Highlight);

 

4. 在需要的组件内写入

<template>

  <div id="codeView" v-highlight>
    <code v-html="md"></code>
 </div>
</template>
 
<script>
import demo from "./md/test.md";
console.log(demo)
 
export default {
  data() {
    return {
      md:demo
    };
  }
};
</script>

 

 

 

注：本文参考以下作者：https://blog.csdn.net/qq_42848534/article/details/90047843    ，

                                       https://blog.csdn.net/qq_41485414/article/details/103765196    ，

                                      https://www.jianshu.com/p/e35f6d62b3bd

 

推荐阅读