md-compile v1.1.0

md

unpkg链接： https://unpkg.com/md-compile/lib/main.js

marked.setOptions({
   custom: {
           key: 'demo', // 记号键名
           mark: ':::', // 记号
           render: function (oldStr, newStr) { // oldStr 原始字符串 newStr 处理后的字符串
               return '<div>'+
               '<div class="code-example">' + oldStr + '</div>'+
               '<div class="code-content">' + newStr + '</div>'+
               '<div class="code-control">显示代码</div>'+
               '</div>'
           },
           validate:'...'
   },
   codeRender:function (oldStr, newStr) { // 同上custom.render,针对生成的code,可以做一层包装。
       // return
   },
   highlight: function(code,lang) { // 结合highlight
       return hljs.highlightAuto(code,[lang]).value;
   }
});

// webpack

// main.js
import marked from "md-compile"
import highlight from "highlight.js"
import 'highlight.js/styles/color-brewer.css';
marked.setOptions({
    custom: {
        key: 'demo', // 记号键名
        mark: ':::', // 记号
        render: function (oldStr, newStr) {
            return '<div>'+
                '<div class="code-example">' + oldStr + '</div>'+
                '<div class="code-content">' + newStr + '</div>'+
                '<div class="code-control">显示代码</div>'+
                '</div>'
        }
    },
    highlight: function (code,lang) {
        return highlight.highlightAuto(code,[lang]).value;
    }
});
// import alerts from './docs/components/alerts.md'
// const app = document.getElementById('app');
// app.innerHTML = marked(comp)

// webpack.config.js
module: {
    rules: [
        {
           test: /\.md$/,
           use: [
               {
                   loader: "html-loader"
               }
           ]
        },
    ]
},

/*代码显示风格 仅用于 color-brewer ----------------*/
.hljs,.highlight  {
    line-height: 1.8;
    font-family: Menlo,Monaco,Consolas,Courier New,monospace;
    font-size: 12px;
    /*padding: 18px 24px;*/
    background-color: #f9fafc !important;
    /*border: 1px solid #eaeefb;*/
    /*border-radius: 4px;*/
    -webkit-font-smoothing: auto;
}
/*代码显示内容*/
.code-content{
    height: 0;
    overflow: hidden;
    transition: height .2s;
}
.code-content pre code {
    padding: 1rem
}
/*代码显示控制按钮*/
.code-control {
    border-top: 1px solid #eaeefb;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    background-color: #654343;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    text-align: center;
    color: #d3dce6;
    cursor: pointer;
    transition: .2s;
    position: relative;
    margin-bottom:1rem;
}
.code-control:hover {
    /* color: #20a0ff; */
    background-color: #9f6a6a;
}

// code 展示隐藏 （注意先后顺序）
var elements = document.getElementsByClassName('code-control');
for (var i = 0; i < elements.length; i++) {
    elements[i].onclick = function () {
        var sibling = this.previousElementSibling;
        var clientHeight = sibling.children[0].clientHeight;
        if (sibling.style.height === '' || sibling.style.height === '0px') {
            sibling.style.height = clientHeight + 'px';
        } else {
            sibling.style.height = '0px';
        }
    }
};