代码高亮插件 - GoogleCodePrettify 2.0.0 for typecho 0.9

2013-12-06
55 条评论
阅读 Markdown 格式
382 字
1 分钟阅读时长
日常杂事

提醒：本文最后更新于 4690 天前，文中所描述的信息可能已发生改变，请谨慎使用。

代码高亮里面我个人比较偏爱Google Code Prettify这款，主要是比较喜欢它的样式，而且加载也非常的简单。由于更新了新版本，70大大写的Google Code Pretty插件使用起来就好像有点不太正常了。所以我根据自己的习惯重新写了这款插件，也叫Google Code Pretty，但是版本号升级成了2.0.0，希望不跟大大的重了吧。

如何使用？

Google Code Prettify是JavaScript前台渲染高亮插件，基本不占用后台资源。
启用插件之后选择一款你们喜欢的样式就算启用成功了。
插件自带5款样式，虽然不像某插件自带三十多款样式，不过也基本算满足一些人的需求了。

后台设置同时非常温馨的自带了自定义CSS设置，如果对当前高亮样式不满意，可以在自定义CSS内DIY自己想要的样式。

效果预览

后台设置

前台渲染效果

下载地址：BOX | 百度云 | 微盘 | OneDrive

#plugin#Typecho#插件#google#代码高亮#code prettify
编辑本页
本文作者lizheming

发布于 2013-12-06，最后更新于 2013-12-06

55 评论

martixx Firefox64.0Windows 8.1
2019-02-02 01:25:16

楼主，您的下载链接又挂了，能不能重贴下

公子Chrome71.0macOS 10.14.2
2019-02-02 02:19:32

@martixx 其实 Box 的是可以下载的，百度盘的也更新了下你试试。 https://pan.baidu.com/s/1XEhDAWd2zkPgwXzMJXToRg

martixxFirefox64.0Windows 8.1
2019-02-02 03:00:20

@公子谢谢

vennwu Maxthon4.4Windows 7
2015-01-20 00:41:05

请问博主，有没有办法在用Markdown写的时候就支持googlecodeprettify 而不是生成完了之后修改 <pre> 标签，这样会多很长页面响应时间，而且是页面显示默认色再变成googlecodeprettify色，这样看上去有些别扭。

试着修改typecho 里面的 pagedown.js 文件，但是无果。。

公子Chrome41.0Windows 7
2015-01-20 06:30:38

@vennwu 如果是编辑文章的时候需要 Markdown 实时高亮的话可以试试我写的这款插件：http://imnerd.org/lreditor-plugin-for-typecho.html 支持原生编辑器代码高亮。如果是在文章显示的话直接用这款插件好了，不需要修改<pre>标签的，插件已经帮你自动改好了~

ranbo Chrome37.0Windows 7
2014-09-13 03:03:35

插件已经激活了 但是发现没有加载css 和 js文件 不知道这是为什么呢?

公子Chrome37.0Windows 7
2014-10-11 18:40:24

@ranbo 主题里面是不是缺少了这句代码

<?php $this->footer(); ?>

没有这个钩子代码是没法加载插件代码的。

saya Firefox23.0Windows 8
2014-08-14 01:25:37

有啥方法能去掉每五行空一行么？我把list-style-type从none改成了decimal，加了margin-bottom:-20px，让每行更紧凑点，但是每五行都会空一行。。。个人不太喜欢
传送门：http://blog.kuroy.me/centos_xbt_tracker.html

公子Chrome36.0Windows 7
2014-08-14 03:04:40

@saya 那是你主题的问题，先把margin-bottom:-20px;去掉，然后你在插件自定义CSS那里把下面这段补上：

.post-content pre, code, .comment-content pre, code {
margin-bottom:0px !important;
}
sayaFirefox23.0Windows 8
2014-08-14 05:53:00

问题解决，thanks a lot~

alinwei Chrome30.0Windows XP
2014-08-02 09:30:55

大神，感觉这个插件很不错，有一个问题，就是安装了之后，调用的时候怎么吃代码？我用的标签式代码，还请指教下，看了上面的评论，你说用Markdown来实现，这个我不懂，也请指点下，我在这里先谢谢了、

公子Chrome36.0Windows 7
2014-08-02 19:10:19

@alinwei 你自己看看你的标签打了什么…简直不想吐槽你的笔误了…

