showdown.js markdown解析成html并高亮

erduoduo520

已于 2023-04-18 14:03:53 修改

阅读量380

点赞数

文章标签： javascript html 前端

于 2023-04-18 14:03:21 首次发布

本文链接：https://blog.csdn.net/erduoduo1989/article/details/130220289

版权

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<body>
    <div id="markdown-content"></div>
    <script>
      window.onload = function() {
        var markdownContent = document.getElementById('markdown-content');
        var markdownConverter = new showdown.Converter();
        var markdownText = '```javascript\nfunction add(x, y) {\n  return x + y;\n}\n```';
        var html = markdownConverter.makeHtml(markdownText);
        markdownContent.innerHTML = html;
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      };
    </script>
</body>