介绍
tryit 是一个方便的 npm 包，可以在你的项目中启动一个实时在线代码编辑器和运行环境，让用户能够直接试用你的代码而不需要离开你的网站。这个工具特别适合前端类应用，如展示组件、UI 库等等。
安装
在项目根目录下执行以下命令来安装 tryit：
npm install tryit --save
快速上手
使用 tryit 很简单，以下是一个示例代码：
-- -------------------- ---- -------
----- ----- - ----------------
----- -------- - -
--------- -----
------
------
----- ----------------
------------ ------------
-------
------
---------- -----------
-------
-------
-
----- ------- - -
-- -
------ ----
-
-
----- ------ - -
------------------- --------
-
----- ----- - --- --------------- -------- -------
--------------通过以上代码，你就可以在浏览器中看到一个包含标题的红色 H1 的 HTML 页面，并在控制台中打印出 "Hello, Tryit!"。
API 解析
Tryit.constructor(html, css, js, options)
创建 Tryit 实例。
参数
html（string）：HTML 代码。css（string）：CSS 代码。js（string）：JavaScript 代码。options（object）：可选配置项。
options
container（HTMLElement）：包含 Tryit 编辑器的容器元素，默认为 body。height（number）：Tryit 编辑器的高度，默认为 400。theme（string）：Tryit 编辑器的主题，默认为 "monokai"。readOnly（boolean）：Tryit 编辑器是否只读，默认为 false。
tryit.render()
渲染 Tryit 编辑器和预览窗口。
高级使用
对 HTML、CSS、JS 进行分离
有时候我们需要对 HTML、CSS 和 JS 进行单独的处理，例如在项目中你可能想要动态地生成一些 HTML 元素。这时我们可以通过以下示例代码来实现：
-- -------------------- ---- ------- ----- ----- - ---------------- ----- -------- - - ---- --------------- - ----- ------- - - ---- - ------ ----- ------- ------ - - ----- ------ - - ----- --- - ------------------------------ ----- -- - ---------------------------- -------------- - ------- ------- ------------------- - ----- ----- - --- ------- ----------------------- --------------------- ------------------- --------------
自定义主题
Tryit 支持多种主题，如果默认的主题不符合你的需求，你也可以自己编写一个主题并应用到 Tryit 编辑器中。以下是一个自定义主题的示例代码：
-- -------------------- ---- -------
-- ----- --
--------- ----------- -
----------------- -----
-
--------- ------------------- -
----------------- -----
-
----- ----- - ----------------
----- -------- - -
--------- -----
------
------
----- ----------------
------------ ------------
-------
------
---------- -----------
-------
-------
-
----- ------- - -
-- -
------ ----
-
-
----- ------ - -
------------------- --------
-
----- ----- - --- --------------- -------- ------- - ------ ---------- --
--------------总结
通过以上介绍，我们可以看出 tryit 这个 npm 包的使用非常方便，它可以帮助我们快速地在项目中
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/42597