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

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

一、少不了的东西

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

editor.md


① 下载链接  

GitHub下载地址  GitHub 下载地址

oneDrive下载地址 oneDrive editor.md

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


718847aa951348a585eff25f5fb7fcf8.png

引入依赖

在需要的 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>

例如:

401befde217448d1878d0278a0df11d6.png


二、代码部分  一些小细节

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

1. 编辑页


7879344a34a04ca3800c49eaf1dbb99b.png


ee6644da006f4db5a6be0ce853ec8482.png


相关代码:

            <!-- 正文的编辑区 -->
            <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. 展示页


72194e8232d44fd59fdd731236e491c0.png


d018078716a04e169e240dab41391ad4.png


相关代码:

//style这个属性可以加或者不加  这个意思只是让背景透明
<div id="content" style="background-color: transparent">
    <!-- 内容 -->
</div>
// 此处使用 editor.md 来进行渲染
editormd.markdownToHTML('content', { markdown: body.content });


相关文章
|
6月前
【Typora】markdown神器之Typora无限使用安装与基本操作教程
【Typora】markdown神器之Typora无限使用安装与基本操作教程
223 3
|
6月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
261 1
|
3天前
|
存储 安全 关系型数据库
Blossom:开源私有部署的markdown笔记软件
Blossom 是一款功能强大的开源笔记软件,支持私有部署,可将笔记、图片、个人计划等数据保存在自己的服务器中,并实现实时同步。它还具备动态博客功能,方便记录和分享内容。Blossom 支持多种设备,提供完善的文件管理、快速迁移和丰富的附加功能,是个人知识管理和博客展示的理想选择。
23 7
Blossom:开源私有部署的markdown笔记软件
|
18天前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
|
3月前
|
存储 自然语言处理 前端开发
Star 6.9k!开源的全能Markdown格式文件提取器:MinerU
总的来说,MinerU是一款非常实用且强大的数据提取工具。无论你是开发者、互联网从业者,还是有具体需求的新人小白,MinerU都能极大地提升你的工作效率,让你专注于更有价值的工作。 最后,如果你对MinerU感兴趣,不妨亲自尝试一下,相信你会爱上这款全能的Markdown格式文件提取器。
|
5月前
|
JSON API 开发工具
|
5月前
|
机器学习/深度学习 自然语言处理 PyTorch
|
前端开发 安全
博客教程markdown--- (花里胡哨篇)
博客教程markdown--- (花里胡哨篇)
86 1
|
6月前
|
程序员
Markdown简易教程
Markdown教程概览:一种轻量级标记语言,用于编写易读易写的文本,可转换为HTML、Word等多种格式。常用功能包括标题(#号表示级别)、段落、字体样式(斜体、粗体、删除线等)、分隔线、列表(有序、无序、任务列表)、代码块、数学公式、链接、图片和视频。支持引用、表格和脚注等。推荐编辑器有Typora。官方教程:[Markdown 基本语法](https://markdown.com.cn/basic-syntax/)。
38 0
|
6月前
|
IDE 数据可视化 数据挖掘
Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍
Jupyter Notebook使用教程——从Anaconda环境构建到Markdown、LaTex语法介绍
1711 2