Backend Setting
In Blogger backend
Theme - Edit HTML
Add JS script below
```
<script src='https://cdn.jsdelivr.net/npm/marked/marked.min.js'/>
<script src='https://crazypeace.github.io/blogger-replace-markdown-text-html/blogger-replace-markdown-text-html.js'/>
<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/pre-code-copy-button.js'/>
```
Find the end of CSS section (by searching 'skin'),
Then add CSS below
```
/* 代码的字体 */
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
}
```
Save
评论
发表评论