如果不使用 highlight.js 的代码高亮方案 那么可以添加 copy 按钮

前面的 script 段添加

<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/pre-code-copy-button.js'/>

注意script的顺序
要先把markdown转换为HTML
你的页面上才有 pre code 的元素
然后再给 pre code 添加 copy 按钮

后面的 CSS 段(通过查找 skin 找到位置)添加

/* 代码的字体 */
code {
    font-family: "Source Code Pro", Menlo, Monaco, Consolas, "Courier New", monospace !important;
}

/* 代码块的样式 */
code {
    background-color: whitesmoke;
    border-radius: 0px;
    border: 1px solid rgb(204, 204, 204);
    box-sizing: border-box;
    color: #333333;
    line-height: 1.42857 !important;
    padding: 10px;
    margin: 10px;
    overflow-x: auto;
    display: block;
}

/* 复制按钮 */
/* https://yihui.org/en/2023/09/copy-button/ */
/* https://cdn.jsdelivr.net/npm/@xiee/utils/css/copy-button.min.css */
.copy-button {
    position: absolute;
    display: none;
    cursor: pointer;
    inset: 5px 15px auto auto;
    width: 1em;
    height: 1em;
    border: 1px solid;
    box-shadow: -3px 3px #999
}
:hover>.copy-button {
    display: inline-block
}
.copy-success {
    box-shadow: none;
    background-color: #999;
    transition: box-shadow .3s ease-out,background-color .3s ease-out
}
.copy-fail {
    border-style: dotted
}

评论

此博客中的热门博文

本文内容为 markdown 文本

后台设置说明