为Blogger添加引用和代码引用功能
这个其实不是一个很必要的功能,不过却可以让我们的文章更整齐。
其实Blogger本身就有引用的功能了,不过其实不是说很好看,也不够明显。而至于代码引用,Blogger本身也没有刻意区分出来。
添加方法其实很简单,只是添加两段CSS代码而已。
其实Blogger本身就有引用的功能了,不过其实不是说很好看,也不够明显。而至于代码引用,Blogger本身也没有刻意区分出来。
添加方法其实很简单,只是添加两段CSS代码而已。
方法如下:
进一步查看我的其它网站
1. Blogger后台——设计——修改HTML,然后记得备份模板。
2. 在]]></b:skin>之前添加以下代码:
/* 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: #F5F8E8 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibw9JTyMmJDE2atp9muyoPE5m13JGlGhYe4WFMpItZjcz-A_WFXZHc1mLDPj8SLd6l-sMn0PvjrR0gAU-YpNdqLuFGNt7yB3zvx0lplfbciMABZS36AGYBg4APLh2yGzMvHJPWuIXU0Wc/) no-repeat;border-Left:2px solid #D0EC98;border-right:2px solid #D0EC98;background-position: left top;
}
红色那两段是图片的链接,你也可以使用你自己喜欢的图片,不过请重新上传到自己的空间。
3. 保存。
4. 以后只要是引用的话,便把引用的话放在<blockquote>及</blockquote>,代码引用则放在<code>及</code>之间就行了。
例子:
<blockquote>引用文字</blockquote>
<code>引用代码</code>
进一步查看我的其它网站
这个方法比较管用。
回复删除我的方案是用JS把 blockquote 转换为 pre. 当然, 同样的思路, 转换为 code 也是一样的.
回复删除然后就可以用各种代码美化方案了.
https://zelikk.blogspot.com/2024/05/blogspot-code-prettify.html
update
回复删除现在我添加了copy按钮
https://zelikk.blogspot.com/2024/06/blogspot-code-prism-hightlight-blockquote.html
https://zelikk.blogspot.com/2024/06/blogspot-blockquote-copy-button.html