vue-cli项目中——md文件转html

2018-08-03  本文已影响1119人  5df463a52098

方式一:软件转html,然后粘贴到html编辑器里

有的markdown编辑器支持直接转成html,比如markdown Plus。或者在线软件转换即可。

方式二:vue-markdown 转html

1.安装npm install --save vue-markdown

<template>
  <div id="api1">
    <vue-markdown v-highlight :source="content"></vue-markdown>
  </div>
</template>

<script>
    import VueMarkdown from 'vue-markdown'
    import hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css'
    export default {
        name: 'api1',
        data () {
            return {
                content: ''
            }
        },
        components: {
            VueMarkdown
        },
        created () {
              this.content = `# 一、获取token
接口路径:/router/rest/V1
请求方式:HTTP POST
请求头域:Content-Type application/json
```
{
    "method": "DB.oauth.token",
    "requestId": "9e100afd-3f7e-4f55-aaee-7a1f9bce71c8",
    "code": 0,
    "data": [
       {
        "access_token":"dfb7a692-7e98-48bb-97da-6d3ccc97fd97",
        "token_type":"bearer",
        "expires_in":28799,
        "scope":"server"

       }
    ],
    "message": "调用接口成功"
}
``` `    
        },
        mounted () {
            let blocks = document.getElementById('api1').querySelectorAll('pre code')
            blocks.forEach((block) => {
                hljs.highlightBlock(block)
            })
        }
}

highlight.js让md文件中的代码块高亮

上一篇下一篇

猜你喜欢

热点阅读