原来的样子

左上角三个圆点，右边一个大写加粗的语言名，还带一圈投影。做演示截图够用，放在正经文章里太吵。

highlight_theme: mac 关掉的只是配色，那三个圆点是写死在 CSS 里的。

圆点不是三个 div

是一个伪元素，用 box-shadow 投出来的：

#article-container figure.highlight .highlight-tools:after {
  position: absolute;
  left: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fc625d;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  content: ' ';
}

一个红点靠 box-shadow 投出黄绿两个。所以关掉就是让它没有内容：

#article-container figure.highlight .highlight-tools:after {
  content: none;
}

语言标签的位置是写死的

.code-lang 是绝对定位，mac 模式下 left: 75px——正好给那三个圆点让位。圆点删了之后它还杵在 75px，得一起改。

顺手从 absolute 改成 static。工具条本来就是 flex，改完自然靠左，不用再算偏移：

#article-container figure.highlight .highlight-tools .code-lang {
  position: static;
  left: auto;
  padding-left: 9px;
  border-left: 2px solid #49b1f5;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
  text-transform: none;
  color: rgba(255,255,255,.42);
}

大写改回小写，去掉加粗，前面补一条短竖线。

卡片和工具条

#article-container figure.highlight {
  margin: 0 0 26px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 10px 24px -14px rgba(16,24,40,.15);
}

#article-container figure.highlight .highlight-tools {
  height: 34px;
  min-height: 34px;
  padding: 0 14px;
  background: transparent;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

工具条背景透明，只留一条 1px 的分隔线。

底部那个 8px

pre 的 padding 我一开始上下都给 15px，结果每个块底部都空出一大截，怎么调都对不齐。

原因是 hexo 输出的每一行后面都跟一个 <br>，最后一行也不例外，等于凭空多了个空行：

<span class="line">docker search svn</span><br>
<span class="line"></span><br>
<span class="line">docker pull xxx</span><br>   ← 末尾这个

所以底部写 8px 就够了，多出来的空间是那个 <br> 撑的。

颜色不要跟主题走

主题的代码块底色在浅色和深色页面下都是深色（#212121 / #171717）。所以标签和按钮的文字颜色不能跟着页面主题走，否则浅色模式下变成深灰压深灰，基本看不见。

这两处我直接写死成浅色，只有卡片的边框和投影用了 [data-theme="dark"] 做区分。

放在哪

全部追加在 source/css/cyk.css 末尾，通过 _config.butterfly.yml 的 inject.head 引进来：

inject:
  head:
    - <link rel="stylesheet" href="/css/cyk.css" media="defer" onload="this.media='all'">

主题目录一个字没动，以后升级主题不会冲突。