markdown转HTML(使用editor.md)

最新推荐文章于 2024-06-10 09:02:37 发布

周梦顺

最新推荐文章于 2024-06-10 09:02:37 发布

阅读量3.1w

点赞数 12

分类专栏：编辑器文章标签： markdown 编辑器

本文链接：https://blog.csdn.net/zhoumengshun/article/details/76019942

版权

编辑器专栏收录该内容

4 篇文章 0 订阅

订阅专栏

点击下载案例代码

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

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

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

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

代码如下：

<!DOCTYPE html>
<html>
    <head> 
        <meta charset="utf-8" />
        <title>mkToHtmlDemo</title>

        <!--引入样式文件-->
        <link rel="stylesheet" href="editor.md-master/examples/css/style.css" />
        <link rel="stylesheet" href="editor.md-master/css/editormd.preview.css" />

        <!--引入js文件-->
        <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>
        <!--输入需要转换的markdown文件开始-->
        <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>   
        <!--输入需要转换的markdown文件结束-->

    <!--点击该按钮进行转换-->
    <button onclick="mdToHml();" type="button">点击转Html</button>


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

    <h1>转换后</h1>

    <!--在该div中展示,如有初始化的数据可以放在textarea中-->
    <div id="testEditorMdview">
        <textarea id="appendTest" style="display:none;"></textarea>
    </div>


    <!--js开始-->
    <script type="text/javascript"> 

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

            //先对容器初始化，在需要展示的容器中创建textarea隐藏标签，
            $("#testEditorMdview").html('<textarea id="appendTest" style="display:none;"></textarea>');
            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>
     <!--js结束-->

    </body>
</html>

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

这里写图片描述

周梦顺

关注

12
点赞
踩
31

收藏

觉得还不错? 一键收藏
14
评论
markdown转HTML(使用editor.md)

点击下载案例代码editor.md网站地址http://pandao.github.io/editor.md/前面有写过一篇markdown转html,使用Markdown.Converter进行转换，效果并太不理想，这里我再写一篇通过editor.md来转换。后台代码我就不写了，大家从后台读取文件内容然后传给前端转换就可以了。首先需要引入对应的css跟js文件，jquery一定要在前面引入，大家可
复制链接

扫一扫

专栏目录