让你的站点也支持MarkDown

高建2 2019-04-18 19:50:42 0 0 Others 194 复制链接

 关于markdown转换成html,网上已经有开源的js库了,我们没有必要再去重复造轮子,这里我们使用开源项目showdown.js:

GitHub地址为:https://github.com/showdownjs/showdown

这个插件使用方法十分简单,使用方法如下:

最后一行代码,makeHtml()这个方法会返回导出的html代码,然后我们将其显示出来就可以了。

下面我们下载showdownjs,放到本地,写一个demo来测试一下,我们新建一个html文件,添加js引用,代码如下:

复制代码

<!DOCTYPE html><html><head>
    <title>MarkDown</title>
    <script type="text/javascript" src="showdown.min.js"></script></head></style><body></body></html>

复制代码

 然后,我们添加一个<textare>用来输入markdown内容,再添加一个div来显示markdown的输出结果。然后,编写javascript代码,取出用户输入的内容,然后把导出的html代码显示在div中,整体页面代码如下:

复制代码

<!DOCTYPE html><html><head>
    <title>MarkDown</title>
    <script type="text/javascript" src="showdown.min.js"></script></head><style>
    body {
      font-family: "Helvetica Neue", Helvetica, Microsoft Yahei, Hiragino Sans GB, WenQuanYi Micro Hei, sans-serif;
     font-size: 16px;
      line-height: 1.42857143;
      color: #333;
      background-color: #fff;
    }
    ul li {
        line-height: 24px;
    }
    blockquote {
        border-left:#eee solid 5px;
        padding-left:20px;
    }
    code {
        color:#D34B62;
        background: #F9F2F4;
    }</style><body><div>
    <textarea id="content" style="height:400px;width:600px;" onkeyup="compile()"></textarea>
    <div id="result"></div></div><script type="text/javascript">function compile(){    var text = document.getElementById("content").value;    var converter = new showdown.Converter();    var html = converter.makeHtml(text);
    document.getElementById("result").innerHTML = html;
}</script></body></html>

复制代码

这里我们给<textare>添加onkeyup事件,这样就可以实时的看到编辑结果了。

转自https://www.cnblogs.com/yunfeifei/p/4482495.html



评论(0)

    还没有评论,快来抢沙发吧!