Medium Editor Markdown 项目教程

Medium Editor Markdown 项目教程

medium-editor-markdown:pencil: A Medium Editor extension to add markdown support.项目地址:https://gitcode.com/gh_mirrors/me/medium-editor-markdown

1. 项目的目录结构及介绍

medium-editor-markdown/
├── dist/
│   ├── me-markdown-no-deps.js
│   ├── me-markdown-standalone.js
│   ├── me-markdown-standalone.min.js
│   └── ...
├── example/
│   ├── index.html
│   └── ...
├── src/
│   ├── me-markdown.js
│   └── ...
├── .gitignore
├── CONTRIBUTING.md
├── DOCUMENTATION.md
├── LICENSE
├── README.md
├── bower.json
├── build/
│   ├── build.js
│   └── ...
├── index.html
├── package-lock.json
├── package.json
└── ...

目录结构介绍

• dist/: 包含项目的构建输出文件，如 me-markdown-no-deps.js, me-markdown-standalone.js, me-markdown-standalone.min.js 等。
• example/: 包含项目的示例文件，如 index.html。
• src/: 包含项目的源代码文件，如 me-markdown.js。
• .gitignore: Git 忽略文件配置。
• CONTRIBUTING.md: 贡献指南。
• DOCUMENTATION.md: 项目文档。
• LICENSE: 项目许可证。
• README.md: 项目介绍和使用说明。
• bower.json: Bower 包管理配置文件。
• build/: 包含构建脚本，如 build.js。
• index.html: 项目的主页文件。
• package-lock.json: npm 包锁定文件。
• package.json: npm 包配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 index.html，它包含了项目的初始化代码和示例使用方式。以下是 index.html 的部分代码示例：

<div class="editor"></div>
<pre class="markdown"></pre>
<script src="path/to/medium-editor.js"></script>
<script src="path/to/me-markdown-standalone.min.js"></script>
<script>
(function () {
    var markDownEl = document.querySelector(".markdown");
    new MediumEditor(document.querySelector(".editor"), {
        extensions: {
            markdown: new MeMarkdown(function (md) {
                markDownEl.textContent = md;
            })
        }
    });
})();
</script>

启动文件介绍

• index.html: 项目的启动文件，包含了 Medium Editor 和 Markdown 扩展的初始化代码。
• medium-editor.js: Medium Editor 的核心库。
• me-markdown-standalone.min.js: Markdown 扩展的独立版本，包含了所有依赖。

3. 项目的配置文件介绍

package.json

package.json 是 npm 包管理器的配置文件，包含了项目的元数据和依赖信息。以下是部分内容示例：

{
  "name": "medium-editor-markdown",
  "version": "1.0.0",
  "description": "A Medium Editor extension to add markdown support",
  "main": "dist/me-markdown-standalone.min.js",
  "scripts": {
    "build": "./build"
  },
  "dependencies": {
    "medium-editor": "^5.0.0"
  },
  "devDependencies": {
    "turndown": "^7.0.0"
  }
}

配置文件介绍

• name: 项目名称。
• version: 项目版本号。
• description: 项目描述。
• main: 项目的入口文件。
• scripts: 项目的脚本命令，如 build。
• dependencies: 项目的依赖库，如 medium-editor。
• devDependencies: 开发环境的依赖库，如 turndown。

通过以上内容，您可以了解 Medium Editor Markdown 项目的目录结构、启动文件和配置文件的基本信息。

medium-editor-markdown:pencil: A Medium Editor extension to add markdown support.项目地址:https://gitcode.com/gh_mirrors/me/medium-editor-markdown