WordPress 代码高亮插件 Urvanov 入门教程，示例用法 (26)
WordPress 代码高亮插件 Urvanov 入门教程，带具体的示例用法，纯手写教程，让你学得放心，用得开心。
怎样在 WordPress 文章中，漂亮又简单地展示代码片段？
飞龙用到的wp代码高亮插件,名字是 Urvanov Syntax Highlighter，简称Urvanov。
但注意，Urvanov设置页，标题是Crayon。因为它是基于Crayon插件的二次开发。
经飞龙实测，在经典编辑器的代码模式下，用 div 包裹 pre，是最佳写法。
Urvanov最佳使用写法，如下：
<div><pre class="lang:langID">
这里放代码
</pre></div>
其中，langID 指代的是 语言ID。在 Urvanov的设置页，列举了 66 种 语言ID 。你还可以使用别名，比如 xhtml的别名有 html xml,意思是，它们共用一种代码的渲染方式。
飞龙常用的语言ID，有 xhtml css js php java python 等。
下文，我会一步步叫你使用。
一、进入WordPress后台，安装 Urvanov插件。
这个很简单，你自己安装Urvanov Syntax Highlighter插件，然后启用它。
二、转到设置页，Crayon。
你可以自己看，自己调整设置，然后调试效果。
比如 默认的主题外观等。
三、Urvanov插件的示例用法
打开您的文章编辑页。
飞龙喜欢经典编辑器，因为它简单直观，符合国人习惯。如果没有 经典编辑器，请先安装 经典编辑器 插件。
为了插入代码，我们必须切换到 源代码编辑模式。那怎么进入源代码编辑模式？
如果您用 古腾堡编辑器，请点击右上角的三个点图标，选择“代码编辑器”。
如果您用 经典编辑器，请点击编辑器右上角的“文本”标签。
然后，使用前面提到的 Urvanov最佳使用写法。
下面以常用语言的html,作为基础例子。
其它语言，xhtml css js php java python ，你自己换了就可以。
<div><pre class="lang:xhtml">
这里放代码
</pre></div>
然后，给你一个真实的 显示效果：
|
1 2 3 4 5 6 7 8 9 |
<h1 class="blogname">飞龙博客</h1> <p class="domain">feilong.org</p> <ul class="postcats"> <li>人工智能</li> <li>博客</li> <li>教程</li> <li>数码</li> <li>网站</li> </ul> |
好了，wordpress代码高亮插件Urvanov，用法就是这么简单，不用搞那种短代码插入。
有问题，问飞龙，我会用简单直观的方式，让你一学就会。
本文更新网址：https://feilong.org/wp-plugin-urvanov-crayon-usage
2026-02-28 ~ 2026-02-28
加入收藏夹，查看更方便。
分类： wordpress