返回

让你的掘金代码块脱颖而出：一个 CSS 皮肤指南

前端

前言

掘金作为程序员的知识宝库，代码块是分享代码和技术见解不可或缺的一部分。然而，掘金默认的代码块样式可能有点乏味，无法充分展现你的代码风格和个性。

准备工作

在我们开始之前，你需要：

  • 一个掘金账户
  • 一个文本编辑器
  • 一些基本的 CSS 知识

让代码块焕发生机

1. 复制功能

首先，让我们让代码块变得更加实用。添加一个复制按钮，让读者可以轻松地复制代码：

.markdown-body .viewer-code .code-copy-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  padding: 0 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #333;
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.markdown-body .viewer-code .code-copy-btn:hover {
  background-color: #efefef;
}

2. 调整高亮颜色

默认的高亮颜色可能并不总是能满足你的喜好。通过更改 color 和 background-color 属性，你可以让代码块更符合你的品味：

.markdown-body .viewer-code .CodeMirror {
  color: #000;
  background-color: #f5f5f5;
}

3. 自选字体

除了颜色，字体也可以自定义。选择一种与你的网站或品牌一致的字体，让你的代码块更加与众不同：

.markdown-body .viewer-code .CodeMirror {
  font-family: 'Courier New', Courier, monospace;
}

4. 添加边框和阴影

为了让代码块更加突出，可以添加边框和阴影：

.markdown-body .viewer-code {
  border: 1px solid #ccc;
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.2);
}

5. 自创主题

如果你想更进一步，你可以创建自己的主题。将上述所有 CSS 片段组合到一个文件中，然后将其上传到掘金的主题设置中：

/* 你的主题文件 */

结语

现在，你的掘金代码块焕然一新，不仅美观，还非常实用。通过自定义皮肤，你可以让你的代码块在人群中脱颖而出，并为读者提供更好的阅读体验。

无论你是想添加复制功能、调整高亮颜色还是自创主题，这篇指南都提供了你所需的信息和示例代码。尽情发挥你的创造力，让你的掘金代码块成为你技术文章的明星吧！