一如既往,我在网络上一直寻找更好用的code使用方法,在blockquote的基础上找到更多的功能。
于是我找到了。
我删除了了footer中的JS小工具。并在CSS中增加了code的外观
从一位博主的贴文中,找到了修改blockquote和code外观的代码。于是我把该博主的代码无脑放在了原CSS代码的前面,刷新,通过。
然后我把blockquote外观的图片链接删除掉了。相比来说我更喜欢通过修改background颜色进行区分,图片堪称鸡肋,或许对加载也有影响。
我对此总结以下所有需要添加的代码
在HTML中的</head>前面我增加了以下内容
<script src='https://crazypeace.github.io/blogger-replace-blockquote-to-pre/blockquote-add-copy-button.js'/>
在CSS中我增加了以下内容
/* Code And Blockquote
----------------------------------------------- */
CODE {
display: block; /* fixes a strange ie margin bug */
font-family: Courier New;
font-size: 8pt;
overflow:auto;
background: #f0f0f0 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzy9JxC4opvhqrjZXvYMIaKyAGb9fe9O5v8FuyfqrJcv_6aUpaG-djnj1jKqU2oRKXtx5FveWr08St5ufi9CT2PdbqJbYg29eYPWBU1dr9Cyyj4ncGTDpa_bFxer5RXcCxvdr0E8iCFmY/) left top repeat-y;
border: 1px solid #ccc;
padding: 10px 10px 10px 21px;
max-height:200px;
line-height: 1.2em;
}
.post blockquote {margin:1em 20px;padding-left:8px;background: #babfc4
}
.copy-button {
position: absolute;
display: none;
cursor: pointer;
inset: 5px 5px 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: #ff5768;
transition: box-shadow .3s ease-out,background-color .3s ease-out
}
.copy-fail {
border-style: dotted
}
pre, pre:hover {
white-space: pre-wrap;
word-break: break-all;
}
pre code {
display: block;
overflow-x: auto;
}
@media only screen and (min-width: 992px) {
pre { white-space: pre; }
}
因为code模块依旧没有相应的复制按钮,在使用输入需要使用的脚本代码,我在Blogger中将一直使用Blogger的引用,同时我舍弃了刚刚试用不久的markdown工具StackEdit。
这些功能对博客来说,已经非常够用了。
以下为增加模块的参考网站