在前端开发中，经常需要将代码以美观的形式展示。有些人可能会选择截图后再上传，但这种方法不仅麻烦，而且会使代码的复制粘贴变得更加困难。不过，现在有一个更加方便的方法——使用 npm 包 carbon-now-cli。
Carbon-now-cli 简介
Carbon-now-cli 是一个命令行工具，它可以将你的代码以美观的形式展示，并且还支持多种语言和常见的编程语言主题。这个工具可以在终端上快速地生成代码截图，同时还支持在网页上分享代码。 Carbon-now-cli 使用了 Carbon 的视频框架，将您提供的代码呈现在一个渐变的背景色上。
除了美观之外，使用 Carbon-now-cli 可以将以前代码复制粘贴中的缩进等特殊字符纳入考量。这意味着，您无需手动修改您的代码即可享受美观的呈现形式。
Carbon-now-cli 的安装
首先，打开命令行并运行以下命令：
npm install -g carbon-now-cli
这将全局安装 carbon-now-cli，使您可以从任何地方访问它。已经安装完成后，您可以验证是否成功安装，打开命令行，输入以下命令：
carbon-now-cli --version
如果一切正常，您应该会看到现在已经安装的 Carbon-now-cli 版本号。
Carbon-now-cli 的使用方法
让我们使用一个简单的 HTML 示例来演示 Carbon-now-cli 的使用。
-- -------------------- ---- ------- --------- ----- ------ ------- --------------------- ------- ---------------- --------------- ----------------- --------- ---------------------- ------------------------- -------- ------- ----------- ----------- ------------------ -------- -------
- 首先，您需要进入到您的代码所在的目录中，打开命令行并输入以下命令：
carbon-now-cli path/to/your/file.html -t <主题>
在这个例子中，我们使用 html 文件类型，但是 Carbon-now-cli 还支持多种不同的代码类型。现在，我们需要将 path/to/your/file.html 更改为您需要演示的实际文件。主题选项是可选的，并且默认情况下将使用黑色 Carbon 主题，但是您可以如下所示更改主题。
- 根据个人喜好更改主题
以下是目前可用的主题列表:
-- -------------------- ---- -------
- --- ----- ------
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
- - -
- -------- - ---------- - --------- - ---------- - ----------- - ------------ -
--------------------------------------------------------------------------------------------------------------------------------------------
- - -
- ------ - ---- - ------- - ------------- - ------------ - --------- -
--------------------------------------------------------------------------------------------------------------------------------------------
- - -
- ------- - -------- - ------- - ---- - ------------ - --------- -
--------------------------------------------------------------------------------------------------------------------------------------------
- - -
- -------- - ----- - ------------ - ------------- - ---------------- - -------------- -
--------------------------------------------------------------------------------------------------------------------------------------------
- - -
- --------------- - ------------ - -------- - ---------- - ----------- - ------------ -
--------------------------------------------------------------------------------------------------------------------------------------------注意：如果您想使 Carbon-now-cli 断行，可以添加 --config '{"lineNumbers":true}' 参数，显示行号。
- 您应该可以看到类似以下的输出：
✔ Saved locally at /var/folders/nr/6_63g6ts1hg7p9n6lb18y0b80000gn/T/carbon-3024-day-vhx5un68-ui.html ✔ Copied to clipboard! 📋
在 Carbon-now-cli 中，您可以将输出复制到剪贴板中，并粘贴到任何支持粘贴的应用程序中。这在分享代码时非常有用。
- 将 Carbon-now-cli 的代码片段嵌入到 HTML
如果你不想下载生成的代码图案，你可以将其嵌入到 HTML 文件中以实现更好的互动性。
您可以在 <head> 标签中添加以下元素：
-- -------------------- ---- -------
---
------
----- ----------------
-------------------
-------
-------------- -
------- --- ----- -----
-------------- ----
----------- --- --- --- ------- -- -- -----
-
--------
-------
---通过一个纯 css 样式来翻译 Carbon-now-cli 嵌入的代码。
在您将上面提到的路径中找到你的 carbon 包含代码块的 html 文件的完整路径。它应该是这样的:
/var/folders/nr/6_63g6ts1hg7p9n6lb18y0b80000gn/T/carbon-xxxxxx-ui.html
将以下代码插入到您的 HTML 文件的 <body> 标签内：
-- -------------------- ---- -------
------
---- -------------------------
--------
--------------------------------------- -- ------- ---- ---- ---- ------ --------
---------------- -- ----------------
------------ -- -
----- --------- - ----------------------------------------
------------------- - ----
--
---------
-------现在是时候重新使用 npm run 开始您的应用：
npm run start
打开您的 localhost:8080，您应该看到 Carbon 码！ 现在，您已经成功地将 carbon 的代码嵌入到 HTML 文件中，允许用户复制和粘贴。
Carbon-now-cli 更多的用法
除了在终端上生成截图之外，Carbon-now-cli 还可以在 Web 上创建代码片段。您可以通过在命令后添加 -o 选项来打开生成的截图，同时也可以在键入 carbon-now-cli 时添加-i <mode> 选项，其中 MODE 可以是 cli 或 browser。
在浏览器中打开的 Carbon 码具有以下特点：
- 可以在其中编辑代码
- 可以选择语言和主题
结论
Carbon-now-cli 是一个很方便的工具，可以帮助您展示您的代码以及允许您与他人分享您的代码。通过这篇文章，您应该已经了解了如何安装和使用 Carbon-now-cli。此外，您还应该知道 Carbon-now-cli 的其他一些用法。我们希望此篇文章对您有所帮助，祝您的前端开发路更加顺畅！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671d530d0927023822b2c