设为首页 - 加入收藏
广告 1000x90
您的当前位置:澳门金冠 > 教程 > cms教程 > 正文

金冠网站-SyntaxHighlighter高亮插件:TinyMCE帝国CMS整

来源:未知 编辑:admin 时间:2019-01-05

  SyntaxHighlighter 是 Google Code 上的一个开源项目,主要用于给网页前端的代码着色。Google 的“尿性”,就是一切从简,从实际解决问题,他支持常见的所有语言,而且附送多款皮肤,并且基于HTML和JS,金冠网站他对Web 2.0 Web 3.0的友好度非常高。

  GitHub的下载方法就不说了吧,金冠网站有不知道的,在大叔的博客上有网盘包,自己去拿吧。

  3.0.83版 还是在使用引用JS和CSS的方法,3.0.9版 开始到最新的 4.0.1版 采用了webpack进行打包,大叔还没整明白这个方法的引用方式,金冠网站网上也没有好用的教程,金冠网站暂时就先不折腾了。

  compass是一个非常丰富的样式框架 - 对SASS的扩展,我们也用不到,删除。

  将这两个文件夹,分别放到网站对应样式目录下(可以随意放置,但要保证可以正常读取)。

  根据特殊的 class 配置动态生成常规形式的 html 标签及 class 属性值。

  实现根据待着色代码块中使用的 brush 来自动根据autoloader对象配置中的隐射加载 brush.js 。

  一般代码高亮的地方都是在文章内容中,金冠网站所以大叔建议只需要在文章内容展示页的 body/body 中引入高亮的CSS与JS即可。大叔主要对帝国CMS进行,或使用ThinkPHP制作网站,所以这里只对这两种环境进行演示。

  大叔在这里的使用方法是以 帝国CMS 7.x 为主,用的是 CKEditor v4.0。王大不知为何,就是不愿意增加【代码录入】功能,所以大叔这里主要是配合【源码】来使用。

  先在正常模式下将要使用高亮样式的代码编辑好,然后点【源码】在外面包入 pre 中,并写上对应的 class 命令:这里放几个常用的

  代码不要直接写入后台,先用正常模式写好,因为有一个编辑器中有自动置换功能,使得 html 和 js 代码可以在编辑时也能查看,直接写入后台,会导致文章展示时可看,文章编辑时变成空白行,具体看下面的代码:

  因为使用的是 3.0.83版 毕竟是2010年的版本,所以样式上还有一些小瑕疵,大叔建议做一些小调整。

  将这里的三个样式做了一些调整,这样可以使代码在前台展示时,不会出现贴边的情况。

  SyntaxHighlighter自带的共有10个样式,大叔使用了原生的shThemeDefault.css,但原生的样式表没有做行区分,所以大叔自己调整了一下:

  转载自 《黑客攻防技术宝典Web实战篇@第2版》读书笔记1:了解Web应用程序Dy大叔的日常

网友评论:

发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片

网站地图 | xml地图

Copyright © 2012-2019 澳门金冠  版权所有

Top