vue 匯入.md檔案(markdown轉HTML)

FannieGirl發表於2020-12-30

前言

  剛接到這個需求的時候,覺得很簡單(的確很簡單)但是這玩意的坑真的也讓人無奈。

  網上找了很多的資料,都沒有寫出痛點(這就很難過了)。通過實踐並且在我們專案中平穩執行,想分享給後面的人

  我的部落格上也寫了100多篇文章,點選量有上萬的也有個位數的,能夠幫助到他人這就是寫作記錄的動力。

需求

  vue專案中可以良好展示markdown(只是展示功能 沒有編輯功能)

痛點問題

  1. .md檔案型別,直接模組載入(只有字串,這得多難受,怎麼維護呢),還是一個檔案一個檔案的好維護並且好修改複用
  2. 用第三方外掛,只是md轉HTML,不帶樣式的(重點強調 沒有樣式沒有樣式)

解決方案

一、vue需要有markdown這樣良好的展示效果,什麼樣的外掛是最好的?

  貨比三家,我推薦以下方式

//安裝
npm install --save html-loader; npm install -- save markdown-loader;

//webpack

 {
   test: /\.md$/,
   loader: "html-loader",
 },
 {
   test: /\.md$/,
   loader: "markdown-loader"
 }

  大坑預警:我不知道在哪裡抄的配置,一定不要配置option(配置了的話表格 程式碼 都不能好好轉化)

  以上真的就完成了轉化了。是不是so easy !!! 再來換個皮膚(穿上衣服)

 

二、一定要引用CSS,找了很多樣式真的都特別的醜(當然可以自己寫,但是費時間啊)

  強烈推薦

npm install github-markdown-css
import 'github-markdown-css'; //哪裡用markdown 就在哪裡引用 可以放在min.js

//自己也可以再調整調整 (貢獻一版 我們調整的一版樣式)
.markdown-body {
padding: 20px;
min-width: 200px;
max-width: 900px;
font-size: 12px;
h2 {
font-size: 18px;
margin: 1em 0 15px;
padding-top: 0.8em;
padding-bottom: 0.8em;
}
h3 {
font-size: 14px;
margin: 22px 0 16px;
}
h4 {
font-size: 13px;
margin: 20px 0 16px;
}
h5 {
font-size: 12px;
margin: 16px 0 16px;
font-weight: 700;
}
p {
font-size: 12px;
line-height: 24px;
color: #666666;
margin-top: 0px;
margin: 8px 0;
margin: 14px 0 14px;
}
pre {
background-color: #eee;
margin-bottom: 8px;
margin-top: 8px;
margin: 12px 0 12px;
}
blockquote {
margin-bottom: 8px;
margin-top: 8px;
margin: 14px 0 14px;
background-color: #eee;
padding: 16px 16px;
}
tr {
background-color: #f5f5f5;
}
code {
background-color: #eee;
}
ul,
ol,
li {
list-style: unset;
font-size: 12px;
line-height: 20px;
color: #666666;
margin-top: 0px;
margin: 8px 0;
}
blockquote {
border-color: #48b6e2;
}
table {
display: table;
width: 100%;
max-width: 100%;
margin-bottom: 20px;
}
}


 

三、頁面運用(實踐檢驗真理)

頁面
<template>
    <div class="markdown-body" v-html="htmlMD"></div> //markdown-body 一定要寫這個class名
</template>

<script>
export default {
    name: 'GitBook',
    data() {
        return {
            htmlMD: ''
        };
    },
    mounted() {
        this.getHtmlMD(this.$route.query.databaseType);
    },
    methods: {
        getHtmlMD(type) {
            this.htmlMD = require(`./GitBook/${type.toLowerCase()}.md`); //匯入md 我這裡根據不同的型別拿不同md檔案
        }
    }
};
</script>

 

四、最終效果 (表格,程式碼(縮排完全沒有問題)我懶的去寫一個例項了)打碼勿怪

  

 

 

 

Fannie總結

  經過兩個月的測試,這樣一套下來基本需求都滿足。

  如果有編輯需求:推薦mavonEditor

相關文章