如何在wordpress粘贴代码时显示为类似代码编辑器样式的方法

今天共享一个在博客中共享一段代码显示为类似代码编辑器的样式的方法?我经常会在博客中共享一段代码,但是之前刚用wordpress都是直接在文本上粘贴代码,显示的效果也是和文本一样,很是难看。昨晚上网找了一下不用插件就能实现粘贴代码时显示为类似代码编辑器样式的方法,所以现在整理一下共享出来。
下载一个本地本地转换代码高亮显示的小工具:CodeRenderUnmi
本程序是基于 dp.SyntaxHighlighter 写的代码语法着色的工具。支持的语言有:java/xml/sql/jscript/css/cpp/c#/python/vb/perl/php/ruby/delphi。
可方便用于你的博客中粘贴代码,只要自定相应的样式 (highlight.css 的内容,.Text 支持自定义样式或在模板里加上语法样式),然后复制用这个工具生成的 HTML 代码就能让你的代码着高亮显示。
首先:把下载的CodeRender压缩包中的highlight.css上传到所使用主题目录中:theme/xx主题 下。
其次:在head.php中找到:

Code   ViewCopyPrint
  1. <style type="text/css" media="screen">@import url(<?php bloginfo('stylesheet_url'); ?>);</style>

然后在这个后面添加,如下代码:

Code   ViewCopyPrint
  1. <link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/highlight.css" />

添加个代码的作用是这个highlighter.csss样式中定义了各种语言的代码显示高亮,还定义了代码框的样式。如果你把这个样式中的内容直接copy到style.css样式中的话就可以不用添加段代码。
最后,把你需要显示的代码,输入到CodeRender的source code代码框中,选择好相应的语言,点击render,在HTML CODE框中就可以看到相应转换的HTML代码,同时你也可以在HTML PREVIEW框中预览到相应代码。
接着就可以点击HTML CODE的copy按钮把代码copy到日志编辑窗口,注意要选择HTML编辑模式,不能用可视化模式,否则会无效。
这样博客就实现了在wordpress粘贴代码时显示为类似代码编辑器样式,这种方法还不错,反正最好是可以不用插件就尽量不用。插件多了会影响服务器性能。

weinxin
DC Farm小程序二维码
扫一扫添加博客小程序
Jim

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  2   博主  2

    • avatar v3 3

      我是直接用插件的

      • 激劉勇靖 激劉勇靖 Admin

        能不用插件我尽量不用,都用代码解决,这样不影响服务器性能。@v3

        • avatar 爱发现爱探索 5

          收工加太麻烦,我也是插件

            • 激劉勇靖 激劉勇靖 Admin

              @爱发现爱探索 如果服务器性能不错用插件是方便,如果性能不好的话那就很影响性能了。