您现在的位置是：首页 > cms教程 > WordPress教程WordPress教程

wordpress代码高亮的实现方法

易梦2025-03-16 22:54:54WordPress教程已有11人查阅

导读作为一个程序员，发一些程序开发相关的博文是在所难免的。插入高亮代码可以使文章更加清晰美观。但是wordpress并不支持之一功能。于是选择了SyntaxHighlighter Evolved插件。

作为一个程序员，发一些程序开发相关的博文是在所难免的。插入高亮代码可以使文章更加清晰美观。但是wordpress并不支持之一功能。于是选择了SyntaxHighlighter Evolved插件。
SyntaxHighlighter Evolved是基于SyntaxHighlighter JavaScript package开发的。在这儿我们可以看到，该插件支持’applescript , ‘actionscript3 as3 , ‘bash shell , ‘coldfusion cf , ‘cpp c , ‘c# c-sharp csharp, ‘css , ‘delphi pascal , ‘diff patch pas, ‘erl erlang, ‘groov , ‘java, ‘jfx javafx, ‘js jscript javascript , ‘perl pl’, ‘php , ‘text plain , ‘py python ‘, ‘ruby rails ror rb , ‘sass scss , ‘scala , ‘sql , ‘vb vbnet , ‘xml xhtml xslt html文件，可以满足我们大多数的需要。另外，这个插件的工具栏是一个比较好的特色，提供查看、复制、打印、帮助功能，这一功能需设置Highlighter Version为2.x。下面看一下效果。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// .w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http:// .w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>PHP Code Example</title></head>
<body>
<h1>PHP Code Example</h1> <p><?php echo 'Hello World!'; ?></p>
<p>This line is highlighted.</p>
<div class="foobar"> This is an example of smart tabs. </div>
<p><a href="http://wordpress.org/">WordPress</a>
</p>
</body>
</html>

也许有人会觉得用插件如果有一天更换插件以前的文章代码就彻底乱了，所以会想去采用不用插件实现的方式。这里提供一种直接在html中插入css来实现的方法，登录发芽网在线代码高亮转换网站，把要插入的代码转换成HTML，插入文章就可以啦。下面给出不用插件的效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// .w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<htmlxmlns="http:// .w3.org/1999/xhtml"xml:lang="en"lang="en"><head>
<metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
<title>PHP Code Example</title></head><body><h1>PHP Code Example</h1>
<p><?php echo 'Hello World!'; ?></p><p>This line is highlighted.</p>
<divclass="foobar"> This is an example of smart tabs.</div><p><ahref="http://wordpress.org/">WordPress</a>
</p>
</body>
</html>