md文档高亮

77 阅读 0 评论 51 点赞

我是靠谱客的博主灵巧硬币，最近开发中收集的这篇文章主要介绍md文档高亮，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

参考了个别博客，文档，我选择用一种简单的方式，描述下~

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="/umi.css">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <title>my-umi-app</title>
    <script>window.routerBase = "/";</script>
    
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> 
    <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

</head>

<body>
    <div id="root">
        <div id="content"></div>
    </div>
</body>
<script>
    var rendererMD = new marked.Renderer();
    marked.setOptions({
        renderer: rendererMD,
        highlight: function (code) {
            return hljs.highlightAuto(code).value;
        },
        gfm: true,
        tables: true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false
    });
    var markdownString = '```jsn console.log("hello"); n```';

    document.getElementById('content').innerHTML = marked(markdownString);
</script>

</html>

如果放在脚手架搭建的项目里，大概分为下面步骤:

(1)安装并引入marked

npm install marked --save

在包含md文件页面里,

import marked from ‘marked’;

等效于下面该句:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

（2）引入高亮文件

在index.html里,添加:

<link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

(3)

var rendererMD = new marked.Renderer();
marked.setOptions({
    renderer: rendererMD,
    // 高亮配置
    highlight: function (code) {
        return hljs.highlightAuto(code).value;
    },
    gfm: true,
    tables: true,
    breaks: false,
    pedantic: false,
    sanitize: false,
    smartLists: true,
    smartypants: false
});

var markdownString = '```jsn console.log("hello"); n```';

document.getElementById('content').innerHTML = marked(markdownString);