wordpress代码高亮

作为一个装×的技术博客,没有大段大段的代码展示怎么行?
所以,碎碎念的文章里,总是时不时出现大段大段的蚂蚁文字,简称代蚂,哦不,是“代码”。

有时候,为了让我们编写的代码可以显示得专业些,我们会用上代码高亮(http://zhuweisheng.com.cn/coderender)的工具进行渲染,让灰黑的代码瞬间变得五彩斑斓起来,可是这样也麻烦呀,大段大段的代码贴进文章不说,还添枝加叶地增加了许多div模块,还得在页面上引用对应的CSS样式表。
这个让我们都觉得很伤脑筋,其实我们仅仅是为了让代码顺眼些罢了。
嗯,其实引用代码,我们可以用<pre></pre>这个标签来展示滴,接下来就让我们用这种简单的方式来展示代码吧。

用于wordpress 文章引用代码区的标签<pre></pre>的样式。

灰红风格

pre {
background-color: #f6f6f6;
font-size: 13px;
border: 1px solid #ddd;
padding: 5px 10px;
color: rgb(173, 15, 43);
font-family: arial;
white-space: pre-wrap;
margin: 10px auto;
}

灰色背景,红色文字,文字自动断行。

黑灰风格

pre {
background-color: #333333;
font-size: 13px;
line-height: 20px;
border: 1px solid #ddd;
padding: 5px 10px;
color: #eeeeee;
font-family: arial;
white-space: pre-wrap;
margin: 10px auto;
}

黑色背景,灰色文字,黑客风格

简单的代码,就让我们的文字更加生动起来,对了,特别说明下,white-space:pre-wrap这行样式是让我们的英文单词按照单个字段自动断行的形式展示出来,妈妈再也不用担心我的文字跳出我的框框了!

NOOLDEY

本文作者:NOOLDEY

做一个诗情画意的码农,皮皮猪,我们走!

原文链接: http://zhuweisheng.com.cn/wordpress/pre-style/

本站文章如无特殊声明均为原创,创作不易,转载请注明来源,谢谢!