码迷,mamicode.com
首页 > 其他好文 > 详细

google code-prettify 代码高亮插件使用方法

时间:2017-12-10 14:23:30      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:star   extension   nload   xhtml   成功   引入   富文本编辑器   ext   支持   

找代码高亮插件选了好久,还是这个使用起来比较方便。

先上链接:插件下载地址 官方使用方法地址

建议看官方的资料,我这里仅仅简要描述一下使用方法:

引入方法:

  测试引入是否成功:herf 换成 自己放置的路径,打开测试网页源代码,点击css,js文件链接 能看到代码内容即OK。

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

(下载的文件里还有部分主题,替换一下即可):

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

官方给的启用方法是:

<body onload="PR.prettyPrint()">

这种方法无疑是最稳妥的。

我的做法是下面这种做法,(我把body放在模板里了,修改起来不太方便,而且主观意愿上不太像body标题里面加入太多东西)但是需要注意的是务必将js文件的引用放到html的最下面,以防无效。

<script type="text/javascript" src="/prettify.js" onload="PR.prettyPrint();"></script>

代码高亮使用方法:

在<pre> 标签加入 .prettyprint .lang-html类

prettyprint 是渲染类

lang-html指的是编程语言,这里指的是html,其他语言缩写在下方:

<pre class="prettyprint lang-html">
  The lang-* class specifies the language file extensions.
  File extensions supported by default include:
    "bsh", "c", "cc", "cpp", "cs", "csh", "cyc", "cv", "htm", "html", "java",
    "js", "m", "mxml", "perl", "pl", "pm", "py", "rb", "sh", "xhtml", "xml",
    "xsl".
</pre>

提示:kindeditor富文本编辑器已默认自动支持在<pre>标签内加入prettyprint lang-html

更多方法请参考官方文档:https://github.com/google/code-prettify/blob/master/docs/getting_started.md

:

google code-prettify 代码高亮插件使用方法

标签:star   extension   nload   xhtml   成功   引入   富文本编辑器   ext   支持   

原文地址:http://www.cnblogs.com/JansXin/p/8016679.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!