投稿
  1. 中国网页设计首页
  2. 教程
  3. 编程开发

UEditor编辑器如何设置代码高亮？

江山如画 • • 编程开发 • 阅读 696

如果是一个编程或IT类网站，页面上会有大量代码，而让代码高亮显示，显示行号等，可以使页面更美观，用户体验更好。如果后台用百度编辑器（ueditor）可以使用自带的SyntaxHighlighter来实现代码高亮。

UEditor是由百度web前端研发部开发的所见即所得富文本web编辑器，是百度的一个javascript编辑器的开源项目。

UEditor 是开源、免费的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果。

UEditor兼容性很好，是网站站长开发的首选，官网地址：UEditor官网 包含UEditor介绍、UEditor教程、UEditor 演示DEMO、UEditor使用帮助和UEditor下载。

UEditor编辑器自带SyntaxHighlighter，支持多种语言，效果不错，且缩进比较完美。

UEditor设置页面代码高亮步骤

1.引入css：

<link rel="stylesheet" href="/Public/widgets/SyntaxHighlighter/shCoreDefault.css" />

2.引入js文件（js较大，建议压缩且最好放到页面底部）：

<script type="text/javascript" src="/Public/widgets/SyntaxHighlighter/shCore.js"></script>

3.初始化：

<script type="text/javascript">
    SyntaxHighlighter.all(); //代码高亮
</script>

上面路径请以实际路径为准。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/1173.html

赞 (0)
江山如画江山如画管理团队
0 1 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2018年2月8日 pm12:51
下一篇 2018年2月9日 am10:34

99%的人还看了以下文章

发表评论

登录后才能评论

评论列表（1条）

  • 江山如画
    江山如画 2018年12月27日 下午2:26

    推荐：Enlighter – 一款功能强大的WordPress代码高亮插件
    插件下载地址：https://wordpress.org/plugins/enlighter/
    可以设置样式、默认语言、缩进、行数提示等等。
    这款插件功能强大，设置简单，使用方便，且展现的代码高亮也比较友好。