zoukankan      html  css  js  c++  java
  • vue中显示markdown文件为html

    1.安装插件

    npm install marked -D
    npm install highlight.js -D
      npm install markdown-loader -D
     npm install html-loader -D

    2.增加loader

    {
        test: /.md$/,
        use: [{
                loader: 'html-loader'
            },
            {
                loader: 'markdown-loader',
            }
        ]
    }


    3.在主js下,也就是 app.js 下定义自定义指令

      import hljs from 'highlight.js'
    Vue.directive('highlight', function (el) {  //注意这里是highlight;没有带js,因为这里是用来指定指令的
        let blocks = el.querySelectorAll('pre code');
        blocks.forEach((block) => {
            hljs.highlightBlock(block)
        })
    })

    4.然后在标签下调用
    #在要使用高亮的地方使用v-highlight指令

    <div v-html="Marked" v-highlight></div>


    5.具体调用

    <template>
        <div class="md-wrapper">
            <div v-html="code" v-highlight></div>
        </div>
    </template>
    <script>
    import page from "./index.md";
    import marked from "marked";
    import "highlight.js/styles/atelier-cave-light.css"; //这里可以选择不同的样式主题【主要是code的渲染样式】
    export default {
      data() {
        return {
          code: page
        };
      },
      mounted() {
        this.code = marked(this.code);
      }
    };
    </script>
    <style lang="scss" scoped>
    </style>

    6. 最后最好编写一份自定义的css样式;,其中table边框为单边框的样式为:

    table {
            border-collapse: collapse;
            border-spacing: 0;
            padding: 0;
            th {
                background: #999;
            }
            th,
            td {
                border: 1px solid #eee;
                padding: 10px 20px;
            }
        }
  • 相关阅读:
    matplotlib
    python 面向对象(进阶篇)转载武沛齐
    Python 面向对象(初级篇)
    jupter nootbok 快捷键、NumPy模块、Pandas模块初识
    爬虫系列之mongodb
    python迟邦定
    爬虫之selenium模块
    爬虫数据解析的三方式
    爬虫之requests模块
    315题
  • 原文地址:https://www.cnblogs.com/xiaozhumaopao/p/11652776.html
Copyright © 2011-2022 走看看