五、Google Code Prettify：实现代码高亮的JS库

最新推荐文章于 2024-08-09 21:30:00 发布
最新推荐文章于 2024-08-09 21:30:00 发布
阅读量135 收藏
点赞数
文章标签： javascript java lua ViewUI
原文链接：http://www.cnblogs.com/xiazdong/p/3575693.html
版权

介绍

  • code prettify 解释为 “代码修饰”。
  • 他由JS代码和CSS代码构成，用来高亮显示HTML页面中的代码。
  • 支持：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, Erlang, Go, Haskell, Lisp, Scheme, LLVM, Lua, Matlab, Pascal, R, Scala, SQL, LaTeX等语言。

开始使用

  • 在使用之前我建议将prettify.css中 li 的样式中添加：list-style-type:decimal 使得每行都有行号，而不是每5行有一个号。
  • 加入主要的CSS文件和JS文件：
 <link rel="stylesheet" href="css/prettify.css" /> <!-- 设置代码主题，此文件为默认主题，你可以换成其他主题-->
 <script src="js/prettify.js" type="text/javascript"></script>
  • 在<body>标签中加入οnlοad="prettyPrint();"
<body οnlοad="prettyPrint()">
  • 将代码放在<pre class="prettyprint linenums">标签内，其中 linenums 表示为代码添加行号，可以不写。
  • 注意：像html中的特殊字符需要转义，比如<a>应该写成 &lt a &gt

例子

代码主题选择

 

 

默认在prettify中有5种选择：

  • prettify.css
  • sunburst.css
  • desert.css
  • doxy.css
  • sons-of-obsidian.css

比如你想使用sunburst.css，则我们只需要将：

<link rel="stylesheet" href="css/prettify.css" />

替换成

<link rel="stylesheet" href="css/sunburst.css" />

扩展样式可以从 http://jmblog.github.io/color-themes-for-google-code-prettify/ 、http://stanleyhlng.com/demo/?url=http%3A%2F%2Fdemo.stanleyhlng.com%2Fprettify-js%2F&surl=http%3A%2F%2Fstanleyhlng.com%2Fprettify-js%2F下载。

语言支持

  • prettify默认支持类C语言（如java等）等，我们可以通过添加额外的JS文件来使得prettify支持该语言的代码高亮（额外的JS文件从此处下载）。比如添加 lang_go.js 并<pre class="prettyprint lang_go">可以使得支持go语言。

参考文献

[1] 官方文档：http://google-code-prettify.googlecode.com/svn/trunk/README.html

[2] 扩展的Prettify主题CSS样式：http://jmblog.github.io/color-themes-for-google-code-prettify/

[3] 代码格式化工具：http://tool.oschina.net/codeformat

转载于:https://www.cnblogs.com/xiazdong/p/3575693.html

