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

来源:互联网 发布:巨人网络2018校招面试 编辑:程序博客网 时间:2024/06/06 03:43
  • 前端–三种插件用来解析mardowm,转化成为html语法
  • 使用方式十分简单,快捷
  • 参考地址:

1、markdown.js

  • 下载地址: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

  • 下载地址:https://github.com/showdownjs/showdown
  • 参考地址:http://www.jianshu.com/p/747d6f8dddb0
    (找了一些参考网页,发现这个最有用)
<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

  • 下载地址:https://github.com/arturadib/strapdown
  • http://strapdownjs.com/
  • strapdown 有一些主题可以直接使用 更改theme的属性值就可以了(主题有:amelia、cerulean、cyborg、journal、readable、simplex、slate等)
<textarea theme="united" style="display:block;"></textarea><script src="strapdown.js"></script>
原创粉丝点击