MarkDown 项目中如何引入开源MarkDown? 史上最简单教程

目录

一、少不了的东西

editor.md

① 下载链接  

② 将其引入到自己的项目中

引入依赖

二、代码部分  一些小细节

1. 编辑页

2. 展示页

---

一、少不了的东西

如果想要在一个页面中使用MarkDown ，那么你首先就要引入MarkDown

editor.md

① 下载链接  

GitHub下载地址  GitHub 下载地址

oneDrive下载地址 oneDrive editor.md 

② 将其引入到自己的项目中

引入依赖

 在需要的 html 页面引入这个依赖

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

例如：

二、代码部分  一些小细节

这些代码基本都是一些官方文档约定俗成的内容  只需复制粘贴即可

1. 编辑页

 相关代码：

            <!-- 正文的编辑区 -->
            <div id="editor">
                <textarea name="content" style="display:none"></textarea>
            </div>

 
   <script>
        // 初始化编辑器, 代码也是截取自 官方文档 . 
        let editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "## hello world",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>

2. 展示页

 

 相关代码：

//style这个属性可以加或者不加  这个意思只是让背景透明
<div id="content" style="background-color: transparent">
    <!-- 内容 -->
</div>


// 此处使用 editor.md 来进行渲染
editormd.markdownToHTML('content', { markdown: body.content });