让你的技术博客脱颖而出：代码和项目展示的艺术

程序员何未来

于 2024-04-22 08:15:00 发布

阅读量1.3k

点赞数 131

分类专栏：程序员博主教程（完全指南）文章标签：技术博客代码展示项目展示代码工具博客设计高亮显示用户体验

本文链接：https://blog.csdn.net/coder_heweilai/article/details/138041368

版权

程序员博主教程（完全指南）专栏收录该内容

9 篇文章 1 订阅

订阅专栏

heweilai-bolg-title-image-of-the-article

CSDN 的朋友你们好，我是未来，今天给大家带来专栏【程序员博主教程（完全指南）】的第 8 篇文章“博客代码和项目展示技巧”。本文讨论了在技术博客中展示代码和项目的重要性，提供了多种展示技巧，包括代码高亮、格式化、工具使用，以及项目的多样化展示方法，旨在提升文章质量和读者的理解。

文章关键词：技术博客，代码展示，项目展示，高亮显示，格式清晰，代码工具，可读性增强，嵌入式代码，可执行代码片段，博客设计，视频演示，架构图，教学内容，用户体验，互动学习

📄引言

在当今信息爆炸的时代，技术博客不仅是程序员分享知识、交流想法的平台，也是展示其技术专长和项目成果的舞台。代码和项目展示在技术博客中的重要性不言而喻。一段清晰、高效的代码展示可以提升文章的专业性，增强同行之间的交流；而一个项目的直观演示则能更好地抓住读者的注意力，激发他们对技术或产品的兴趣。

在技术文章中，高质量的代码和项目展示不仅有助于传递作者的想法，还能将抽象的概念具象化，让读者更直观地理解技术实现的细节。通过有效的视觉辅助和实例演示，读者可以迅速地把握文章的核心观点，从而在学习新技术时减少误解和困惑。此外，一个精心设计的展示能提升整体文章质量，显著增强读者的阅读体验，使得技术内容变得生动而富有吸引力。

那么，如何才能做到高质量的代码和项目展示呢？在接下来的文章中，未来将带大家探讨一些有效的技巧和最佳实践，以帮助你的技术博客脱颖而出，为你的读者提供卓越的学习和阅读体验。

一. 🌏代码展示技巧

1.1 🌙高亮展示

高亮是代码展示的基础，它能帮助读者区分语法元素，如关键字、变量、字符串等。使用颜色对不同的代码部分进行区分不仅能提升阅读体验，还有助于读者快速理解代码结构。一个好的高亮方案应该既不过于花哨，以免分散注意力，也不应太过单调，以免无法突出重要元素。

代码高亮

1.2 🌙字体友好

选择一种适合编程的字体对于代码展示至关重要。等宽字体是最佳选择，因为它确保了每个字符占据相同的空间，从而保证了代码的对齐和整洁。像Consolas、Monaco或Source Code Pro这样的字体都是不错的选择。字体的大小也应该适中，既不至于过小难以阅读，也不能太大导致页面滚动。

代码字体consolas

1.3 🌙格式清晰

代码的缩进和空格处理是格式清晰性的关键。适当的缩进可以表明代码结构，比如循环体内部的代码比外部代码缩进一个层级。空白行可以用来分隔逻辑上相关联的代码块，使得代码更易于阅读和理解。

代码格式化

1.4 🌙代码展示工具

现在有很多代码展示工具可以将源代码转换为格式化的 HTML，如Prism.js、Highlight.js等。这些工具提供多种主题和语言支持，让你不必手动处理复杂的格式化问题。此外，一些在线 IDE 和 Gist 也提供代码分享功能，你可以直接嵌入到你的博客中。

代码高亮工具hightlightjs

接下来我将从四个角度给大家分享多种实用的代码展示工具。

1.4.1 将代码嵌入博客页面

我们可以借助 Prismjs 等工具将高亮代码嵌入到我们的博客页面中。

Prismjs（https://prismjs.com/）：Prism 是一个轻量级、易于使用、并且支持多种语言的代码语法高亮库。它是由 Lea Verou 创建的，目标是简化其语法并提供易于理解的扩展接口。Prism 通过 CSS 类来匹配语言的语法，易于定制和扩展，适合现代 web 项目。
hightlightjs（https://highlightjs.org/）：highlight.js 是一个流行的 JavaScript 库，用于在网页上高亮显示代码块。它支持几乎所有的编程语言和相关的语法，并且可以自动检测代码块中的语言。 highlight.js 提供多种内置的主题样式，并且可以通过插件或者 API 进行扩展。
Rainbows（https://craig.is/making/rainbows）：Rainbows 是一个小巧且可扩展的代码语法高亮库，它允许开发者以插件的方式添加新的语言或语法规则。它基于 JavaScript，并且可以在客户端运行，从而不需要服务器端的预处理。
SyntaxHighlighter（https://github.com/syntaxhighlighter/syntaxhighlighter）：SyntaxHighlighter 是一个全面的代码高亮工具，提供了一系列的刷子（brushes）来支持不同的编程语言。它可以轻松集成到任何 web 应用中，同时提供了丰富的主题和自定义选项。
Google Code Prettify：（https://github.com/googlearchive/code-prettify）：Google Code Prettify 是谷歌开发的一个开源的 JavaScript 模块和 CSS 文件，用于在 HTML 文档中嵌入代码时自动应用语法高亮。虽然这个项目目前已经归档（意味着它已停止维护），但它仍然被许多网站和博客使用，因为它简单、易用并且不依赖任何外部库。

1.4.2 可运行的代码片段

