# 讀取MD文件
1. 加載依賴
> markdown-loader
> html-loader
> marked
*注意事項:*
~~~json
{
// ...
// html-loader 版本過高 會報錯：this.getOptions is not a function
"html-loader": "^1.0.0",
"markdown-loader": "^6.0.0"
// ...
}
~~~
【說明:】`markdown-loader`、`html-loader`是為了讓`vue`能夠解析`md`格式的文件，讀取出來，然后使用`marked`將讀取出來的數據轉換成`html`格式渲染到頁面上。使用`marked`是為了使用更方便。
2. 配置webpack
* vue2.x `webpack.base.conf.js`
~~~js
module: {
rules: [
...
// 配置讀取 *.md 文件的規則
{
test: /\.md$/,
use: [
{ loader: 'html-loader' },
{ loader: 'markdown-loader', options: {} }
]
},
...
]
}
~~~
* vue3.x `vue.config.js`
~~~js
const path = require("path");
module.exports = {
configureWebpack: {
module: {
rules: [
...
// 配置讀取 *.md 文件的規則
{
test: /\.md$/,
use: [
{ loader: "html-loader" },
{ loader: "markdown-loader", options: {} }
]
},
...
]
}
}
};
~~~
3. vue中使用
~~~html
<template>
<div>
<div>文檔</div>
<div v-html="html"></div>
</div>
</template>
<script>
import MDtest from "./test.md"
export default {
data() {
return {
html: MDtest
};
}
}
};
</script>
~~~
4. 樣式依賴 `github-markdown-css`
5. 引入 `import 'github-markdown-css';`
6. 綁定樣式class `<div v-html="html" class="markdown-body"></div>`
# MD在線編輯
1. 依賴加載
> showdown
2. 代碼測試
~~~html
<template>
<div class="edit">
<div class="edit-box">
<textarea v-model="text"></textarea>
</div>
<div class="show-box">
<div v-html="show_html" class="markdown-body"></div>
</div>
</div>
</template>
<script>
import showdown from "showdown";
const converter = new showdown.Converter();
export default {
data() {
return {
text: "# hello!"
};
},
computed: {
show_html() {
return converter.makeHtml(this.text);
}
}
};
</script>
<style scoped>
.edit {
display: flex;
height: 600px;
width: 100%;
}
.edit-box,
.show-box {
flex: 1;
height: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
}
.edit-box {
margin-right: 20px;
}
textarea {
width: 100%;
height: 100%;
overflow: auto;
resize: none;
border: none;
padding: 5px;
box-sizing: border-box;
}
textarea:focus {
outline: none;
}
.show-box {
width: 100%;
height: 100%;
padding: 5px;
overflow: auto;
box-sizing: border-box;
}
~~~
