md文档高亮

最新推荐文章于 2024-05-28 02:00:00 发布

CC_Amber

最新推荐文章于 2024-05-28 02:00:00 发布

阅读量4.9k

点赞数

分类专栏：总结

本文链接：https://blog.csdn.net/cjg214/article/details/87864750

版权

总结专栏收录该内容

28 篇文章 0 订阅

订阅专栏

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

<!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 = '```js\n 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 = '```js\n console.log("hello"); \n```';

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

CC_Amber

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
md文档高亮

参考了个别博客，文档，我选择用一种简单的方式，描述下~&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;link rel="stylesheet" href="/umi.css"&gt; &lt;meta charset="utf-8"&gt; &lt;meta name=&quo
复制链接

扫一扫