编辑“WordPress:Writing Code in Your Posts”

__TOC__
不管你是为WordPress写[[WordPress:Plugins|插件]]或者[[WordPress:Glossary#Hack|插件]]，还是你想为你自己的WordPress站点或者其它的像[[WordPress:Glossary#HTML|HTML]], [[WordPress:Glossary#CSS|CSS]], [[WordPress:Glossary#PHP|PHP]], 或者[[WordPress:Glossary#JavaScript|javascripts]]，[http://en.wikipedia.org/wiki/Code_%28computer_programming%29 编程代码]添加一些代码，把代码放进你的[[WordPress:Writing Posts|文章]]，"看起来"像代码，但"不表现得"像代码，对于写博客的人来说，这是一个时常发生的挑战。

默认情况下，WordPress会将不能被识别使用< and >转变为字符，这些字符事实上看起来像<tt><nowiki>&amp;lt;</nowiki></tt> 和 <tt><nowiki>&amp;gt;</nowiki></tt>,当发表时，这些字符"看起来"像a < and a >。或者，如果它发现了文章中使用了一个[http://en.wikipedia.org/wiki/HTML_element HTML 标签]，它就会像使用HTML那样使用这个标签，你的文本看起来混乱，布局也混乱了。

一般来说，一个网页内部使用两种代码。一个段落</tt>内部发现的<tt>代码，弥补正在被讨论的<tt>code</tt>，然后一段代码被突出来。

<pre>以这种方式看起来就像一框代码</pre>

==段落内部的代码==
有两个HTML标签会将文本转变为<tt>monospaced type</tt>。这两个标签是<tt>&lt;code&gt;</tt> 和 <tt>&lt;tt&gt;</tt>。后一个标签如今已经很少使用了，已经被更有用的，语法更加正确的<tt>&lt;code&gt;</tt>代替了，这个标签可以将计算机代码的文本与正常的语言区别开来。

<pre>这个是在一个段落内使用的代码的例子谈论的是WordPress中的<code>index.php</code>, 
<code>sidebar.php</code>, 和 <code>header.php</code> 
的模板文件。</pre>

这对于那些你想让它们看起来像代码的单词的周围使用标签非常的好，但是对于那些你想要显示的HTML'''标签'''，你该怎么做呢？

<pre>在 <code>header.php</code>模板文件, 
查找 <code><div class="header"></code> 
部分并且更改 <code><h1></code> heading.</pre>

使用<tt>&lt;code&gt;</tt>标签，不要让WordPress从文章中清除HTML参考资料。它看到了<tt>&lt;code&gt;</tt>标签，然后看到了<tt>div</tt>，通过在你的网页上创建一个新的container,它做出了反应。WordPress认为你正在使用HTML标签，开始一个<tt>h1</tt>标签会破坏你整个的网页布局和设计。

<div style="border:1px solid #CCCCFF; margin:10px 20px; padding:20px">
在 <tt>header.php</tt> 模板文件中, 查找<br /><br />[[WordPress:Image:leaf.gif|left]]<span style="font-size:200%; color:blue">部分来改变</span> <span style="font-size:400%; color:#52A300">标签。</span></div>

要使WordPress将这个辨别为一个段落中的代码，使用[[WordPress:Fun_Character_Entities|字符实体或者扩展的字符]]来代表左右箭头符号，并用<tt>&lt;code&gt;</tt>标签将它们包围。
<pre>在<code>header.php</code> 模板文件, 
查找 <code>&amp;lt;div class="header"&amp;gt;</code> 
部分来更改 <code>&amp;lt;h1&amp;gt;</code> 标题。</pre>

默认的情况下，WordPress会将文本中任何以<tt>http:</tt>开始的短语变为一个链接。如果你给出的例子是怎样链接到WordPress站点内部的某一篇文章，而不是使用<tt><nowiki>http://example.com/index.php?p=453</nowiki></tt>链接并且使它变为一个链接，你可以为斜线使用一个扩展的字符，这样WordPress就不能"看见到"链接。
<pre>
...链接到某一篇WordPress文章,使用 
<code>http:&amp;#47;&amp;#47;example.com&amp;#47;index.php?p=453</code>
到你的文章....
</pre>

以下是一些最常见的HTML字符实体:
<pre>< = &amp;lt;
> = &amp;gt;
/ = &amp;#47;  	
] = &amp;#93;
[ = &amp;#91;
" = &amp;#34;
' = &amp;#39;</pre>

有一个[[#WordPress:Resources|下面的资源]]列表,这个列表会帮助你自动地将HTML标签变为字符实体,因此你不需要记住这些字符代码。

==使用PRE==

将你的代码放在一边，这样它看起来就像一盒代码，会在另一个代码或者模板文件内部复制和粘贴，你可以使用<tt>&lt;pre&gt;</tt> HTML标签。  

<tt>&lt;pre&gt;</tt>标签指示浏览器使用monospace代码字体，但是'''完全的复制'''<tt>&lt;pre&gt;</tt>标签中的内容。每一个空格，行的切分，每个小的代码都要被完全的复制。

<pre><h3>第三部分标题</h3>
<p>这是一篇你我之间
<a title="关于人际关系的文章" href="goodtalk.php">
好的关系</a> 开始</pre>

使用<tt>&lt;pre&gt;</tt>标签不是非常地"漂亮"，但是它的确能起作用。在下一个部分中可以找到怎样设计它的例子。它依然'''完全地'''显示代码。

'''完全地'''，我们指的是完全地。如果你有一长行的代码，代码会在页面上长长地显示出来，因为没有''指示''命令代码叠起来。代码就不会累迭。下面有一个例子：

<pre><h3>第三部分标题</h3><p>这是一个<a title="关于人际关系"的开始，你和我之间href="goodtalk.php">好的关系</a>，我认为你应该阅读，因为我们有这些小的<a title="关于交流的文章"非常重要，href="communication.php">conversations</a>一会儿一次谈话，以让双方知道对方的感受。

不漂亮，的确如此。为了避免这种满屏幕的代码，将这些行分开。不幸的是，当你显示这些即将要被复制的代码的时候，很难决定在那儿给这些行分开。

如果你对程序语言非常熟悉，你就知道在什么位置将一行分开，不会混乱一行的代码，那么你就选择那个位置。如果你熟悉在哪儿分行，你就试一下。将代码放进去，将行分开，然后再测试代码。如果这样做管用，就在那儿分行。如果这样做不管用，改变分行的位置。如果你有长行的代码，考虑一下只显示摘录部分，并且提供一个对于放置在你的站点中的一个文本或者<tt>PHPS</tt>文件中的全部代码的链接，或者使用许多的[[WordPress:Writing_Code_in_Your_Posts#Pastebins|在线的pastebins]]的其中的一个，可以利用这个来临时地显示代码。 

==发现并解决代码问题==

在WordPress文章内部写代码会是一个挑战，越过"规定"我们所写内容的WordPress默认形式和过滤器。如果你在你的WordPress文章内部写代码时，遇到了困难，以下的可能会帮助你。

===代码中的引号===

在你的文章中使用代码的一个常见的问题在于WordPress"设计"引号的方法。不是看到'''&#34;'''quotes'''&#34;''',默认情况下，WordPress将引号''定为''打开的和关闭的引号，就如许多文章处理程序中使用的引号那样。需要复制的代码需要有直引号，而不是漂亮的引号。

通过使用<tt>&lt;pre&gt;</tt>标签，或者通过真的使使用的引号包含一个字符代码，你可以避免这个问题：

<pre><p class="red">

变成了
<code>&amp;lt;p class=&amp;#34;red&amp;#34;&amp;gt;</code></pre>

不幸地是，如果你发表网页之后，编辑一个网页，html代码编辑器用它们的字面上的等价物取代了所有的这些实体，因此，例如，如果你为你的引号谨慎地使用了&amp;#34;它们返回时，会回到原来样子"，当你保存它们时，它们就会转变形式。

==设计你的代码标签==

默认情况下，使用<tt>&lt;pre&gt;</tt> and <tt>&lt;code&gt;</tt>会使文本出现一个monospaced字体，并且从body tag中使用字体大小。如果你想要不同的字体大小，而且这些标签的外观也有不同的颜色和形式，那么你该怎么做呢？

在你的WordPress主题文件夹中你的<tt>style.css</tt>样式表上，给这两个标签添加形式。下面是一个例子：

<pre>pre {border: solid 1px blue;
	font-size: 1.3 em; 
 	color: blue; 
	margin: 10px; 
	padding:10px; 
	background: #FFFFB3}
code {font-size:1.2em; 
	color: #008099}</pre>

使用<tt><span style="font-size:105%; color:#008099">&lt;code&gt;</span></tt>会看起来像那个，先前的看起来会像这个：


<div style="border: solid 1px blue; font-size: 1.3 em; color: blue; margin: 10px; padding:10px; background: #FFFFB3"><tt>pre {border: solid 1px blue;<br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1.3 em; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: blue; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin: 10px; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;padding:10px; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background: #FFFFB3}<br />
code {font-size:1.2em; <br />
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;color: #008099}</tt></div>

==资源==
* [[WordPress:Fun Character Entities|有趣的字符实体]]
* [http://wordpress.org/resources/tools/encode.php WordPress 资源工具编码]
* [http://www.tamba2.org.uk/files/simplecode.php Tamba2的简单的代码转换器]
* [http://www.onlinetools.org/tools/htmlizerdata/ HTMLizer 数据]

===频繁使用代码的用户===

如果你在文章中总是使用许多的公式，函数，和程序代码，考虑使用一个插件或者PHP工具使整个的过程更加地简单。如果你有粘贴许多的代码块的倾向，考虑一下在一个粘贴板上粘贴代码，并且将代码链接到你的站点上。

* [http://redalt.com/downloads/ Code Filter WordPress Plugin - Auto-converts < and > inside of <tt>&lt;code&gt;</tt>]

* [http://www.coffee2code.com/archives/2005/03/29/plugin-preserve-code-formatting/ Coffee2code's 保存代码格式 WordPress 插件]

* [http://blog.netnerds.net/quickcode/ QuickCode WordPress 插件] – 隐藏/不隐藏有固定格式的代码块。

* [http://redalt.com/downloads/ MathML 嵌入]

* [http://www.jcphysics.com/ASCIIMath/ ASCIIMath Markups]

* [http://www1.chapman.edu/~jipsen/mathml/asciimath.html 使用ASCIIMath]

* [http://www.latex-project.org/ LaTex –一个文件准备系统]

* [http://sixthform.info/steve/wordpress/index.php?cat=2 在WordPress中使用LaTeX]

* [http://www.chris-lamb.co.uk/code/figurerender/ FigureRender] – 另一个 LaTeX rendering 插件

*[http://www.embeddedcomponents.com/blogs/2007/05/how-to-build-dean-lees-syntax-highlighter-from-latest-components/ 怎样创建 Dean Lee的插件] – 一个关于 GeSHi 的插件- Generic Syntax Highlighter


===粘贴板===

* [http://www.pastebin.com/ Pastebin.com]
* [http://pastebin.co.uk/ Pastebin.co.uk]
* [http://paste.uni.cc/ Paste.uni.cc]


===PasteServers===
* [http://www.pasteserver.net/ PasteServer.net]