HTML内嵌Markdown编辑器

最新推荐文章于 2024-07-02 15:57:36 发布

Dreamy_lin

最新推荐文章于 2024-07-02 15:57:36 发布

阅读量3.4k

点赞数 3

分类专栏：前端文章标签： Markdown 表格 showdown js css

本文链接：https://blog.csdn.net/Dreamy_LIN/article/details/106304182

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

实现步骤
1、获取markdown的开源库，这里用的是开源项目showdown。
将showdown.min.js拷贝到项目中，需要的其他扩展可通过setOption(“扩展名”,true)去启动。

showdown: https://github.com/showdownjs/showdown

2、选择喜欢的Markdown样式，下载引用该css到自己的项目，还可以适当修改样式。

李笑来老师的https://gist.github.com/xiaolai/aa190255b7dde302d10208ae247fc9f2
少数派主题: https://cdn.sspai.com/sspai.css
Mweb主题: https://cdn.sspai.com/MWeb.css
Github主题: https://github.com/sindresorhus/github-markdown-css
typora主题合集下载: https://theme.typora.io/

3、按照showdown和选择的样式要求的格式来书写html文件。我这里用的是Github主题。
Github主题的使用方式：
在这里插入图片描述
showdown.min.js的使用方式：

其他扩展选项：

实现代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>html内嵌markdown</title>
    <script src="showdown.min.js"></script>
    <link rel="stylesheet" type="text/css" href="github-markdown.css">
</head>

<body>
    <style>
    #editor {
        display: flex;
        min-height: 600px;
        width: 100%;
    }

    #md-area {
        width: 100%;
        background: #f5f5f5;
        border: 1px solid #111;

    }
    #view-area {
        width: 100%;
        border: 1px solid #111;
    }
    
    /*Github主题要求的样式引入*/
    .markdown-body {
        box-sizing: border-box;
        min-width: 200px;
        max-width: 980px;
        margin: 0 auto;
        padding: 45px;
    }

    @media (max-width: 767px) {
        .markdown-body {
            padding: 15px;
        }
    }
    </style>

<div id="editor">
    <textarea id="md-area" onkeyup=mdConverter()></textarea>  <!-- 键盘每次点击实时调用 -->
    <article id="view-area" class="markdown-body">            <!-- github主题样式应用 -->
    </article>
</div>

<script>
    function mdConverter() {
        var md = document.getElementById("md-area").value;
        var converter = new showdown.Converter();  //增加拓展table
        converter.setOption('tables', true);  //启用表格选项。从showdown 1.2.0版开始，表支持已作为可选功能移入核心拓展，showdown.table.min.js扩展已被弃用
        var view = converter.makeHtml(md);
        document.getElementById("view-area").innerHTML = view;
    }
</script>
</body>
</html>

效果：
在这里插入图片描述

参考文章：https://www.jianshu.com/p/a57114bd9380
https://www.jianshu.com/p/7bb05fc9b7f0

Dreamy_lin

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML内嵌Markdown编辑器

实现步骤1、获取markdown的开源库，这里用的是开源项目showdown。将showdown.min.js和showdown-table.min.js（用于支持表格转换）拷贝到项目中。showdown: https://github.com/showdownjs/showdownshowdown的showdown-table: https://github.com/showdownjs/table-extension2、选择喜欢的Markdown样式，直接引用该css到自己的项目，还可
复制链接

扫一扫

专栏目录