weixin_30409849
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
color-themes-for-google-code-prettify, Google Code 美化的语法高亮颜色主题.zip
09-18
color-themes-for-google-code-prettify, Google Code 美化的语法高亮颜色主题 用于 Google Code 美化的颜色主题Google Code 美化美丽色彩主题的选择。 演示https://jmblog.github.io/color-themes-for-google-code-prettify
详解Google Code Prettify代码高亮Prettify.js库使用及其应用
p312011150的博客
05-17 2564
详解Google Code Prettify代码高亮Prettify.js库使用及其应用 2015-01-09 20:55 栏目：技术教程 查看(22,284)  不管是之前自己的技术博客还是现在的公司官网，作为一个互联网从业者，经常需要写一些博文，这也是我的习惯，而写技术文章很多时候需要在文章中插入代码，如果以普通字符形式展示出来我觉得不能够显示出代码的魅力。而通常大家都是利用代
google code prettify 多款主题颜色及下载
u013693601的博客
06-01 1667
google code prettify 多款主题颜色 google code prettify 是一款轻量级的代码高亮着色JS库，只有两个文件，对于常用的html,js,java,sql等语言都可以自动识别并着色，无需指定语言，体积少、加载快、非常方便。 Default Desert Sunburst Sons-O
博客园设置Google-code-prettify渲染代码高亮
dingguayi7025的博客
04-30 368
一段废话： 其实早就知道可以用google-code-prettify来设置高亮，但是比较懒，现在才折腾了一下。看见好看的代码高亮，心情都变好啦~ 感觉博客园的代码高亮，尤其是Markdown编辑模式下的，可定制性好差。可是在博客园发博客比在自己的独立博客发要比较方便（我的独立博客用的是hexo静态博客），而且也习惯了在这里发布。 首先说一下用pretty的缺点 之前的TinyMCE编...
Google Code Prettify，代码高亮的JS库
热门推荐
天马3798
08-14 1万+
一、code-prettify介绍 1.prettify.js是Google的一款代码高亮插件。 2.他又js代码和css代码构成，用来高亮显示HTML页面中的源代码。 3.支持：C, Java, Python, Bash, HTML, XML, Javascript, Makefiles, Ruby, PHP, Awk, Perl, Basic, Clojure, CSS, Dart, E
Typecho-CodePrettify:基于Google Code Prettify的Typecho代码高亮插件
05-12
总的来说，Typecho-CodePrettify 是一款提升 Typecho 博客代码展示体验的优秀工具，它通过集成 Google Code Prettify 实现了高效、美观的代码高亮，使得技术分享变得更加专业和吸引人。同时，结合 jQuery 的使用，...
google_code_prettify:用于谷歌代码美化的 gitbook
06-16
GitBook 谷歌代码美化插件包.json名称包名称应设置gitbook-plugin-google_code_prettify 。如何使用 ？ 步骤1。 book.json 配置 { "plugins": ["gitbookcode"]}第2步。 建造 gitbook build ./
bower-google-code-prettify:Google Code Prettify的Bower软件包
05-12
Google Code Prettify是Google开发的一个轻量级的代码高亮库，主要用于在网页中优雅地展示源代码。它能够自动识别多种编程语言，并对代码进行格式化和颜色标记，使得代码更易于阅读。这个Bower软件包是将Google Code...
ember-code-prettify：Ember.js插件，用于使用Google Code Prettify语法突出显示
02-04
Ember Code Prettify公开了一项服务，以在Ember.js路由和组件中触发 Prettify语法高亮显示。 安装 ember install ember-code-prettify 组态 没有配置，Ember Code Prettify将使用默认的外观和语言。 以下配置导入...
code-prettify:html 中源代码的自动语法高亮显示。 基于 google-code-prettify
07-07
这是 AMD 模块中的一个示例： define ( [ 'jquery' , 'prettify' ] , function ( $ , prettify ) {var code = null ;$ ( 'pre' ) . addClass ( 'prettyprint' ) . each ( function ( idx , el ) {code = el . ...
使用google-code-prettify高亮代码
大学IT网
04-12 1179
这个博客，到现在换了好几个代码高亮的工具，之前的SyntaxHIghlighter虽然漂亮，无奈加载太慢，只能舍弃了。现在用的这个是google-code-prettfy，效果也相当不错。最重要的是，非常小，加载速度比SyntaxHighlighter快得多，而且，可以直接使用markdown的语法去写代码。 首先需要两个文件，prettify.js和prettify.css，自己去官网去下。把
google-code-prettify的样式linenums问题
qq517945516的专栏
08-09 295
在学bootstrap的时候，教程里面有个例子就是让代码高亮的。高亮那部分是没问题了就是，就是用google-code-prettify插件的.linenums出问题了，无法显示行号。求各位帮忙看下 [code="html"] Bootstrap Google Prettify让代码片断变得更漂亮 &lt;div class=&quot;...
解决在用google-code-prettify高亮博客的代码，但是行号怎么也无法显示
以家为家，以乡为乡，以国为国，以天下为天下
09-20 3967
在网上查了一下，有一个不太完美的解决办法，就是加入如下代码： li.L0, li.L1, li.L2, li.L3, li.L5, li.L6, li.L7, li.L8 {  list-style-type: decimal !important } 然后再将你需要显示的代码里面的换成回车即可，这样就可以显示出来行号了。      <div class=&quo
Markdown语法效果展示
yundashi168.com
04-29 5185
Markdown语法（大标题） 注意啦 “[TOC]”标记会展示全局目录，这是非常有用的，赶紧用上吧； 这里面包含了很多标记写法； 收藏下，写熟练了，就不用参考了； 掌握标题，图片展示，文本超链接，图片超链接，有序无需列表，全局目录，加粗，分割线，区域引用，代码区域这些内容；其它的再慢慢学习； 目录（二级标题）Markdown语法大标题 目录二级标题 简介二级标题 文档二级标题两个来加粗文字效果四级
05_ Electron 自定义菜单、主进程与渲染进程通信
最新发布
所学所思
08-09 359
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
【Vue3】图片未加载成功前占位
菜就多练
08-08 244
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
社交媒体分享预览图片和内容修改
wangweiscsdn的博客
08-06 220
社交媒体分享链接时的预览图片和内容
Typescript配置文件(tsconfig.json)详解系列六：allowImportingTsExtensions
zzyp1927314的博客
08-05 485
如果不使用的时候，在导入文件的时候需要加上typescript编译后的文件后缀。如果使用了就不能输出编译文件，只能输出声明文件（*.d.ts）。
创建一个简单的贪吃蛇游戏：HTML、CSS和JavaScript教程
Mr_Zhangyuge的博客
08-08 809
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。
【Material-UI】Autocomplete 组件的局限性（Limitations）详解
lph159的博客
08-05 716
在某些情况下，您可能需要为 Autocomplete 组件提供自定义的。此时，务必确保滚动容器具有属性。这样可以确保在使用键盘导航时，滚动行为的正确性。虽然 Material-UI 的 Autocomplete 组件提供了强大的功能，但开发者在使用时需要注意其一些局限性。通过合理设置组件属性和处理可能出现的问题，可以提升组件的用户体验和可访问性。希望本文能帮助您更好地理解和应用 Autocomplete 组件中的局限性。如果您有任何问题或建议，欢迎交流探讨。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值