不使用插件实现wordpress文章代码高亮显示

  • A+
所属分类:折腾
摘要

wordpress折腾的过程中或多或少会用到代码,代码高亮只是为了使得文章显示的更加美观一些。早莫是小白,所以折腾的过程中需要在网上找大量的资料,为了将来再次折腾,就将相关的方法保存在早莫博客中。

早莫博客使用的Begin主题,在折腾网站的过程中,为了保存一下代码,省得将来网站变化的时候在网上搜搜查查的,就将折腾的过程也写在了博客中。毕竟早莫是小白用户,代码是一窍不通,只能参照网上找到的教程,测试测试再测试之后找到最终实现结果的方式。前面说到了wordpress文章同步微博,文章使用了代码,在网上看到很多博主的代码都是可以高亮显示,为了保存代码,将代码不变的复制到早莫博客中,发现,显示界面非常low,所以动心折腾,保存一下结果。

折腾用到的工具:Coderender,看到网上介绍的很多,不放链接。显示结果如下:

不使用插件实现wordpress文章代码高亮显示

文件下载解压之后的文件以及本地转换框显示:

不使用插件实现wordpress文章代码高亮显示

双击红色箭头下的文件,之后会打开上面的这个对话框,需要高亮显示的代码复制到到对话框中最上面的Source Code中,之后点击一下Render,最后点击预览(Preview)的Copy复制转换后的代码。将文章编辑器有所见所得编辑模式切换到代码模式,在相应的位置粘贴代码,一切操作完成。

对于代码高亮显示,还需还要准备一些:highlightx.css文件,将其文件放到wordpress主题的根目录下,然后进行其css文件的调用;或者直接将highlightx.css中的全部粘贴到Begin主题的样式表中。反正早莫是直接粘贴的,因为不懂代码所以追求更简单的。
据说还有个致命的问题发生,就是放到文章中的代码会被wordpress自动把半角符号替换为全角,如果是别人复制文章中的代码后,无法正常使用。操作方法就是找到Begin主题文件的functions.php,打开后在最下面贴上

 

  1. //禁止代码标点转换   
  2. remove_filter('the_content', 'wptexturize');

 

以上方法是简单的代码高亮的解决方法,但是Begin主题自带代码高亮,只要启用就可以了。

 

  • 早莫公众号
  • weinxin
  • 个人微信
  • weinxin

发表评论

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

目前评论:6   其中:访客  3   博主  3

    • avatar 老金@金博客 0

      修改代码耗时耗力,但是能锻炼人,可是如果不是经常改代码,现在积累的经验几年后就忘记了。

        • avatar 早莫 Admin

          @老金@金博客 是啊,而且博客只是记事的一种手段

        • avatar 徒步旅行 1

          好文

          • avatar 森纯博客 1

            谢谢分享