美文网首页
vue-cli项目中——md文件转html

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

作者: 5df463a52098 | 来源:发表于2018-08-03 13:16 被阅读1119次

    方式一:软件转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文件中的代码块高亮

    相关文章

      网友评论

          本文标题:vue-cli项目中——md文件转html

          本文链接:https://www.haomeiwen.com/subject/ylpyvftx.html