利用marked.js写个简单Markdown编辑器(1)

最新推荐文章于 2026-03-30 16:35:02 发布

原创最新推荐文章于 2026-03-30 16:35:02 发布 · 1.5w 阅读

14 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端 #javascript #博客 #markdown #插件

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用marked.js创建一个简单的Markdown编辑器。在博客系统中，Markdown因其简洁的语法而受到青睐。作者比较了不同的Markdown解析插件，最终选择marked.js，因为它易于使用并能良好处理代码块和表格。文章展示了如何结合bootstrap框架实现实时预览功能，通过监听事件在textarea输入后即时解析Markdown内容。

Markdown的语法简洁明了、学习容易，而且功能比纯文本更强，因此有很多人用它写博客。
最近想自己动手写一个博客系统，然后查了下博客系统一般构造，发现目前大部分博客把Markdown作为博客的标配了。网上有很多markdown的解析插件，我一开始用的事markdown-js.js，但这个插件实在太坑了，代码块和表格都不能很好的处理；然后又用了strapdown.js，只能说这个插件太好了，它会给你一些不想要的东东。所以对比下来我选择了marked.js。这个插件用起来很简单，调用marke("md")就能解析你的markdown文本。

第一步：实现markdown编写实时预览

为了让页面好看，采用了bootstrap框架，实现左栏textarea写代码，通过监听键盘按下事件keyup和失去焦点事件blur，向右栏div实时插入解析的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/bootstrap.css" rel="stylesheet">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/marked.min.js"></script>
    <style>
        #header{
            width: 100%;
            height: 40px;
            background: #2e6da4;
            line-height: 40px;
            color: white;
            font-size: 20px;
            margin-bottom: 60px;
        }
        #md,#html{
            height: 510px;
        }
        #md{
            resize: none;
        }
        #html{
            border: solid 1px darkgrey;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="header" class="text-center">MarkDown解析器</div>
<div class="container">
    <div class="row">
        <div class="col-sm-6 col-lg-6 col-md-6">
            <textarea id="md" class="form-control"  placeholder="请输入Markdown代码"></textarea>
        </div>
        <div id="html" class="col-lg-6 col-sm-6 col-md-6"></div>
    </div>
</div>
</body>
<script>
    $("#md").on("keyup blur",function () {
        $('#html').html(marked($("#md").val()))
    })
</script>

</html>

结果演示：