为自己的网站添加Markdown——showdown.js使用教程

痛定思痛。 2021-06-24 16:10 299阅读 0赞

学习地址：[https://www.jianshu.com/p/747d6f8dddb0][https_www.jianshu.com_p_747d6f8dddb0]  
练习代码地址：[https://github.com/956159241/DemoOfWebFront][https_github.com_956159241_DemoOfWebFront]

###### 步骤1.下载[showdown.js][] ######

###### 步骤2引入到自己的项目中，结构如下: ######

![2789632-924fcedc08fa0a58.png][]

###### 步骤3，引入到html，并使用 ######

使用showdown.js的基本方式：

function compile(){
    
        //获取要转换的文字
        var text = document.getElementById("content").value;
        //创建实例
        var converter = new showdown.Converter();
        //进行转换
        var html = converter.makeHtml(text);
        //展示到对应的地方  result便是id名称
     document.getElementById("result").innerHTML = html;
    }

仿简书的markdown实例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>测试使用markdown</title>
        <script type="text/javascript" src="showdown-master/showdown-master/dist/showdown.min.js"></script>
        <style>
            blockquote {
                border-left:#eee solid 5px;
                padding-left:20px;
            }
    
             ul li {
                 line-height: 20px;
             }
    
             code {
                 color:#D34B62;
                 background: #F6F6F6;
             }
    
        </style>
    </head>
    
    <body>
    
    <div>
        
    
        <textarea id="oriContent" style="height:400px;width:600px;" onkeyup="convert()"></textarea>
    
        
        <div id="result"></div>
    
    </div>
    
    
    <script type="text/javascript">
        function convert(){
            var text = document.getElementById("oriContent").value;
            var converter = new showdown.Converter();
            var html = converter.makeHtml(text);
            document.getElementById("result").innerHTML = html;
        }
    </script>
    
    </body>
    </html>

运行结果：

![2789632-05b7162fab6a2fbe.png][]

之后又发现一个开源库：  
[https://github.com/chjj/marked][https_github.com_chjj_marked]  
使用方式相对简单一些，参照上面的实例，完成相同的功能，如下：  
实例代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    </head>
    <body>
    <textarea id="oriContent" style="height:400px;width:600px;" onkeyup="convert()"></textarea>
    
    <div id="result"></div>
    
    <script type="text/javascript">
        function convert(){
            var text = document.getElementById("oriContent").value;
            var html = marked(text);
            document.getElementById("result").innerHTML = html;
        }
    </script>
    </body>
    </html>

![2789632-8879abe7e4349063.png][]

暂时先看这两个开源库，目前都不能像简书一样对照片进行操作，待了解~

![2789632-3b18269684ea9294.png][]

公众号.png

[https_www.jianshu.com_p_747d6f8dddb0]: https://www.jianshu.com/p/747d6f8dddb0
[https_github.com_956159241_DemoOfWebFront]: https://github.com/956159241/DemoOfWebFront
[showdown.js]: https://link.jianshu.com/?t=https://github.com/showdownjs/showdown
[2789632-924fcedc08fa0a58.png]: /images/20210615/819045f745204c06a421738b67cd1027.png
[2789632-05b7162fab6a2fbe.png]: /images/20210615/5ded9890aee0446a99769eef4397e74e.png
[https_github.com_chjj_marked]: https://github.com/chjj/marked
[2789632-8879abe7e4349063.png]: /images/20210615/d6128fc214c04a72875e6e84fed1e5ff.png
[2789632-3b18269684ea9294.png]: /images/20210615/828690f9695447d88877cc8d216968a0.png