也可以借助 Codepen 等工具在博客中展示可以实时运行的代码片段。以下是我在码上掘金中的一个爱心代码在线演示。

可运行代码演示

Codepen（https://codepen.io/）：CodePen 是一个社交开发环境，让开发者编写 HTML、CSS 和 JavaScript 代码，并立即看到结果。它是一个受欢迎的展示前端设计和开发项目的平台，兼具教学工具和代码库的功能。CodePen 对于创建和分享前端设计非常有用，也是寻找灵感和代码片段的好地方。
CodeSandbox（https://codesandbox.io/）：CodeSandbox 是一个在线 IDE（集成开发环境），专门针对现代 web 开发设计。它为前端开发者提供了一个即时的、协作式的开发环境，允许他们创建和共享项目，并能够导入和导出 GitHub 仓库。CodeSandbox 支持多种前端框架和库，并提供了一个非常接近本地开发环境的体验。
码上掘金（https://code.juejin.cn/）：码上掘金是掘金社区的一个功能，支持在线编辑、运行代码并分享。掘金是一个技术分享平台，码上掘金增加了编写代码和展示效果的能力，使得用户可以即时运行代码片段，并与掘金社区内的其他开发者分享和交流。
code-run-online（https://wanglin2.github.io/code-run-online/）：这个工具是一个简单的在线代码运行器，它支持多种编程语言。它的界面比较简单，并不像其他一些平台那样功能丰富，但它足够直接，适合快速测试代码片段。
Jsfiddle（https://jsfiddle.net/）：JSFiddle 是一个流行的在线开发环境，适合编写和分享 HTML、CSS 和 JavaScript 代码。它常被用来演示问题和分享代码片段。JSFiddle 简洁的界面和直观的布局，使得快速创建和测试前端代码变得非常简单。
JS Bin（https://jsbin.com/）：JS Bin 是一个开放源代码的在线代码编辑器和调试工具，用于测试和展示 HTML、CSS 和 JavaScript 代码。用户可以实时编辑代码，并查看结果，还可以共享和保存他们的 bins（代码容器）。
Jsrun（https://jsrun.net/new）：Jsrun 是一个中文的在线代码编辑器，支持 HTML、CSS 和 JavaScript，用户可以在上面编写代码并即时预览效果。它提供了代码分享和保存的功能，并允许用户直接从编辑器内嵌入到其他网站。

1.4.3 生成代码图片

也可以使用 Carbon 等工具生成精美的代码图片进行分享和展示。

Carbon生成代码图片

Carbon（https://carbon.now.sh/）：Carbon 是一个非常受欢迎的在线工具，它可以生成漂亮的、可分享的代码截图。用户可以自定义图片的样式，包括背景色、代码主题、字体样式和窗口的控制按钮等。它提供了一个简单直观的界面，让用户可以快速创建并导出高质量的代码图像。
Codeimg（https://codeimg.io/）：Codeimg 是一个相对新的在线服务，它允许用户创建具有多种自定义选项的代码图像。用户可以选择不同的语言高亮、主题风格、背景等，以获得满足个人需求和品味的代码图像。
Polacode（https://github.com/octref/polacode）：Polacode 是一个为 VS Code 编辑器设计的扩展，它允许你在编辑器内部对代码截图。使用 Polacode，你可以轻松地生成具有编辑器主题样式的代码截图。这个工具在社区中很受欢迎，因为它使得从你日常使用的开发环境中分享代码变得非常容易。
Silicon（https://github.com/Aloxaf/silicon）：Silicon 是一个可以从命令行创建美化的代码截图的工具，它是用 Rust 编写的，并且可以在多个平台上运行。Silicon 的特别之处在于它提供了很多自定义选项，包括背景颜色、主题、字体以及代码阴影等，并且它可以为代码自动添加行号和突出显示特定行。Silicon 非常适合那些喜欢从命令行工作并且需要快速生成代码截图的开发者。

1.4.4 生成代码分享链接

还可以使用代码分享平台将我们的代码生成链接供他人方便的查看和下载。

GitHubGist生成代码链接

大家可以立即访问我生成的一个 gist 代码链接：https://gist.github.com/he-weilai/f7d4fa4a97c04e1b2f2c1af990610685

在线代码分享平台（https://paste.org.cn/）：这是一个简单的中文代码分享网站，允许用户粘贴和共享代码片段。它可能提供基本的代码高亮功能，并允许用户选择片段何时过期。
GitHubGist（https://gist.github.com/）：GitHub Gist 是 GitHub 提供的代码片段托管服务，允许用户共享代码片段（称为"gists"）并跟踪其历史变化。Gist 可以是公开的，也可以是私人的，并且每个 gist 都会被当作一个 Git 仓库，这意味着其他用户可以 fork 和评论你的 gists。
Pastie（http://pastie.org/）：Pastie 是一个简单的在线工具，用于发布和共享文本片段，尤其是源代码。用户可以发布代码片段，并选择是否让其公开可见。
Pastebin（https://pastebin.com/）：Pastebin 是最早的代码片段共享服务之一，非常流行于开发者、写作者和游戏玩家。它允许用户发布和分享文本信息，并设定公开或私密的访问权限，以及设置自删除时间。
dpaste（https://dpaste.org/）：Dpaste 提供了一个简洁的接口，允许快速粘贴和分享代码片段。它支持多种编程语言的语法高亮，而且创建的片段会在一段时间后自动过期。
Zeropaste（https://paste.myconan.net/）：Zeropaste 是一个开源的代码片段共享服务，通常用于快速共享代码片段和文本。使用这个工具，用户可以设置代码片段的到期时间，并提供语法高亮功能。