markdown转html(使用Markdown.Converter)

来源：互联网发布：网络大数据查询编辑：程序博客网时间：2024/06/06 07:01

点击下载案例代码

我这里就写个简单静态的案例吧，
大家可通过后台读取markdown文件内容传到前端进行转换，
这里我就不写后端了

首先我们需要引入两个js文件，jquery跟Markdown.Converter，
jquery引入一定要在前面。

在id为demo1的textarea便签中输入需要转换的markdown格式内容，然后点击按钮来进行转换，代码如下：

<!doctype html><html lang="en"> <head>    <meta charset="UTF-8">    <title>mdToHTMLDemo</title>    <script src="jquery.min.js"></script>    <script src="Markdown.Converter.js"></script> </head> <body>    <!--输入需要转换的内容框开始-->    <h1>转换前</h1>    <textarea id="demo1" style="width:800px;height:300px;">    hadoop命令需在hadoop目录下使用**常用命令**    HDFS格式化:    bin/hadoop namenode -format    格式化namenode    bin/hadoop datanode -format    格式化datanode    *如不是第一次格式化，为了保证clusterID一致性,    *需先删除hdfs临时目录,    *即在配置文件中配置的hadoop.tmp.dir参数路径    </textarea>    <!--输入需要转换的内容框结束-->    <!--点击该按钮进行转换-->    <button onclick="mdToHml();" type="button">转Html</button>    <p>=================  华丽丽的分割线 ====================</p>    <h1>转换后</h1>    <!--展示转换后的内容开始-->    <div id="test">我是空的</div>    <!--展示转换后的内容结束-->    <!--js开始-->    <script type="text/javascript">        //转换的方法        function mdToHml(){            var md=$("#demo1").val();//得到需要转换的内容            var converter = new Markdown.Converter();            var htm = converter.makeHtml(md);//转换            $('#test').html(htm);//显示到页面        }    </script>    <!--js结束--> </body></html>

效果如下：
这里写图片描述

这里写图片描述

这里转换有点缺陷(可以看我另一篇文章,介绍了另一种转换),
如下图：
这里写图片描述

阅读全文

0 0