markdown转HTML(使用editor.md)

点击下载案例代码

editor.md网站地址http://pandao.github.io/editor.md/

前面有写过一篇markdown转html,使用Markdown.Converter进行转换,效果并太不理想,这里我再写一篇通过editor.md来转换。

后台代码我就不写了,大家从后台读取文件内容然后传给前端转换就可以了。

首先需要引入对应的css跟js文件,jquery一定要在前面引入,大家可以去官网下载editor.md,也可以点击我上面的案例代码下载

代码如下:


<html>
    <head> 
        <meta charset="utf-8" />
        <title>mkToHtmlDemotitle>

        
        <link rel="stylesheet" href="editor.md-master/examples/css/style.css" />
        <link rel="stylesheet" href="editor.md-master/css/editormd.preview.css" />

        
        <script src="editor.md-master/examples/js/jquery.min.js">script>
        <script src="editor.md-master/lib/marked.min.js">script>
        <script src="editor.md-master/lib/prettify.min.js">script>
        <script src="editor.md-master/lib/raphael.min.js">script>
        <script src="editor.md-master/lib/underscore.min.js">script>
        <script src="editor.md-master/lib/sequence-diagram.min.js">script>
        <script src="editor.md-master/lib/flowchart.min.js">script>
        <script src="editor.md-master/lib/jquery.flowchart.min.js">script>
        <script src="editor.md-master/editormd.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">点击转Htmlbutton>


    <p>=================  华丽丽的分割线 ====================p>

    <h1>转换后h1>

    
    <div id="testEditorMdview">
        <textarea id="appendTest" style="display:none;">textarea>
    div>


    
    <script type="text/javascript"> 

        //markDown转HTMl的方法
        function mdToHml(){

            //先对容器初始化,在需要展示的容器中创建textarea隐藏标签,
            $("#testEditorMdview").html('');
            var content=$("#demo1").val();//获取需要转换的内容
            $("#appendTest").val(content);//将需要转换的内容加到转换后展示容器的textarea隐藏标签中

            //转换开始,第一个参数是上面的div的id
            editormd.markdownToHTML("testEditorMdview", {
                htmlDecode: "style,script,iframe", //可以过滤标签解码
                emoji: true,
                taskList:true,
                tex: true,               // 默认不解析
                flowChart:true,         // 默认不解析
                sequenceDiagram:true,  // 默认不解析
            });
        }
    script>
     

    body>
html>

效果如下:
markdown转HTML(使用editor.md)_第1张图片

markdown转HTML(使用editor.md)_第2张图片
markdown转HTML(使用editor.md)_第3张图片

你可能感兴趣的:(编辑器)