使用editormd 使 mardowm 转 html

最新推荐文章于 2023-04-18 10:34:07 发布

马小鹿啊

最新推荐文章于 2023-04-18 10:34:07 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/sophia_xiaoma/article/details/87272490

版权

官网（打开时比较慢）：http://pandao.github.io/editor.md/

来源：https://blog.csdn.net/zhoumengshun/article/details/76019942

依赖jquery，在引入editormd .js文件时注意，jquery一定要在其前面引入

代码如下（非实时转）：

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

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

        <!--引入js文件-->
        <script src="js/jquery-1.10.2.min.js"></script>
        <script src="js/editor/marked.min.js"></script>
        <script src="js/editor/prettify.min.js"></script>
        <script src="js/editor/raphael.min.js"></script>
        <script src="js/editor/underscore.min.js"></script>
        <script src="js/editor/sequence-diagram.min.js"></script>
        <script src="js/editor/flowchart.min.js"></script>
        <script src="js/editor/jquery.flowchart.min.js"></script>
        <script src="js/editor/editormd.js"></script>

    </head>

    <body>
        <!--输入需要转换的markdown文件开始-->
        <h1>转换前</h1>
        <textarea id="demo1" style="width:800px;height:300px;">
#### Editor.md directory

    editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/
            editormd.js
            ...

```java
public static void main(String[] args) {
    System.out.println("Hello World!");
}```
        </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>

马小鹿啊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用editormd 使 mardowm 转 html

官网（打开时比较慢）：http://pandao.github.io/editor.md/来源：https://blog.csdn.net/zhoumengshun/article/details/76019942依赖jquery，在引入editormd .js文件时注意，jquery一定要在其前面引入代码如下（非实时转）：&lt;!DOCTYPE html&gt;&lt;ht...
复制链接

扫一扫