您的位置:首页 » 前端开发 » HTML+CSS » 正文

非插件实现wordpress插入php、css等代码功能

想保持系统、数据库、wordpress主题程序的纯净,不能过多使用插件。目前我的主题使用的插件不加程序自带的外只有两个:Google XML SitemapsWordPress Database Backup,前者用于实现网站地图,便于搜索引擎收录,后者主要提供网站数据库每天定时备份到指定邮箱。现在写博客了,难免会直接附上功能演示代码,尝试了wp-syntaxhighlighter,codecolorer,syntaxhighlighter等代码高亮插件,发现都不怎么好用,还要记一大堆插件自定义的代码来实现,本着简洁就是美的原则,我在使用代码时用了htmlpre标签来实现。

<pre><code>两者区别与使用

W3C定义:

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。<pre> 标签的一个常见应用就是用来表示计算机的源代码。他会保留原本的输入方式,排版规则。详细》

<code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。如果想要在严格限制为等宽字体格式的文本中显示编程代码,请使用 <pre> 标签。详细》

博客园某博主:

code标签:

1、code标签的定义: <code>标签, 用于表示计算机源代码或者其他机器可以阅读的文本内容。软件代码的编写 者习惯了编写代码时的代码格式,那么这个<code>标签就是为软件代码编写者设计的, code标签内的文本将用等宽、类似电传打字机样式的字体(Courier)显示出来。

2、code标签的应用,应该是只用在表示计算机程序源代码或者其他机器可以阅读的文本内容上。<code> 标签的功能有:将文本变成等宽字体;还有一个功能就是暗示这段文本是源程序代码。那么根据第二个功能,将来浏览器可能会根据自己的实际情况添加效果。例如,程序员的浏览器可能会寻找 <code> 片段,并执行某 些额外的文本格式化处理,如循环和条件判断语句的特殊缩进等。

pre标签:

1、pre标签的定义,<pre>标签用来定义预格式化的文本,被包围在pre标签中的文本通常会保留空格和换行符, 而文本也会呈现出等宽字体。同样,pre标签的一个常见的应用便是用来保存计算机中的源代码文本。

2、pre标签的功能,pre标签一个常见的应用便是用来保存计算机中的源代码的文本。但是,需要注意的是, 可以导致段落断开的标签(例如标题、<p> 和 <address> 标签)绝不能包含在 <pre> 所定义的块里。 pre标签允许的文本可以包括物理样式和基于内容的样式变化,还有链接、图像和水平分隔线。 当把其他标签(比如 <a> 标签)放到 <pre> 块中时,就像放在 HTML/XHTML 文档的其他部分中一样即可。

3、code标签和pre标签可以嵌套使用,但是必须注意两者的嵌套顺序为:<pre>嵌套<code>。详细》

总结:在使用代码时,请注意必须将代码的<、>、” 等符号用&lt;、&gt;、&quot;等实体名称来书写,查看具体的HTML 字符实体。举个简单的例子:在《我为什么要使用文章banner(附录相关实现代码)》这篇文章中,我就将演示代码的表现符号如“<”,“>”等使用&lt;、&gt;来代替,如:

  1. <?php if ( get_post_meta($post->ID, ‘thumbnail_value’, true) ) : ?>  

用&lt;?php if ( get_post_meta($post-&gt;ID, ‘thumbnail_value’, true) ) : ?&gt;来正确的显示代码。

让<pre>显示得更漂亮

参考效果如下。只需在css中添加如下代码即可:

  1. pre {  
  2. margin9px 0;  
  3. color#666;  
  4. backgroundurl(images/code.png) 15px 0 no-repeat;  
  5. border1px solid #DDD;  
  6. border-radius: 5px;  
  7. padding25px 15px 10px;  
  8. }  

请将code.png自行上传到您主题的imags目录下 。

更多参考:Demystifying <pre> and <code>

  • 有8,442次围观
除特别声明外, 本站所有内容皆为原创,转载时请务必以超链接形式标明文章出处和作者信息
本文最后更新于2013年6月27日,已超过 1 年没有更新,部分内容或许已经不适用,请知悉,谢谢!

分享给我的好友看看:

 

关于作者:

贡献:kouok已经在第三评发表72篇文章了,你也来试试

简介:读大学前还不懂如何用电脑下载音乐,误选计算机专业成为一枚非典型性程序员、web前端、略懂UI设计。第三评、可好网、本站创始人。欢迎关注我的微薄

Ta的专栏 | 新浪微薄 | 腾讯微薄 | 其他SNS






快捷键:Ctrl+Enter