最近在整合项目中的UI工程,其中看到了一个google-code-prettify,是帮助你迅速生成页面代码语法高亮的类库。
主要特性:
- 能够运行在HTML页面上
- 即使代码中含有链接,行号也可以正确运行
- 简单的API : 包含JS和CSS,并且拥有一个onload句柄
- 轻量级: 下载迅速,并且不会影响页面加载和运行
- 通过CSS自定的样式. 查看 主题gallery
- 支持所有的C-like, Bash-like, and XML-like languages.不需要指定任何语言
- 对于其它语言扩展语言处理,你可以指定语言
- 跨浏览器支持, code.google.com 和 stackoverflow.com都使用这个类库。
基本的使用方法
1.导入相关的js和css文件
<link href="js/google-code-prettify/prettify.css" type="text/css"
rel="stylesheet" />
<script type="text/javascript" src="/s/google-code-prettify/prettify.js"></script>
2.在body中添加加载prettyPrint方法.即:<body onload="prettyPrint()">
3.<pre class="prettypring">...</pre>或<code class="prettypring">...</code>中间放上代码片段,它就会自动被美化了
这里只是简单了使用了一个实例,如果需要详细的了解可以相关网站继续详细了解。
分享到:
相关推荐
**自动语法高亮——google-code-prettify** `google-code-prettify` 是一个轻量级的JavaScript库,主要用于在网页上对代码片段进行语法高亮显示。它是由Google开发并开源的一个工具,旨在使代码在网页上的展示更加...
通常,你可以通过CDN链接或者将下载的`prettify.js`(如`prettify-small-4-Mar-2013`文件夹中的文件)保存到本地并链接到你的页面中。例如: ```html <script src="path/to/prettify.js"> ``` ### 使用基本语法 `...
color-themes-for-google-code-prettify, Google Code 美化的语法高亮颜色主题 用于 Google Code 美化的颜色主题Google Code 美化美丽色彩主题的选择。 演示...
《code-prettify-master:网页代码高亮显示插件详解》 在网页开发中,代码的展示是一项重要的任务,无论是为了教学、分享还是调试,都需要让代码清晰易读。`code-prettify-master`就是这样一款专门用于代码高亮显示...
3. **代码折叠**:通过第三方插件,如`prettify-plus`,可以实现代码块的折叠和展开功能。 4. **主题切换**:Prettify允许你定义和切换不同的代码高亮主题,以满足不同视觉需求。 **四、文档与Demo** 压缩包中的...
Google Code Prettify是一款强大的代码美化工具,尤其适用于网页中的代码展示,但并不是直接用于MATLAB代码编辑。然而,我们可以借鉴其在其他语言中的应用理念,改善MATLAB代码的格式和可读性。 MATLAB代码续行的...
在下载的`google-code-prettify-master`压缩包中,你会找到库的源代码、示例以及CSS样式文件。要使用这个库,你需要将JavaScript和CSS文件链接到你的网页中,然后确保代码段使用了正确的标记。这样,当你打开网页时...
在压缩包文件"bower-google-code-prettify-master"中,我们可以期待找到以下内容: 1. **源代码文件**:通常包括JavaScript文件,如`prettify.js`,这是Google Code Prettify的核心文件,包含了代码高亮的主要功能...
Google Code Prettify的MATLAB语法突出显示 的MATLAB语法突出显示的实现。 可以识别以下构造: 单行和块注释( % comment和%{ , %} ) 带引号的字符串( 'hello world' ) 号文本( 1 , -2.5 , 1i , 2.9E-5...
在解压的`prettify-master`文件中,你可能找到以下内容: 1. `src/`: 存放`prettify.js`主文件和其他辅助脚本。 2. `test/`: 测试用例和测试数据,用于验证`prettify`的功能。 3. `README.md`: 项目说明文件,包含...
prettify-import是一个中介机构,可为prettify组件提供导入文件。 prettify-import取决于prettify 。 想要独立使用prettify组件应依赖于prettify-import 。 这样的组件不需要使用Polymer或prettify-element ,但是...
Ember Code Prettify公开了一项服务,以在Ember.js路由和组件中触发 Prettify语法高亮显示。 安装 ember install ember-code-prettify 组态 没有配置,Ember Code Prettify将使用默认的外观和语言。 以下配置导入...
这是 AMD 模块中的一个示例: define ( [ 'jquery' , 'prettify' ] , function ( $ , prettify ) {var code = null ;$ ( 'pre' ) . addClass ( 'prettyprint' ) . each ( function ( idx , el ) {code = el . ...