在前端开发中，有时候我们需要分享代码，或者展示一个具体的代码片段。在这种情况下，我们需要把代码按照课程或者博客文章的形式呈现给别人看。npm 包 just-the-code 是一个非常有用的工具，它可以帮助我们快速地实现这个目标。本文将介绍 just-the-code 的使用方法，以及如何在你的项目中集成它。
什么是 just-the-code？
just-the-code 是一个 Node.js 模块，它可以从 HTML 或者 Markdown 中提取代码，并在网页上显示出来。它非常易于使用，并且可以根据你的需要自定义代码显示效果。如下图所示，这是一个使用 just-the-code 渲染后的代码片段：
console.log('Hello world!');安装 just-the-code
在开始使用之前，我们需要先安装 just-the-code。打开终端，输入以下命令：
npm install just-the-code --save
在 HTML 中使用 just-the-code
如果你想在 HTML 页面上渲染代码，你需要在页面中引入 just-the-code 的 JS 文件，然后把代码放在 <pre><code></code></pre> 标签中。
-- -------------------- ---- -------
--------- -----
------
------
-------------------- ----------
------- --------------------------------------------------------
-------
------
---------- ----------------------------
------------------ ---------
-------------
-------
-------然后你需要在页面底部调用一下 jtc.render() 方法来渲染代码：
... <script> jtc.render(); </script> ...
现在，打开页面，你就能看到代码已经被正确地渲染了。
在 Markdown 中使用 just-the-code
你也可以在 Markdown 文件中使用 just-the-code。只需要在你的代码块中添加 just-the-code 类名即可。你可以很容易地使用 just-the-code 来为你的博客文章或者项目文档添加漂亮的代码块。以下是一些示例代码：
## Hello world!
这是一个使用 just-the-code 渲染的代码块：
```just-the-code
console.log('Hello world!');-- -------------------- ---- ------- ----------- -- ---- -------------------------------- ---------------- ----- - - -- ----- - - -- ------------- - ---
-- -------------------- ---- ------- ------- -- ----- ------ ------ ------------- ------- ------------- ------------------ ---------
动态计算
以下代码显示如何动态计算两个数字的和，然后将结果打印到控制台上：
const a = 1; const b = 2; console.log(a + b);
这就是如何在你的项目中使用 just-the-code，让你可以轻松地为你的代码添加漂亮的渲染效果。希望这篇文章可以帮助到你！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055c8b81e8991b448d9f7d