百度ueditor编辑器代码高亮


百度的ueditor是国内比较好用的富文本编辑器,这里要讲解的是ueditor中一个很小的功能:代码高亮;

对于我们这些写个博客三句不离代码的码农们来说,能看到段高亮的代码那欣喜是无以言表的;

没图我说个。。;上图;以上篇文章为例;

示例环境:ueditor1.4.3

未高亮的代码:

白俊遥博客


代码高亮后:

白俊遥博客

如此大的反差;就不废话再吹嘘它的优美了;重点来说使用ueditor如何代码高亮;

很简单,但是很多人都不知道这个功能,或者是不知道怎么用;

首先在编辑文章的时候选择对应的代码语言;

白俊遥博客


然后在文章展示页面的head头内引入

<script type="text/javascript" src="/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" href="/Public/static/ueditor1_4_3/third-party/SyntaxHighlighter/shCoreDefault.css">
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

自行调整自己实际项目中的路径即可;

白俊遥博客
请先登陆后发表评论
  • 最新评论
  • 总共2条评论
白俊遥博客

香蕉你个banana白俊遥博客白大神,能出一片使用百度ueditor编辑器的文章吗,图片上传的地方我怎么配置都不能实现图片的上传

2016-10-26 13:29:52 回复

白俊遥博客
  • 云淡风晴 回复 香蕉你个banana:可以下载我的博客;然后对比着改你的程序试试;
  • 2016-10-27 00:07:15 回复
白俊遥博客

幽谷清风:UEditor可以隐藏工具栏吗?

2016-04-28 17:56:57 回复

白俊遥博客
  • 云淡风晴 回复 幽谷清风:可以的;手册有:http://fex.baidu.com/ueditor/#start-toolbar
  • 2016-04-28 18:02:38 回复