美文网首页
markdown的搭建

markdown的搭建

作者: 岚平果 | 来源:发表于2019-01-24 17:20 被阅读0次

    在这里介绍浏览器上直接搭建使用markdown,以及在nodejs上搭建markdown

    一、浏览器上直接使用markdown

    html代码展示:

    <head>
    <link href="./css/monokai_sublime.min.css" rel="stylesheet">
    <script src="./js/marked.min.js"></script>
    <script src="./js/highlight.min.js"></script>
    </head>
    <body>
    <!-- 输入文本 -->
    <textarea id="editContent"></textarea>
    <!-- 展示文本 -->
    <div id="markContent"></div>
    
    <script>
    hljs.initHighlightingOnLoad();
    
    marked.setOptions({
          renderer: new marked.Renderer(),
          gfm: true,
          tables: true,
          breaks: false,
          pedantic: false,
          sanitize: false,
          smartLists: true,
          smartypants: false,
          highlight: function (code) {
            return hljs.highlightAuto(code).value;
          }
    });
    
    document.getElementById('editContent').addEventListener('input', () => {
      let val = this.value,
           markText = marked(val);
      document.getElementById('markContent').innerHTML = markText;
    }, false);
    </script>
    </body>
    
    

    二、nodejs上使用markdown

    在这里介绍如何使用vuepress;构建markdown

    相关文章

      网友评论

          本文标题:markdown的搭建

          本文链接:https://www.haomeiwen.com/subject/aldujqtx.html