使用markedjs预览md文件

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css"
        rel="stylesheet" />

    <script src="js/jquery.min.js"></script>

    <link href="https://cdn.bootcss.com/highlight.js/9.13.1/styles/default.min.css" rel="stylesheet" />

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

    <script>

        marked.setOptions({
      
      
            renderer: new marked.Renderer(),
            gfm: true,
            tables: true,
            breaks: true,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function (code, lang) {
      
      
                if (lang && hljs.getLanguage(lang)) {
      
      
                    return hljs.highlight(lang, code, true).value;
                } else {
      
      
                    return hljs.highlightAuto(code).value;
                }
            }
        });

    </script>

    <title>{title}</title>
</head>

<body>
    <article id="wcb-content" class="markdown-body" style="text-align: left;"></article>

    <script>
        $.get("aa.md", function (markdown) {
      
      
            document.getElementById('wcb-content').innerHTML =
                marked.parse(markdown);
        })

    </script>
</body>

</html>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44797182/article/details/129271539
今日推荐