wp-syntax是wp的语法高亮插件,支持包括了c、python、sql、shell、diff等等在内的大多数程序语法格式,它使用特殊的xml语句对字符串进行对应程序语言的格式化。可以在这里下载。
fckeditor for wordpress是在wordpress上使用的类微软office界面的所见即所得编辑器插件,同时可以通过修改代码定制自己的工具栏。可以在这里下载。
第一步:通过修改fckeditor的样式表文件,加入wp-syntax支持的语法格式。
wp-content/plugins/fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 | --- fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml 2008-04-24 09:54:16.000000000 +0800 +++ /var/www/wordpress/wp-content/plugins/fckeditor-for-wordpress-plugin/fckeditor/fckstyles.xml 2008-12-23 00:40:59.000000000 +0800 @@ -60,6 +60,74 @@ <Style name="Subscript" element="sub" /> <Style name="Superscript" element="sup" /> --> + <Style name="Computer Code" element="div"> + <Attribute name="class" value="cuscode" /> + </Style> + + <Style name="C" element="pre"> + <Attribute name="lang" value="cpp" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="shell" element="pre"> + <Attribute name="lang" value="bash" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="diff" element="pre"> + <Attribute name="lang" value="diff" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="python" element="pre"> + <Attribute name="lang" value="python" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="perl" element="pre"> + <Attribute name="lang" value="perl" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="php" element="pre"> + <Attribute name="lang" value="php" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="xml" element="pre"> + <Attribute name="lang" value="xml" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="javascript" element="pre"> + <Attribute name="lang" value="javascript" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="css" element="pre"> + <Attribute name="lang" value="css" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="sql" element="pre"> + <Attribute name="lang" value="sql" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="java" element="pre"> + <Attribute name="lang" value="java" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="ruby" element="pre"> + <Attribute name="lang" value="ruby" /> + <Attribute name="line" value="1" /> + </Style> + + <Style name="php" element="pre"> + <Attribute name="lang" value="php" /> + <Attribute name="line" value="1" /> + </Style> <Style name="Marker: Yellow" element="span"> <Style name="background-color" value="Yellow" /> @@ -72,7 +140,8 @@ <Style name="Small" element="small" /> <Style name="Typewriter" element="tt" /> - <Style name="Computer Code" element="code" /> + <!-- <Style name="Computer Code" element="code" />--> + <Style name="Keyboard Phrase" element="kbd" /> <Style name="Sample Text" element="samp" /> <Style name="Variable" element="var" /> |
第二步、由于fckeditor默认把html的特殊字符进行了转义,而wp-syntax不处理这些转义过的html转义符。所以需要把转义符还原为原始的字符串:
wp-content/plugins/wp-syntax/wp-syntax.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | --- wp-syntax/wp-syntax.php 2008-08-24 19:22:16.000000000 +0800 +++ /var/www/wordpress/wp-content/plugins/wp-syntax/wp-syntax.php 2008-12-27 01:05:12.000000000 +0800 @@ -68,6 +68,15 @@ { global $wp_syntax_token, $wp_syntax_matches; + //replace the escape character to origin, which has been replaced + //by fckeditor, added by mjxian + $match = str_replace("&", "&", $match); + $match = str_replace("<", "<", $match); + $match = str_replace(">", ">", $match); + $match = str_replace(""", """, $match); + $match = str_replace(">", ">", $match); + + $i = count($wp_syntax_matches); $wp_syntax_matches[$i] = $match; |
效果图:





好东东,不过字体看起来不爽,令人联想到Visual Studio
这个是网页的等宽字体monospace,浏览器默认用Courier New显示等宽的话就是VS风格三,可以自己通过浏览器来设置的哈……
谢谢啊,这个主题解决了我的问题
$match = str_replace(“”", “”", $match);
有问题啊,
应该
$match = str_replace(“\”", “\”", $match);
或
$match = str_replace(‘”‘, ‘”‘, $match);
lz大人,你错啦,应该是
$match = str_replace(“&”, “&”, $match);
$match = str_replace(“<”, “”, $match);
$match = str_replace(‘"’, ‘”‘, $match);
[...] 前几天完成了《剖析slackware pkgtools之installpkg篇》,但还没放上来。原因是发现wp-syntax的高亮有问题,然后搜啊,终于搜到这里可以把问题解决,不过lz那段php代码是有问题的,我更正如下解决问题 [...]
我原po确实是
$match = str_replace("&", "&", $match);$match = str_replace("<", "< ", $match);
$match = str_replace(">", ">", $match);
$match = str_replace(""", """, $match);
$match = str_replace(">", ">", $match);
发出来的时候这些转义符也被这几行代码给转换了,可见确实还需要继续完善。
我不知道你用的是哪个版本的wp-syntax,至少v0.9.2里面支持escaped参数了,给这个参数一个true,它自己就会把转义字符变换回去。
@calf 我在用的wp-syntax是0.9.1的,暂时还没有更新新版本。
另外我发现很多童鞋通过搜索引擎看到了我这篇文章,我要在这里说一下由于时间精力的关系,我最近没有维护我这个博客的后台程序。所以这个帖子里面的内容可能会过时或者存在不靠谱的地方。如果有的话,麻烦大家不吝留言,方便其它通过搜索引擎来参观的童鞋们参考,thx咯。