在网页中引入第三方文件MarkDown的步骤（详细）

摸鱼哥myg

已于 2023-07-23 23:47:59 修改

阅读量1.4k

点赞数 1

分类专栏：前端文章标签：前端 html css 编辑器

于 2023-07-23 20:05:11 首次发布

本文链接：https://blog.csdn.net/m0_71927557/article/details/131882753

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、具体步骤

1、下载jquery mdn

先在bing搜索中输入jquery mdn

选择下载3.6.3 min版

点击，复制链接按钮，在新的搜索框中打开该链接

得到如下内容:

引入操作有两种方法

第一种：

将内容全选，复制，在项目目录里新建一个文件夹，在文件夹底下新建一个文件，名为jquery.min.js,将内容粘贴到该文件中，保存。

随后在html文件的<head>标签中，用script标签引入该文件

<script src="js/jquery.min.js"></script>

第二种：

直接把cdn的地址引入script

先点击复制链接按钮

然后直接在html文件的<head>标签中用script标签引入

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

这种方法有一个问题，可能cdn的网址会变化，此时还要更新网址

2、引入editor.md

要在github上找.

如果github打不开，可以尝试使用免费加速器watt Toolkit(原名steam++)

在github搜索框中搜索editor.md

点击第一个

点击code，克隆也行，下载也行

下载完成之后，将该文件拷贝到项目目录中

并且将其重命名为, editor.md

3、引入文件到html文件中

先保证html页面中有一个id为editor的div

<div id="editor">

            </div>

引入editor.md中对应的css和js,

这些代码必须放到jquery引入代码的下方，jquery在<head>标签里

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <script src="js/jquery.min.js"></script>
    <!--引入 editor.md 的依赖-->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css"/>
    <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>

</head>

编写初始化代码

在body标签的最后位置，复制粘贴script标签里的代码

<body>
    
        <script>
            var editor = editormd("editor",{
                //这里的尺寸必须在这里设置，设置样式会被editormd自动覆盖掉
                width:"100%",
                //设置编辑器高度
                height:"500px",
                //编辑器中的初始内容
                markdown:"# 在这里写下一篇博客",
                //指定editor.md依赖的插件路径
                path:"editor.md/lib/"
            });
        </script>
</body>

引入成功