alinweiChrome30.0Windows XP
2014-08-02 19:15:43

@公子
好吧，抱歉，首先我还是要感谢你，能在百忙之中回复我。那我简单点说，就是调用的时候，采用源码来调用，前端没什么变化。我上面说的吃代码，意思是，部分代码莫名的消失了。不知道我这样描述有问题没？

公子Chrome36.0Windows 7
2014-08-02 22:53:05

@alinwei你先把你的pre标签改正确了看有没有问题，再给个bug的demo给我再说。

dou.ms Chrome35.0Windows 8.1
2014-07-15 04:38:52

怡红公子~~链接失效了，抽空补个档吧。_

公子Chrome37.0Windows 7
2014-07-15 06:07:05

@dou.ms OK,改好了…操蛋的百度，操蛋的GFW…

文艺青年 Firefox29.0Windows 7
2014-05-15 08:10:54

百度云的连接诶挂了

公子Chrome34.0Windows 7
2014-05-15 18:09:51

@文艺青年 改好了…百度实在是太操蛋了…一个纯洁善良的插件的分享链接而已…（´Д`）

True Chrome31.0Windows 7
2014-02-26 21:46:08

安装好没效果。还是吃代码哦

True Chrome31.0Windows 7
2014-02-26 21:38:10

安装好了用什么标签用啊

公子Chrome33.0Windows 7
2014-02-26 22:34:41

@ True 你好，代码用<pre>标签包裹中就可以了，如果是Markdown语法的话最好使用Tab来包裹代码块。

TrueChrome31.0Windows 7
2014-03-01 22:41:20

@公子
http://true-me.com/2014/1843.html
中间

  • 代码被运行了啊。显示不出来呢？

    公子Chrome33.0Windows 7
    2014-03-01 23:11:10

    @True 啊，看来我说的应该有问题，我实际测试了一下应该是要用<pre><code>代码</code></pre>两个标签包裹代码才行，要不你再试试？话说你不用Markdown书写么？用Markdown的话会很方便的~

    TrueChrome31.0Windows 7
    2014-03-01 23:19:58

    @公子
    我那加了还是没不行，你说的那个Markdown我后台打开的，没看出来和关闭有什么区别~！

    [e:loop={'select classid,classname,classpath from [!db.pre!]enewsclass where bclassid=0 and showclass=0 order by myorder',0,24,0}]

  • 


    • 
[/e:loop]
    公子Chrome33.0Windows 7
    2014-03-01 23:47:10

    @True 你看看你这段是怎么打的？我把评论的Markdown支持打开以后插件就自动解析高亮了~

    TrueChrome31.0Windows 7
    2014-03-01 23:54:13

    @公子
    没有哦。你这也有问题呢。评论没法上图，
    你看截图完整的，这个<li></li>被<div>吃了~！

    公子Chrome33.0Windows 7
    2014-03-02 01:40:18

    @True 汗，看来你对html还真是莫名的热情呢。评论这边不行是因为我之前没有允许评论中的<li>标签，所以Typecho帮我过滤掉了。我刚才试了一下，好像<pre><code>确实有你说的问题，但是我用Markdown语法是没有问题的。http://imnerd.org/test.html 你要么试试Markdown的语法？Markdown语法的代码块是用Tab的，具体可以看语法说明：http://wowubuntu.com/markdown/#precode

    JoyChou Chrome31.0Windows 7
    2014-01-16 02:11:00

    typecho贴代码右边的那个滚动条怎么去除呢？

    怡红公子Chrome32.0Windows 7
    2014-01-16 03:57:01

    @JoyChou 额，你看看CSS，是不是对pre标签设置了max-width？看看你主题的CSS代码吧，插件好像没有做这个设置的。

    JoyChouChrome31.0Windows 7
    2014-01-16 03:58:24

    @怡红公子 typecho 默认就有那个滚动条的。

    公子Chrome32.0Windows 7
    2014-01-16 04:01:12

    @JoyChou 默认的就是有做设置的，你看主题的style.css的37行的样子有一个 pre { max-height:400px; } 把这个去掉应该就没有问题了。

    JoyChouChrome31.0Windows 7
    2014-01-16 04:12:00

    @公子 nice 3ks 我把那个pre都删除就ok了

    公子Chrome32.0Windows 7
    2014-01-16 04:17:46

    @JoyChou 客气，解决了就好。