我在大学时，英语教授经常问我和同学们：“例子在哪儿？”开发者们在阅读Dev.to上的教程时也会问同样的问题。当然，答案是添加示例项目中的代码片段，但如果我告诉你，给它们添加颜色会让它们更加醒目呢？给代码片段添加颜色会让它们看起来更吸引人，就像在饭菜里加点调味料或挤点柠檬汁会让菜肴更美味一样。还是不确定？别担心，本指南将教你两种给代码片段添加颜色的方法。
如果你想快速地为代码片段添加颜色，反引号（`）方法正适合你。以下是具体步骤。
第一步：在代码顶部添加三个反引号，如下所示：
步骤 2：在顶部反引号旁边添加代码片段的语言名称。这有助于组织代码片段。例如，我在 Hashnode 上发表的文章“你需要知道的 3 个简单易用的不常用辅助功能技巧”中的代码片段是用 HTML 编写的。因此，如果我将这篇文章转发到Dev.to，顶部反引号将如下所示：
步骤 3：添加代码片段：接下来，选择一段你认为最能体现编程教程中这一步骤的代码片段。然后，将其复制并粘贴到顶部反引号下方。如下图所示：
步骤 4：添加底部：最后，像步骤 1 那样，在代码下方添加三个反引号。完整代码如下：
<div role="contentinfo"> <h2>Privacy Statement</h2> <!-- footer content --> </div>
当然，反引号并不是让代码片段变彩的唯一方法。我们来试试另一种。
如果你正在寻找另一种让你的代码片段更炫彩的方法，我强烈推荐使用 CodeSnap。
📸 在 VS Code 中截取精美的代码屏幕截图！
CodeSnap。尖端：
codesnap.start到自定义按键。codesnap.shutterAction到copy您的……这是一个很棒的 Visual Studio Code 扩展，它可以为选定的代码片段添加彩色背景。以下是使用方法。
第一步：选择代码片段：转到项目仓库中的文件，并选中您选择的代码片段。
步骤二：使用 CodeSnap 将其截图！
右键单击选中的代码片段，然后单击“CodeSnap”。屏幕右侧将显示代码片段的截图，背景为彩色。
步骤 3：保存屏幕截图
找到截图，右键单击，然后选择“复制”。之后，将其粘贴到您的Dev.to文章中。
瞧！你得到了一段色彩丰富的代码片段！
恭喜！你刚刚学会了两种方法，可以将你的代码片段从技术性强但略显生硬转变为技术性强但又生动有趣！😊 🎉 如果你想了解更多提升代码片段水平的方法，不妨看看@get_pieces的应用Pieces By Developer。它会让你大开眼界！😊 说到大开眼界，欢迎关注我在 Dev.to 上的其他内容！😊
另外，如果您想在 Dev.to 之外与我联系，请查看以下链接。
文章来源：https://dev.to/cbid2/how-to-add-color-to-your-devto-articles-code-snippets-1hm4