DaZeng：web页面使用markdown编辑器组件

最新推荐文章于 2024-06-30 00:13:11 发布

Da Zeng

最新推荐文章于 2024-06-30 00:13:11 发布

阅读量848

点赞数 1

分类专栏： web总栏 JavaScript 文章标签： markdown 组件化

本文链接：https://blog.csdn.net/Z269571627/article/details/111489280

版权

web总栏同时被 2 个专栏收录

62 篇文章 1 订阅

订阅专栏

JavaScript

18 篇文章 0 订阅

订阅专栏

首推SimpleMDE

因为引入两行链接就可以直接使用了。

官网：SimpleMDE Markdown Editor
GitHub：SimpleMDE - Markdown Editor

简单使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
</head>
<body>
<textarea></textarea>
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script>
    var simplemde = new SimpleMDE();
</script>
</body>
</html>

在这里插入图片描述
进阶使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/highlight.js/9.13.0/styles/github-gist.min.css" rel="stylesheet">
</head>
<body>
<textarea></textarea>
<script src="https://cdn.bootcss.com/simplemde/1.11.2/simplemde.min.js"></script>
<script src="https://cdn.bootcss.com/highlight.js/9.13.1/highlight.min.js"></script>
<script>
    var simplemde = new SimpleMDE({
        element: document.querySelector('textarea'),
        autoDownloadFontAwesome:false,//true从默认地址引入fontawesome依赖 false需自行引入(国内用bootcdn更快点)
        autofocus:true,
        autosave: {
            enabled: true,
            uniqueId: "SimpleMDE",
            delay: 1000,
        },
        blockStyles: {
            bold: "**",
            italic: "*",
            code: "```"
        },
        forceSync: true,
        hideIcons: false,
        indentWithTabs: true,
        lineWrapping: true,
        renderingConfig:{
            singleLineBreaks: false,
            codeSyntaxHighlighting: true // 需要highlight依赖
        },
        showIcons: true,
        spellChecker: true
    });
    // 默认开启预览模式
    simplemde.toggleSideBySide();
</script>
</body>
</html>

在这里插入图片描述
更改代码预览区域样式：

        .cnblogs-markdown .hljs {
            display: block;
            overflow-x: auto;
            padding: 0.5em;
            background: #1E1E1E !important;
            color: #FFF;
            white-space: pre;
            word-break: normal;
            font-family: "Consolas", sans-serif !important;
            font-size: 14px !important;
        }

        .hljs {
            display: block;
            overflow-x: auto;
            padding: 0.5em;
            background: #1E1E1E;
            color: #DCDCDC;
        }

        code.hljs {
            display: inline-block !important;
            vertical-align: top !important;
        }

        .hljs-keyword,
        .hljs-literal,
        .hljs-symbol,
        .hljs-name {
            color: #569CD6;
        }

        .hljs-link {
            color: #569CD6;
            text-decoration: underline;
        }

        .hljs-built_in,
        .hljs-type {
            color: #4EC9B0;
        }

        .hljs-number,
        .hljs-class {
            color: #B8D7A3;
        }

        .hljs-string,
        .hljs-meta-string {
            color: #D69D85;
        }

        .hljs-regexp,
        .hljs-template-tag {
            color: #9A5334;
        }

        .hljs-subst,
        .hljs-function,
        .hljs-title,
        .hljs-params,
        .hljs-formula {
            color: #DCDCDC;
        }

        .hljs-comment,
        .hljs-quote {
            color: #57A64A;
            font-style: italic;
        }

        .hljs-doctag {
            color: #608B4E;
        }

        .hljs-meta,
        .hljs-meta-keyword,
        .hljs-tag {
            color: #9B9B9B;
        }

        .hljs-variable,
        .hljs-template-variable {
            color: #BD63C5;
        }

        .hljs-attr,
        .hljs-attribute,
        .hljs-builtin-name {
            color: #9CDCFE;
        }

        .hljs-section {
            color: gold;
        }

        .hljs-emphasis {
            font-style: italic;
        }

        .hljs-strong {
            font-weight: bold;
        }

        /*.hljs-code {
  font-family:'Monospace';
}*/

        .hljs-bullet,
        .hljs-selector-tag,
        .hljs-selector-id,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo {
            color: #D7BA7D;
        }

        .hljs-addition {
            background-color: #144212;
            display: inline-block;
            width: 100%;
        }

        .hljs-deletion {
            background-color: #600;
            display: inline-block;
            width: 100%;
        }
        pre {
            background-color:#1e1e1e !important;
            color: white;
        }

在这里插入图片描述
更多代码风格，参考highlight.js

Markedjs

GitHub：markedjs/marked
在这里插入图片描述

showdownjs

GitHub：showdownjs/showdown
在这里插入图片描述

vue内的markdown

GitHub：hinesboy/mavonEditor
在这里插入图片描述

millerblack/markdown-js

GitHub：millerblack/markdown-js
在这里插入图片描述

Da Zeng

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
DaZeng：web页面使用markdown编辑器组件

推荐几款markdown组件首推SimpleMDEMarkedjsshowdownjsvue内的markdownmillerblack/markdown-js主要用于类似于搭建个人博客中发布编辑查看博客的功能。首推SimpleMDE因为引入两行链接就可以直接使用了。官网：SimpleMDE Markdown EditorGitHub：SimpleMDE - Markdown Editor简单使用：<!DOCTYPE html><html lang="zh-CN">&
复制链接

扫一扫