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

首先單純頁面若全部為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