Google的代码高亮工具Syntaxhighlighter

昨天去PHP爱好者网站,看到一个不错的日历代码,觉得有不错的学习价值,就转到自己的网站来了。但是发现,自己的代码高亮显示并不够他的那么好看。我之前一直使用的是 google-syntax-highlighter 1.5.1. Released on August 5, 2007。是07年发布的工具。感觉class为php时,代码的显示并不是那么智能,比如关键字、数据结构等等,高亮方式并不理想。

现在我使用了最新的 Syntaxhighlighter_2.1.364,下面是版本历史:

  • 1.5. Released on May 11, 2007.
  • 1.5.1. Released on August 5, 2007.
  • 2.0. Released on February 3, 2009.贵族娱乐城

SyntaxHighlighter是一款用JavaScript编写的功能强大的代码高亮显示工具,它可以在网页中对各种程序源代码语法进行高亮显示。当前最新版本是2.0.296,目前支持的编程语言为:Bash/shell、C#、C++、CSS、Delphi、Diff、Groovy、JavaScript、Java、Perl、PHP、Plain Text、Python、Ruby、Scala、SQL、Visual Basic、XML/XHTML/XSLT/HTML。

可以看一下它的 js 文件组织就知道了。

  • shBrushBash.js
  • shBrushCpp.js
  • shBrushCSharp.js
  • shBrushCss.js
  • shBrushDelphi.js
  • shBrushDiff.js
  • shBrushGroovy.js
  • shBrushJava.js
  • shBrushJScript.js
  • shBrushPhp.js
  • shBrushPlain.js
  • shBrushPython.js
  • shBrushRuby.js
  • shBrushScala.js
  • shBrushSql.js
  • shBrushVb.js
  • shBrushXml.js

新版本的 SyntaxHighlighter 比上一个版本,增加了对几种新语言的支持,比如 Groovy 和 Scala 等等。如果你有意去学习这些新语言,还是需要更新这个工具。

在SyntaxHighlighter目录的styles目录中一共提供了6个样式文件,分别是shThemeDefault.css、shThemeDjango.css、shThemeEmacs.css、shThemeFadeToGrey.css、shThemeMidnight.css、shThemeRDark.css,可以根据自己喜欢的样式来载入不同的样式文件。

在以上代码载入的19个js文件中,除了第一个shCore.js外,其他的都是每个js文件对应一种编程语言(根据文件名可以判断支持哪种编程语言),可以根据实际需要来选择是否载入。

将需要进行高亮显示的源代码放在<pre></pre>之间,例如:

1 <?php
2     echo "Hello, Welcome to NowaMagic!";
3 ?>
时间: 2024-12-08 22:50:28

Google的代码高亮工具Syntaxhighlighter的相关文章

Windows Live Writer教程及代码高亮工具

十分感谢六仙庵对于Windows Live Writer的教程,方便了编辑与发布,教程地址如下: http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html 其中的代码高亮工具下载地址如下: http://files.cnblogs.com/cmt/WindowsLiveWriter.CNBlogs.CodeHighlighter.rar

代码高亮插件SyntaxHighlighter

一 第一 解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题 第二 如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的.其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeDefault.css 第三 下面以高亮显示JavaScript代码为例讲

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

找代码高亮插件选了好久,还是这个使用起来比较方便. 先上链接:插件下载地址 官方使用方法地址 建议看官方的资料,我这里仅仅简要描述一下使用方法: 引入方法: 测试引入是否成功:herf 换成 自己放置的路径,打开测试网页源代码,点击css,js文件链接 能看到代码内容即OK. <link rel="stylesheet" type="text/css" href="prettify.css"> <script type=&quo

[转]7个高性能JavaScript代码高亮插件

对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 SyntaxHighlighter 是一款完全基于JavaScript的代码高亮插件,Sy

7个高性能JavaScript代码高亮插件

本文由码农网 – 小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划! 对于喜欢写技术博客的同学来说,一定对代码高亮组件非常熟悉.一款优秀的JavaScript代码高亮插件,将会帮助你渲染任何一种编程语言,包括一些关键字的着色,以及每行代码的缩进等.今天我们要来分享一些高性能的JavaScript代码高亮插件,这些JavaScript代码高亮插件将非常有效地帮你实现在网页上的代码编辑和展示. 1.SyntaxHighlighter – 最优秀的JavaScript代码高亮插件 Syn

javascript实现代码高亮-wangHighLighter.js

1. 引言 (先贴出wangHighLighter.js的github地址:https://github.com/wangfupeng1988/wangHighLighter注意,程序和使用说明的更新,都参见该网址为准) 可能有朋友关注过我的wangEditor——基于bootstrap的富文本编辑器.做一个富文本编辑器其实没多大意思,网上有的是编辑器插件.但是带插入代码并且支持代码高亮的富文本编辑器就不多见了.这是其一. 其二,网上的代码高亮工具(如:SyntaxHighlighter),一般

SyntaxHighlighter代码高亮插件

SyntaxHighlighter是Google Code上的一个开源项目,主要用于给网页上的代码着色, 使用十分方便,效果也不错,而且几乎支持常见的所有语言. 使用步骤: 一.下载并解压缩SyntaxHighlighter(http://download.csdn.net/detail/itmyhome/7757359)当前版本3.0.83 二.引入文件 将解压后的scripts和styles文件夹复制到项目中,在页面中引入shCore.js和核心CSS文件shCore.css 其次引入你要高

Google代码规范工具Cpplint的使用

Cpplint是一个python脚本,Google使用它作为自己的C++代码规范检查工具.如果你所在的公司也使用Google C++代码规范,那么你有必要了解下Cpplint. 下面说一下Cpplint在windows下的简单使用: 1.      从http://google-styleguide.googlecode.com/svn/trunk/cpplint/cpplint.py  下载cpplint.py源码,并将其存放到D:\soft\Cpplint\cpplint.py中: 2.  

主题: 为kindsoft编辑器替换SyntaxHighlighter代码高亮,整合DEDECMS

作者: fmamcn, 发布日期: 2012-09-29 12:28:39, 浏览数: 1567 看了狼魂发表的将kindeditor中的代码高亮插件prettify换为SyntaxHighlighter 自己试了一下,总有一些问题,后来还是自己研究了一下,找了一些文档,做了一个 DeDeCMS本身的标记其不好用,更换为KindEditor后确实很不错了,但是KindEditor编辑器的代码高亮确实不怎么好看,也不怎么使用,虽然很简洁,但是功能上还是显得匮乏一些,所以就动手改了改,现在分享出来!