在线markdown转html+代码高亮

最新推荐文章于 2024-05-16 09:53:02 发布

小仙女儿

最新推荐文章于 2024-05-16 09:53:02 发布

阅读量3k

点赞数 3

分类专栏： html5 文章标签： markdown marked-js highlight

本文链接：https://blog.csdn.net/zula1994/article/details/78135269

版权

html5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用工具：
1. marked.js markdown转html
2. highlight.js 代码高亮
3. typo.css 排版工具

在线体验

marked.js

引入marked <script src="https://cdn.bootcss.com/marked/0.3.4/marked.min.js"></script>
使用 marked(markdown)

highlight.js

引入highlight.js <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>
引入样式 <link href="http://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet">
使用

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

效果图如下

这里写图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>md文本测试</title>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/marked/0.3.4/marked.min.js"></script>
    <link rel="stylesheet" href="/css/markdown_style.css">
    <link href="/css/default.css" rel="stylesheet">  
    <script src="http://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script>    <style>
    body {display: flex; justify-content: space-between;}
    #content {width: 49%;}
    #show{width: 50%; border:  1px solid  #ddd; padding: 50px; box-sizing: border-box;}
    </style>
</head>
<body>  
<textarea  id="content"></textarea> 
<div id="show" class="typo"></div>
<script>
    marked.setOptions({
        renderer: new marked.Renderer(),
        gfm: true,
        tables: true,
        escaped : true,
        breaks: false,
        pedantic: false,
        sanitize: false,
        smartLists: true,
        smartypants: false,
        highlight: function (code, lang) {
            console.log('code',code)
        // return   hljs.highlight(lang, code, false,true).value;
        return hljs.highlightAuto(code).value;
      }
    });

    $("#content").on("input  propertychange", function() {
        var val = $(this).val();
        $("#show").html(marked(val));
    })
</script>
</body>
</html>