× 442字 × 4阅

用 pre/code 武装代码

我以前也折腾代码,但毕竟是门外汉,对于写博客也没有那么多要求,所以都是用 <blockquote> 来装代码。后来学了点 html,知道它是用来引用的,又“偷看”了别人装代码的代码,用的是 <pre><code>。再后来我找到一篇文章Code Boxes with <pre> and CSS,体会到装代码的精髓:短用 <code> 长用 <pre>。于是随着搬博客要整理博文,干脆把之前的代码都“规范化”。博文已经整理了一半,可以看到教程贴里的大部分代码现在都非常“赏心悦目”,可读性也得到了保障,复制起来腰不酸了,腿不疼了,粘贴也有劲儿了!

以我多时“借鉴”他人 CSS 的经验,现归纳总结为如下武装代码:

pre {
background: #f8f8f8;
font: 14px "Courier 10 Pitch", Courier, monospace;
line-height: 1.5;
overflow: auto;
padding: 10px 15px;
margin: 15px 0;
}
code {
font-family: Monaco,Consolas,"Droid Sans Mono",Courier,monospace;
font-size: 14px;
background: #f8f8f8;
padding: 4px;
}
pre code {
padding: 0;
}

这个 pre code 真的是我的至宝。如果没有这个 pre codepadding: 0; 的设置,那么在长代码(也就是使用 <pre><code> )的时候,第一行会有缩进(code 底下的 padding: 4px;)。

这次搬博客对我来说非常重要,不仅从修改主题升级到制作主题,甚至准备在日后写一个通用的简单模板提供给其他喜欢制作主题的新手 DIY,就像 WP 的 Sandbox。而且之前薄弱的 html 和 css 知识也算加固了不少,虽然 css 还没有学完,但理解真的加深不少。

2013-07-26补充:为了加载速度,我将 js 代码写入博客自带的 widget 中了。这样一来 template 也短了不少。但是 css 还是只能原地不动。 Lightbox,通俗点来解释就是点击带链接的图片后,不是打开新窗口,而是在原有页面上弹出一个窗口显示图片。这对于用户来说是很好的体验,不需要返回原页面或者关掉新页面等大幅度移动鼠标的动作。而随着 Lightbox 的广泛被使用,功能也相应增多,比如带有描述文字、上一张下一张按钮、幻灯片功能、分享按钮等等。说来心痛,其实 Blogger 自带 Lightbox 功能的,而且还有缩略图导航,要不是那个什么,也不需要把 Blogger 的 js 注释掉,这个功能就不会没作用了。现在只好转向外援,好在各路大神们提供了不少方法,今天我就介绍一下几种主流的和本博现在安装的 Lightbox。 jQuery lightBox plugin 我记得我第一次看到的 Lightbox 好像就是这个,对其 UI 还有种亲切感。官网上的介绍非常详细,示例、安装方法、自定义修改等等仔细看看都没有太大问题。最大的问题就......
点击加载Disqus评论