如果不使用 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
}
```
评论
发表评论