潘少宁的博客

Google Syntax Highlighter 与WordPress的兼容性

Google Syntax Highlighter 与 tinyMCE  的兼容性

当我们在WordPress中写日志，要插入一段php代码的时候，在HTML视图下，可以如下

<pre name="code" class="php">

code....

</pre>

但当我们恢复到可视化的时候，代码就会变成

<pre  class="php">

code....

</pre>

此时， Google Syntax Highlighter 便识别不出来了。

因为 Google Syntax Highlighter 是通过 pre的 name 熟悉来识别的。

出现这样的情况，是因为 WordPress 采用的 tinyMCE 编辑器。而 tinyMCE编辑器默认 给 pre 没有添加 name 属性。

所以，我们只需要更改下 tinyMCE的初始化部分的代码即可。

在 wp-admin/includes/post.php 里面

找到如下代码

$initArray = array (
		'mode' => 'specific_textareas',
		'editor_selector' => 'theEditor',
		'width' => '100%',
		'theme' => 'advanced',
		'skin' => 'wp_theme',
		'theme_advanced_buttons1' => "$mce_buttons",
		'theme_advanced_buttons2' => "$mce_buttons_2",
		'theme_advanced_buttons3' => "$mce_buttons_3",
		'theme_advanced_buttons4' => "$mce_buttons_4",
		'language' => "$mce_locale",
		'spellchecker_languages' => "$mce_spellchecker_languages",
		'theme_advanced_toolbar_location' => 'top',
		'theme_advanced_toolbar_align' => 'left',
		'theme_advanced_statusbar_location' => 'bottom',
		'theme_advanced_resizing' => true,
		'theme_advanced_resize_horizontal' => false,
		'dialog_type' => 'modal',
		'relative_urls' => false,
		'remove_script_host' => false,
		'convert_urls' => false,
		'apply_source_formatting' => false,
		'remove_linebreaks' => true,
		'gecko_spellcheck' => true,
		'entities' => '38,amp,60,lt,62,gt',
		'accessibility_focus' => true,
		'tabfocus_elements' => 'major-publishing-actions',
		'media_strict' => false,
		'paste_remove_styles' => true,
		'paste_remove_spans' => true,
		'paste_strip_class_attributes' => 'all',
		'wpeditimage_disable_captions' => $no_captions,
		'plugins' => "$plugins"
	);

这个 $initArray 变量就是用来初始化 tinyMCE的。我们只需要给其添加上一个变量 即可：

‘extended_valid_elements’ => “pre[name|class]”

添加后 的完整代码如下：

$initArray = array (
		'mode' => 'specific_textareas',
		'editor_selector' => 'theEditor',
		'width' => '100%',
		'theme' => 'advanced',
		'skin' => 'wp_theme',
		'theme_advanced_buttons1' => "$mce_buttons",
		'theme_advanced_buttons2' => "$mce_buttons_2",
		'theme_advanced_buttons3' => "$mce_buttons_3",
		'theme_advanced_buttons4' => "$mce_buttons_4",
		'language' => "$mce_locale",
		'spellchecker_languages' => "$mce_spellchecker_languages",
		'theme_advanced_toolbar_location' => 'top',
		'theme_advanced_toolbar_align' => 'left',
		'theme_advanced_statusbar_location' => 'bottom',
		'theme_advanced_resizing' => true,
		'theme_advanced_resize_horizontal' => false,
		'dialog_type' => 'modal',
		'relative_urls' => false,
		'remove_script_host' => false,
		'convert_urls' => false,
		'apply_source_formatting' => false,
		'remove_linebreaks' => true,
		'gecko_spellcheck' => true,
		'entities' => '38,amp,60,lt,62,gt',
		'accessibility_focus' => true,
		'tabfocus_elements' => 'major-publishing-actions',
		'media_strict' => false,
		'paste_remove_styles' => true,
		'paste_remove_spans' => true,
		'paste_strip_class_attributes' => 'all',
		'wpeditimage_disable_captions' => $no_captions,
		'plugins' => "$plugins",
		'extended_valid_elements' => "pre[name|class]"
	);

保存后 再试试吧。
Google Syntax Highlighter 就与WordPress完美兼容了。
Google Syntax Highlighter 就与tinyMCE完美兼容了。