美文网首页
前端--三种插件用来解析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语法

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

  • Html_note_01

    HTML 俗称网页,是用来开发网页,做前端的 HTML结构解析 HyperTextMarkupLanguage <...

  • jsx语法

    什么是jsx语法 html写在js中而且不用加任何引号. 遇见<>按html语法解析,遇见{ }按js语法解析。 ...

  • 微信小程序解析html,wxParse的使用

    项目中有显示后台传过来富文本前端显示的功能,因为微信小程序没有html语法,用了wxParse组件解析HTML w...

  • C#中使用XPath示例总结

    0 xpath简介 用来解析html或xml查找信息的语言。 1 xpath语法 表达式描述nodename选取此...

  • React基础(一)

    react 语法 1.引入依赖文件 jsx语法:遇到<>按照html语法解析;遇到{}按照js语法解析 2.Rea...

  • Emmet-前端开发神器

    Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、CSS ...

  • WEB环境的搭建

    web前端(html文件解析)就web的前端发展史而言,以前解析的是xml文件,再后来html的标准初步建立,发展...

  • 6. BeautifulSoup 解析库

    BeautifulSoup 解析库 BeautifulSoup 解析库根据HTML和XML语法建立解析树,进而高效...

  • 关于Emmet入门知识点

    概要 Emmet是一款编辑器插件,支持多种编辑器支持。在前端开发中,Emmet 使用缩写语法快速编写 HTML、C...

网友评论

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

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