简介
@wlk/tutorial 是一个基于 React 和 TypeScript 的 npm 包，用于创建交互式的教程指南。它提供了一种易于使用和灵活的方式来编写和组织你的教程内容，包括文字、代码示例和演示视频。
安装
使用 npm 安装 @wlk/tutorial。
npm install @wlk/tutorial
使用方法
初始化
在使用 @wlk/tutorial 之前，你需要先创建一个指南项目。你可以通过以下命令来创建一个项目：
npx wlk-tutorial init my-tutorial
这将在当前目录下创建一个名为 my-tutorial 的新项目，并在其中创建一个默认的指南页面 index.tsx。
编写指南
在 index.tsx 文件中编写教程指南。你可以使用 markdown 语法来编写指南中的文本和代码示例。如下所示：
-- -------------------- ---- -------
-- ---------
------ ----- ---- --------
------ - --------- ---- - ---- ----------------
----- --- - -- -- -
------ -
----------
----- ----------- -- ----- -------
-- -- -
--- ------
------ --------------- ----
--- ------- ----- --
----------------- --------------- --------
-------------- ----- ---
------
----- ---------- - -- -- -
------ ---------- -------------
--
---
--------------
-------
----- ----------- -- -------
-- -- -
--- -- -----
----------------- ----- ---------
--------- ---------- ------- ----- -------
------
--------- --------------- -
----- -------
-
----- ---------- - ------- ---------------- -- -
------ ----------- --------------------
--
---
--------------
-------
-----------
--
--
------ ------- ----运行指南
在完成指南编写后，你可以使用以下命令运行指南：
npx wlk-tutorial start
这将会启动一个本地服务器，从而可以在浏览器中访问指南。
构建指南
在完成指南编写后，你可以使用以下命令构建指南：
npx wlk-tutorial build
这将会在指南项目的 dist 目录下生成一个可发布的静态网站，你可以将其发布到任何静态服务上。
自定义样式
你可以在指南项目的 style.css 文件中自定义指南的样式。如下所示：
-- -------------------- ---- ------- -- --------- -- -- ------ -- ---- - ----------------- -------- - -- -------- -- ---------------- - ---------- ----- ------------ ----- ------- ---- -- - -- -------- -- --------------- - ----------------- -------- -------------- ---- -------- ---- -
总结
@wlk/tutorial 是一个非常实用且易于使用的教程指南工具，它提供了一个完整的指南创建工具链。你可以使用它来创建各种类型的教程，包括代码示例、视频演示和交互式演示等。如果你想要创作一份教程指南，那么 @wlk/tutorial 是一个值得尝试的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/87699