把WP-GeSHi-Highlight代码高亮插件集成到wordpress文本编辑器

文章目录[隐藏]

511遇见 是基于Bootstrap框架的wordpress网站，代码高亮插件使用了WP-GeSHi-Highlight插件，但每次在文本编辑模式下我们都要根据代码类型插入pre，非常的不方便，很影响我们的编辑效率，所以我们自己动手给我们的编辑器附加一些常用功能。

以上图片是我编辑器使用的快捷按钮，在编辑文章代码时不用再手动输入标签，显得十分方便。先分享一下代码：

* wordpress编辑器自定义WP-GeSHi-Highlight快捷标签按钮

add_action('admin_print_footer_scripts','eg_quicktags');

 <script type="text/javascript" charset="utf-8">

QTags.addButton( 'eg_pre', 'pre', ' <pre>\n\n </pre>', '', 'q' );

QTags.addButton( 'css_pre', 'pre-css', ' <pre lang="css" line="1" escaped="true">\n\n </pre>', '', 'c' );

QTags.addButton( 'phs_pre', 'pre-php', ' <pre lang="php" line="1" escaped="true">\n\n </pre>', '', 'p' );

QTags.addButton( 'html_pre', 'pre-html', ' <pre lang="html" line="1" escaped="true">\n\n </pre>', '', 'h' );

QTags.addButton( 'js_pre', 'pre-js', ' <pre lang="JavaScript" line="1" escaped="true">\n\n </pre>', '', 'js' );

QTags.addButton( 'p_p', 'p-zhy', ' <p class="alert alert-info" role="alert"> <strong>xxx  </strong> ......  </p>', '', 'zy' );

QTags.addButton( 'h_3', 'h-3', ' <h3 class="text-primary"> <strong> xxx  </strong></h3>', '', 'h3' );

1、QTags.addButton( );

QTags.addButton( '', '', '', '' );

【四对引号，分别表示按钮的ID、按钮显示名、点一下输入内容、再点一下关闭内容（最后一对引号为空则一次输入全部内容），\n表示换行】

QTags.addButton( '按钮ID', '按钮显示名', '点一下输入内容', '点一下关闭内容' );

可以自定义添加多行 QTags.addButton( ); 增加多个按钮！

2、ID必须不同，显示名称随便起个有意义的。

3、代码放在functions.php文件中，建议后面。

4、本站使用个WP是4.5.3完全兼容通过。

5、你如果使用的代码高亮插件是WP-GeSHi-Highlight，下面可以省略：

（1）pre-css点击插入代码效果

 <pre lang="css" line="1" escaped="true">

（2）pre-php点击插入代码效果

 <pre lang="php" line="1" escaped="true">

（3）pre-html点击插入代码效果

 <pre lang="html" line="1" escaped="true">

（4）pre-js点击插入代码效果

 <pre lang="JavaScript" line="1" escaped="true">

为了输入代码方便，我们加入了空格，以上效果都是格式化后的效果，如果你对本站的代码高亮插件的样式感兴趣，建议阅读

由于本站基于Bootstrap所有其他都是Bootstrap集成的功能，你可以根据自己的需要添加自己最常用的代码插入按钮，方便自己在文本模式下编辑。

511遇见