欢迎光临
够嗨才有趣儿

DUX主题文章代码高亮和内容亮点功能设置

本文记录嗨趣儿使用DUX主题经验:

1、DUX主题文章代码高亮

DUX主题集成了谷歌的 google-code-prettify 代码高亮插件,这款插件最大的好处就是不用设置代码类型,插件会自动进行渲染高亮,而且它的体积也很小,集成以后只有几Kb而已。不过在 wordpress 中使用,还是有一些注意事项的,尤其是发布含有 html 标签的代码。因为在 wordpress 文章编辑器的文本模式下,html 标签会被执行,这样显示出来的代码就大变样了。比如下面的这句代码:

<a title="嗨趣儿" href="https://www.hiquer.com" target="_blank">代码演示</a>

如果在文本模式下直接写这样的代码,前台文章中看到的就是一个超链接了,也就是下面的样子:

代码演示

问题原因

造成这个问题的原因是:文本模式其实就是源码模式,如果我们在文本模式下输入 html 标签,实际上就是源码,浏览器自然会执行相应的 html 代码。

问题解决

解决这个问题并不困难,我们只需要把代码中的 html 标签替换为相应的 html实体 就可以了。关于 html实体 的介绍可以看下百度百科:html实体

那么怎么进行 html 转义呢?方法很多,简单说两种吧。

使用在线转义工具把代码预先转义一下,下面提供两个在线转义的网址

http://www.khurshid.com/i-make-postable/

http://www.elliotswan.com/postable/

2、DUX主题内容亮点功能设置

后台-文章或页面-添加或编辑的时候,切换编辑器到文本模式,将以下代码复制粘贴入编辑器

<ol class="liangdian">
<li><strong>标题标题标题</strong>描述描述描述描述描述描述描述描述描述描述描述</li>
<li><strong>标题标题标题</strong>描述描述描述描述描述描述描述描述描述描述描述</li>
复制上一行会增加新的
</ol>

效果展示:

  1. 标题标题标题描述描述描述描述描述描述描述描述描述描述描述
  2. 标题标题标题描述描述描述描述描述描述描述描述描述描述描述
赞(0)
未经允许不得转载:嗨趣儿 » DUX主题文章代码高亮和内容亮点功能设置
分享到: 更多 (0)
优惠券

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

够嗨才有趣!

福利导航每日福利TOP100