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 });


相关文章
|
7月前
【Typora】markdown神器之Typora无限使用安装与基本操作教程
【Typora】markdown神器之Typora无限使用安装与基本操作教程
242 3
|
7月前
|
程序员 Linux iOS开发
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
一款比Typora更简洁优雅的Markdown编辑器神器(完全开源免费)
286 1
|
2天前
|
人工智能 文字识别 数据挖掘
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
MarkItDown 是微软开源的多功能文档转换工具,支持将 PDF、PPT、Word、Excel、图像、音频等多种格式的文件转换为 Markdown 格式,具备 OCR 文字识别、语音转文字和元数据提取等功能。
42 8
MarkItDown:微软开源的多格式转Markdown工具,支持将PDF、Word、图像和音频等文件转换为Markdown格式
|
21天前
|
人工智能 移动开发 前端开发
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
Markdown-to-Image 是一款开源的在线 Markdown 转海报编辑器,能够将 Markdown 文本内容转换为图像,适用于创建社交媒体帖子、海报和其他视觉内容。该工具支持多种输出格式,并允许用户自定义样式,适用于多种应用场景。
60 4
Markdown-to-Image:开源的在线 Markdown 转海报编辑器
|
1月前
|
存储 安全 关系型数据库
Blossom:开源私有部署的markdown笔记软件
Blossom 是一款功能强大的开源笔记软件,支持私有部署,可将笔记、图片、个人计划等数据保存在自己的服务器中,并实现实时同步。它还具备动态博客功能,方便记录和分享内容。Blossom 支持多种设备,提供完善的文件管理、快速迁移和丰富的附加功能,是个人知识管理和博客展示的理想选择。
66 7
Blossom:开源私有部署的markdown笔记软件
|
1月前
|
程序员
【Markdown速成】半小时入门Markdown教程(后缀.md文件详解)
作为程序员我们经常会看到README.md这种说明文件,以.md为后缀的文件就是我们所说的Markdown的文件。
154 4
|
4月前
|
存储 自然语言处理 前端开发
Star 6.9k!开源的全能Markdown格式文件提取器:MinerU
总的来说,MinerU是一款非常实用且强大的数据提取工具。无论你是开发者、互联网从业者,还是有具体需求的新人小白,MinerU都能极大地提升你的工作效率,让你专注于更有价值的工作。 最后,如果你对MinerU感兴趣,不妨亲自尝试一下,相信你会爱上这款全能的Markdown格式文件提取器。
|
6月前
|
JSON API 开发工具
|
6月前
|
机器学习/深度学习 自然语言处理 PyTorch
|
前端开发 安全
博客教程markdown--- (花里胡哨篇)
博客教程markdown--- (花里胡哨篇)
92 1