关于MAC代码块的碎碎念

成功示例

经过三天奋战，终于拿下了心心念念的MAC代码块，最终的效果就和下面展示的代码框一致

方法很简单，首先修改_config.yml中的代码高亮配置文件到如下样式：

# 代码高亮配置文件
highlight:
  enable: true
  line_number: true    # 是否显示行号
  tab_replace: '    '  # 如果代码中有tab，会被这个替换
  hljs:
    enable: true       # 使用 highlight.js 作为高亮库
    style: mac      # 选择一个高亮样式，可以参考 https://highlightjs.org/static/demo/

然后修改_config.butterfly.yml中的代码相关部分到如下样式：

# Code Blocks (代码相关)
# --------------------------------------

highlight_theme: mac #  darker / pale night / light / ocean / mac / mac light / false
highlight_copy: true # 复制按钮
highlight_lang: true # show the code language
highlight_shrink: false # 如果设置为 true，长代码块会默认收起，需要点击才能展开。如果设置为 false，代码块会展开显示，用户不需要点击才能查看完整代码。
highlight_height_limit: 230 # unit: px
code_word_wrap: false

探索过程及结果

起初是看到了一个MAC风格的代码块样式，就像是着了魔一样，寻寻觅觅，磕磕绊绊，磨磨唧唧地开始在网上找方法，在这期间，我用了GPT、CSDN找答案，结果都不太理想，于是一度陷入了绝望——为什么我的hexo和别人的不一样！！！到第二天晚上，功夫不负有心人，终于找到了一个HTML的代码式样，欣喜若狂，紧接着就陷入了优化的泥沼，这段时间可苦了我的GPT了，每天接受我长达10小时的拷打哈哈哈。最有竟然以一种万万没想到的方式实现了相应的功能，自惭形秽…

第一阶段成果

这是刚找到HTML代码的时候。这串代码就是MAC上面的三个圆点，可以根据需要灵活调整显示式样。底部是代码块示例。

<html>

<style>
    .mac {
        width:10px;
        height:10px;
        border-radius:5px;
        float:left;
        margin:10px 0 0 5px;
    }
    .b1 {
        background:#E0443E;
        margin-left: 10px;
    }
    .b2 { background:#DEA123; }
    .b3 { background:#1AAB29; }
    .warpper{
        background:#121212;
        border-radius:5px;
        width:785px;
    }
</style>
<div class="warpper">
    <div class="mac b1"></div>
    <div class="mac b2"></div>
    <div class="mac b3"></div>
<div>
<br>
</html>

```css
#include<iostream>
using namespace std;
int main(){
    return 0;
}
//
```

第二阶段成果

这是加了复制按键并调整代码块颜色等式样的结果。这串代码可以转化为内容是我是代码，请随意编辑的MAC代码框，缺点就是经过渲染后会导致网页的重叠，并且代码框里的内容必须是纯文本，否则会出现页面混乱，总之就是，也不太方便。

原始代码如下：

<!DOCTYPE html>
<html>
<head>
    <!-- 样式 -->
    <style>
        .mac {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            float: left;
            margin: 5px 5px 5px 1px;
        }
        .b1 {
            background: #E0443E;
            margin-left: 10px;
        }
        .b2 {
            background: #DEA123;
        }
        .b3 {
            background: #1AAB29;
        }
        .warpper {
            background: #121212;
            border-radius: 10px 10px 0 0;
            width: 786px;
            position: relative;
            padding: 6px;
            margin: 10px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        .warpper::after {
            content: "";
            display: table;
            clear: both;
        }
        /* 按钮样式 */
        .copy-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #555;
            color: #fff;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        .copy-btn:hover {
            background: #777;
        }
        /* 代码块样式 */
        #code-block {
            background: #f0f0f0;
            color: black;
            padding: 10px;
            border-radius: 5px;
            white-space: pre-wrap;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 外部框 -->
    <div class="warpper">
        <div class="mac b1"></div>
        <div class="mac b2"></div>
        <div class="mac b3"></div>
        <button class="copy-btn" onclick="copyCode()">Copy</button>
    </div>
    <!-- 代码块 -->
    <pre id="code-block">
        #include<iostream>
        using namespace std;

        int main() {
            cout << "Hello World!" << endl;
            return 0;
        }
    </pre>

    脚本
    <script>
        function copyCode() {
            const code = document.getElementById("code-block").innerText;
            navigator.clipboard.writeText(code).then(() => {
                alert("代码已复制到剪贴板！");
            }).catch(err => {
                alert("复制失败：" + err);
            });
        }
    </script>
</body>
</html>