帝国CMS您现在的位置是:首页 > 博客日志 > 帝国CMS

帝国CMS 通过SyntaxHighlighter实现代码高亮/语法高亮

<a href='mailto:'>微wx笑</a>的头像微wx笑2019-07-24 15:55:55帝国CMS人已围观关键字:帝国cms

简介帝国CMS本身自带的编辑器就不好用,我将其整合为百度的UEditor,但做为一个IT类的博客经常要插入一些代码,代码不能高亮显示,没有一点语法显示特征,看起来就太别扭了。经过搜索研究

帝国CMS本身自带的编辑器就不好用,我将其整合为百度的UEditor,但做为一个IT类的博客经常要插入一些代码,代码不能高亮显示,没有一点语法显示特征,看起来就太别扭了。Sei编程技术_踩坑日志_进阶指南 - 无知人生

经过搜索研究,觉得还是 SyntaxHighlighter 比较好,所以就把它整合进来。Sei编程技术_踩坑日志_进阶指南 - 无知人生


Sei编程技术_踩坑日志_进阶指南 - 无知人生

下载Sei编程技术_踩坑日志_进阶指南 - 无知人生

是一个开源项目,Github地址:https://github.com/syntaxhighlighter/syntaxhighlighter,不过这里的你需要自己构建,不想自己构建的话,可以去下载一个已经构建好的版本。Sei编程技术_踩坑日志_进阶指南 - 无知人生

Github上是比较新的版本,你可以去这里找旧版本:http://alexgorbatchev.com/SyntaxHighlighter/manual/older_versions.htmlSei编程技术_踩坑日志_进阶指南 - 无知人生

网盘下载链接: https://pan.baidu.com/s/15FDZzGblwK7zovfcGrt2zw 提取码: syv4Sei编程技术_踩坑日志_进阶指南 - 无知人生


Sei编程技术_踩坑日志_进阶指南 - 无知人生

使用方法Sei编程技术_踩坑日志_进阶指南 - 无知人生

上传的网站目录下,比如我把它放在 /css/SyntaxHighlighter 目录下,在内容模板页面加入以下代码:Sei编程技术_踩坑日志_进阶指南 - 无知人生

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

代码显示效果Sei编程技术_踩坑日志_进阶指南 - 无知人生

image.pngSei编程技术_踩坑日志_进阶指南 - 无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()

站点信息

  • 建站时间:2018-10-24
  • 服务期限阿里云ECS 2027年到期
  • 主题模板:基于《今夕何夕》修改
  • 文章统计:210篇
  • 文章评论:15条
  • 文章阅读:2818次
  • 文章点赞:1026次
  • 微信公众号:扫描二维码,关注我们
  • 二维码-微信公众号-微wx笑