Dec

如何在文章里嵌入代码

admin

Plugin, Wordpress Tags

beginner, howto, opensource, Plugin, tutorial

我们在写有关代码技巧的文章的时候，总会需要在文章里嵌入代码，诸如HTML, CSS, PHP, javascrip等等。如何让代码能够不执行，仅仅显示呢？很多博主应该都会遇到这个问题。

在一篇文章中，我们对代码一般会有这样两种处理方式：一类是我们在一段话中引用代码，来加以说明；另一种则是高亮显示完整的代码段。

在一段话中引用代码，我们可以用<code>和</code>把代码包括进来。
比如：如果要显示“我们今天要讨论的是index.php”，可以在编辑器里这样输入：我们今天要讨论的是<code>index.php</code>。

但如果代码里有HTML标签的话，这样仅仅用<code>和</code>还是不行的，Wordpress会解读为你在使用html标签。
比如要显示：“我们来看<div class="header">”，在编辑器里，我们必须使用字符集<来替换标签左括号，用>替换标签右括号，然后再用<code>和</code>把代码包括进来，即： <code><div class=”header”></code>。

你可以阅读WordPress官网上的这篇文章，那里有详细的解释。

以上是说明如何在一段话中引用代码。另一种情况是，我们需要单独高亮显示一整段代码段，来表达某个功能的实现方式。

使用Wordpress代码编辑插件。
以下有一些推荐的，其实每种都很好用，看个人喜好。

使用SyntaxHighlighter
SyntaxHighlighter 是一款基于javascrip的开源代码高亮显示工具。使用起来也很简单，你只需要把以下代码段copy到<head>头文件里（或者是其它你需要高亮显示代码段的任意地方），移除不需要的语言。