简介
Mdsvex 是一个可通过 Markdown 进行操作的 Svelte 类型组件的编译器，它能够将 Markdown 转化为 JavaScript 模块，从而可以在 Svelte 项目中使用。本文将详细介绍 mdsvex 的使用以及编写 Svelte 组件的相关技巧和注意事项。
安装
Mdsvex 是一个 npm 包，安装方式如下：
npm install --save-dev mdsvex
使用
在 Svelte 组件中使用 mdsvex，首先需要在组件文件中引入 mdsvex，并在 script 标签中使用 mdsvex 的 svelte_preprocess 函数进行预处理。下面是一个例子：
-- -------------------- ---- -------
------- ----------
------ - ------ - ---- ---------
------ - ----------------- - ---- ------------------
------ --- ------- - ---
----- ------- - -
----------- ------- --------
------- -
----- ----------------------------------
----- ----------------------------------
--
--
----- ------------ - -------------------
--------- ------------
--------- -
------ ----------
--
-------------------
---
---------使用 mdsvex 的 mdsvex 函数可以获得处理后的 Markdown 内容作为组件的渲染内容。
<svelte:component this="{mdsvex(content)}" />这样就可以在 Svelte 组件中使用 Markdown 进行文本内容的展示了。更多使用文档可以参考 mdsvex 官方文档。
示例
下面为一个使用 mdsvex 的 Svelte 组件示例。
-- -------------------- ---- -------
---- ---------------------- ---
------- ----------
------ - ------ - ---- ---------
------ - ----------------- - ---- ------------------
------ --- ------- - ---
----- ------- - -
----------- --------
------- ----------------------------------
--
----- ------------ - -------------------
--------- ------------
--------- -
------ ----------
--
-------------------
---
---------
----------------- ------------------------ --在上例中，component 标签使用 mdsvex 处理过的内容作为渲染内容。
教程
下面将逐步介绍如何编写一个支持 Markdown 渲染的 Svelte 应用。
创建 Svelte 项目
首先需要安装 svelte 和 svelte-preprocess：
npx degit sveltejs/template my-svelte-project cd my-svelte-project npm install npm install --save-dev svelte-preprocess
安装 Markdown 预处理器
安装 mdsvex：
npm install --save-dev mdsvex
插入 Markdown 内容
在 src 目录下创建一个 Post.md 文件作为文章内容，内容可以如下：
-- -------------------- ---- ------- --- ------ -- ----- ---- --- - ------ ------ ---- -- -- ----- ----- --- --- ----- ------- -- --- ------- ---- -------- ------ --- -- ----- ---- --- ------- ---- ------ --- --------- ---------- --- ----- ----------------- ----------------- -- ----------------- --- ------- ---------- ------ --- ------- ---------- ----------------- ------
创建 Svelte 组件
接下来我们需要创建一个 Svelte 组件来显示 Markdown 内容，如下所示：
-- -------------------- ---- -------
---- -------------------------- ---
------- ----------
------ - ------ - ---- ---------
------ - ----------------- - ---- ------------------
------ --- ------- - ---
----- ------- - -
----------- --------
------- ----------------------------------
--
----- ------------ - -------------------
--------- ------------
--------- -
------ ----------
--
-------------------
---
---------
----------------- ------------------------ --在程序中，我们使用了 mdsvex 导出的 mdsvex 和 svelte_preprocess，这里需要将它们合并起来使用，详见上文。
创建布局模板
最后创建布局模板以在组件中继承，使 Markdown 内容可以在布局模板中被渲染。以下是一个基础的布局模板：
-- -------------------- ---- -------
---- ----------------------------- ---
------- ----------
------ --- ----- - ---
---------
------
----------------
-------------
-------
-------
---- -
------- ---- --
-------- - -----
-
--------布局模板可根据需要自由扩展。
在最后，将 Post 组件封装在 Router 组件中以渲染到对应的路由上即可。
总结
本文详细介绍了如何使用 mdsvex 在 Svelte 中渲染 Markdown 内容，包括安装步骤和使用步骤。通过本文，读者可以学习到如何合理地编写 Svelte 组件，并能够在 Svelte 应用中使用 mdsvex 将 Markdown 组件化，更好地管理页面内容。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f056c9b403f2923b035becf