美文网首页
前端--三种插件用来解析mardowm,转化成为html语法

前端--三种插件用来解析mardowm,转化成为html语法

作者: 萤火虫de梦 | 来源:发表于2018-08-10 01:04 被阅读87次

    1、markdown.js

    .1 下载地址:https://github.com/evilstreak/markdown-js

    <script src="js/plugins/markdown.min.js"></script>
    <div>
        <!-- 输入区 -->
        <textarea id="text-input" oninput="this.editor.update()">
      在此处输入相关markdown语句
    </textarea>
        <!-- 显示区 -->
        <div id="preview" class="pull-left"> </div>
    </div>
    <script>
        // markdown
        function Editor(input, preview) {
            this.update = function () {
                preview.innerHTML = markdown.toHTML(input.value);
            };
            input.editor = this;
            this.update();
        }
        var _a = function (id) { return document.getElementById(id); };
        new Editor(_a("text-input"), _a("preview"));
    </script>
    

    2、showdown.js

    <div>
        <textarea id="content" style="" onkeyup="convert()"></textarea>
        <div id="result">
    </div>
    <script src="https://cdn.bootcss.com/showdown/1.3.0/showdown.min.js"></script> 
    <script>  
        function convert(){
            //获取要转换的文字
            var text = document.getElementById("content").value;
            //创建实例
            var converter = new showdown.Converter();
            //进行转换
            var html = converter.makeHtml(text);
            //展示到对应的地方  result便是id名称
         document.getElementById("result").innerHTML = html;
        }
    </script>  
    

    3、strapdown.js

    <textarea theme="united" style="display:block;">
    </textarea>
    <script src="strapdown.js"></script>
    

    相关文章

      网友评论

          本文标题:前端--三种插件用来解析mardowm,转化成为html语法

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