给micolog加上“轻”亮的高亮代码google-code-prettify。 - Angel's Blog.

ing
 
 
软件开发,程序设计,前端设计
 
 
首页 > share > 给micolog加上“轻”亮的高亮代码google-code-prettify。

给micolog加上“轻”亮的高亮代码google-code-prettify。

 

一直想给micolog 添加一个高亮程序,高亮的优点就是看起来比较美观且清晰,我的micolog 也是从昨天开始从老版本的rc1 升级到rc2 ,很多东西都重新折腾一遍(再次感谢“Beyond Compare”这枚优秀的对比软件),顺便想添加这个方法其实是从 dengmin’s blog 那里转来的,只是想更详细的说明下怎么去添加它:

首先要解决两个问题:

1解决高亮的显示在micolog 中;

2解决如何更方便的粘贴代码、减少代码高亮的体积(micolog 在rc2 已经支持了HighSyntax ,但是体积相对有些大,尤其是在释放的时候)。

好了,下面我来详细的说明怎么去添加:

step1:调用prettify 的js 库和css 样式:

 

<link href="/static/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="/static/prettify/prettify.js"></script>

 

step2:在你所使用主题的模板下(例如iNovetemplates)的base.html 中,在和标签之间添加jQuery代码:

 

<script type="text/javascript">
        $(document).ready(function(){
        prettyPrint();
        })
</script>

 

上述步骤完成,其实就已经完成了问题1,问题1中使用高亮代码的方法就是在你粘贴到micolog 的代码,需要放到 

之间,这样pretty 就会自动的渲染。

 

但是问题也来了,这样每一次粘贴代码到micolog 中来public 的话,会很麻烦的,所以, 一定要合理的解决问题2)

step3:这里需要一个插件(请猛点击这里下载),下载完毕,将解压出来的 prettify 文件夹,copy 到micolog 项目的根目录tinymce压缩包里的plugins目录下。

step4:配置tinymce,分别在:plugins 中加入prettify;theme_advanced_buttons1 中加入prettify 。

配置方法很简单,修改根目录的 viewsadmin 下的entry.html ,务必将上述的①和②按照要求添加进去就ok了(prettify 可以添加到”syntaxhl“后面,记得用英文逗号隔开)。

效果图如下:

点击图中被圈住的图标,然后显示出一个对话框:

大功告成!

或者通过RSS 关注本站的更新 ^ O ^ 。” —  by  转载请注明:来自 Angel's Blog.
本文永久链接: http://www.0ee.com/2010/09/26/prettify-plugin-for-tinymce.html
 
分类: share标签: , , ,
 
  • QQ书签
  • Del.icio.us
  • 百度收藏
  • Google
  • 饭否
  • FriendFeed
 

 
评论 (8) Trackbacks (0)
发表评论 Trackback
 
8 Comments Contributed by Visitors
  1.     Angel 2010年9月26日23:27 1#

    @云在天边
    额。。。在显示评论的时候加了一个判断语句,修改了一下admin.py和model.py;
    类似于删除按钮,给每一项增加了checkbox。

  2.     Angel 2010年9月26日11:24 2#

    @Mucid
    额。。。都是从那几个家伙里抄来的= =!不懂python,,能看懂但是写不出来。 ok

  3.     云在天边 2010年9月26日15:05 3#

    @Angel
    上面的评论等待审核,你怎么弄的? ok

  4.     Mucid 2010年9月26日11:15 4#

    都是py高手啊! ok ok

  5.     godbog 2010年9月26日14:22 5#

    test

  6.     云在天边 2010年9月29日10:52 6#

    @Angel

    明白,其实这个没必要啊,加上那个akimit插件就行啦 ok

  7.     GreatGhoul 2010年11月20日11:54 7#

    这个,相当不错呀。

  8.     Angel 2010年11月20日11:56 8#

    @GreatGhoul
    你的速度好快。。 ok

Leave Comments Here...

:) :-D :( :-o 8-O :-? 8) lol :-x :-P oops cry evil twisted wink ? idea :-| arrow mrgreen roll !

(required)

(required)

网址随您("http://"可以省略)

(Ctrl+Enter)

  • 本站不会泄露您的 Email 地址, 敬请放心.
  • 本站已开启缓存, 请不要重复提交评论.
  • 请注意: 带有 《广告(链)、不健康、或者 产品名字》 的评论一律视为spam.
  • 支持常用 HTML 标签调用, 插入 HTML 标签需注意: < == &lt;> == &gt;.
  • 仅当某人针对您的评论做出回应时, 您才会收到由本站发出的邮件通知.
  • 如您希望以相同方式通知某位网友, 请点击  按钮进行回复.
  • 允许在评论中使用如下代码: 
    <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> 
    <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> 
    .
  • 鼠标悬浮到评论中的 @someone 区域即可自动显示 someone 的评论内容.
 
 
  • 正在加载...