介绍
Markdown 是一种轻量级的标记语言，常用于撰写技术文档、博客文章等。mdcon 是一个能够将 Markdown 转换成在浏览器或移动端可执行的、可交互的 HTML 文件的 npm 包。它可以帮助前端工程师将 Markdown 文件变成具有交互性和良好界面的文档网站。
在本文中，我们将介绍如何使用 mdcon 这个包，将 Markdown 转化为 HTML 并构建一个交互式的文档网站。在示例代码中，我们将使用 Vue 框架来构建一个简单但实用的 Markdown 编辑器。
安装
在开始使用 mdcon 之前，我们需要在全局安装该包。
npm install -g mdcon
基本用法
使用 mdcon 转换 Markdown 文件为 HTML 非常简单，只需要在控制台中运行：
mdcon input.md output.html
在命令行中运行该命令后，mdcon 将会读取 input.md 文件，并将其转换成 output.html。
mdcon 支持的命令行参数和其它常用语法在GitHub主页都有详细描述。
构建一个 Markdown 编辑器
在本部分中，我们将使用 Vue 框架设立一个新的项目，并构建一个包含 mdcon 和编辑器插件的交互式 Markdown 编辑器。以下是整个项目的文件结构：
-- -------------------- ---- ------- --------- -- ------------- -- ---- ---- ----------- ------ ---------- ---- ------- ---- ------- -- -------- -- ---------- -- ------------ -- ---------
首先，让我们在终端中创建新的 Vue 项目：
vue create md-editor
我们将生成的文件中的 src 文件夹中所有的内容删除，并在 src 文件夹中的 components 文件夹中创建一个组件：
Editor.vue
-- -------------------- ---- -------
----------
---- ---------------
--------- ------------------------------
--- -------------------------
------
-----------
--------
------ -- ---- ---------------
------ ------- -
---- -- -
------ -
--------- --
-
--
----------- -
--
-
-
---------
------ -------
------- -
-------- -----
--------------- -------
------- -----
-
-------- -
------ -----
---------- --
------- -----
------- -----
-------- -----
------------ --------
---------- --------
-------- -----
-
------ -
---------- --
----------- -----
-
--------在 Editor.vue 中，我们定义了一个包含文本编辑区域和 Markdown 渲染区域的组件。在 <textarea> 元素中，我们绑定了 markdown 变量，在用户输入时，将 Markdown 内容渲染并显示在 mdcon 中。注意，我们还引入了在 mdcon 包内包含的 $ md 组件。
构建运行该项目，请在终端中输入：
npm i mdcon --save
此时，你也需要安装 vue.
除此之外，我们在 main.js 文件中引入和注册了组件，并且将该组件渲染到了根实例中。
main.js
-- -------------------- ---- ------- ------ --- ---- ----- ------ --- ---- ----------- ------ ------ ---- ------------------------- ------------------------------ ------------------------ - ----- ----------------------- ------- --- ----- --- ------- ------- - -- ------- --
在 App.vue 文件中，我们创建了一个含有一个名为 editor 的 <editor> 组件的应用。你还可以在该应用中添加其它组件，以进一步完善界面设计。
App.vue
-- -------------------- ---- -------
----------
---- ---------
-----------------
------
-----------
--------
------ ------ ---- -------------------------
------ ------- -
----- ------
----------- -
------
-
-
---------
-------
---- -
------- -----
-
--------在完成这些设置后，您可以在浏览器中启动服务以查看和使用您的 Markdown 编辑器，运行命令：
npm run serve
现在，在 http://localhost:8080 中打开页面，你就可以开始编写你的 Markdown 文档了！
结论
在本文中，我们讲解了如何使用 mdcon 将 Markdown 文件转换成 HTML，并构建一个简单而又实用的交互式 Markdown 编辑器。其中，我们使用了许多前端技术和框架，例如 Vue 和 npm 包管理器。尽管美中不足，这个简单的示例代码具有引导作用，并提供了学习以及指导意义。如果你想运用 mdcon 来进一步实现百变文档网站的建设，希望这篇文章能够给您带来一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8581e8991b448d91d8