1024programmer Java 5. GoogleCodePrettify: JS library for code highlighting

5. GoogleCodePrettify: JS library for code highlighting


  • code prettify is interpreted as “code decoration”.
  • It is composed of JS code and CSS code and is used to highlight the code in the HTML page.
  • Supports: 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 and other languages.

start using

  • Before using it, I recommend adding the following to the li style in prettify.css: list-style-type:decimal so that each line has a line number instead of There is a number every 5 lines.
  • Add main CSS files and JS files:
  • Add Onload=”prettyPrint();” to the tag

  • Put the code within the
     tag, where linenums means adding line numbers to the code, and it does not need to be written.  
  • Note: Special characters in HTML need to be escaped, for example, they should be written as &lt a &gt

Code theme selection

By default there are 5 options in prettify:

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

For example, if you want to use sunburst.css, we only need to change:

replace with

Extended styles can be downloaded from 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%2FDownload.

language support

  • prettify supports C-like languages ​​(such as java, etc.) by default. We can make prettify support code highlighting in this language by adding additional JS files (additional JS files can be downloaded from here). For example, adding lang_go.js and <pre class="prettyprint lang_go"> can support the go language.


[1] Official document: http://google-code-prettify.googlecode.com/svn/trunk/README.html

[2] Extended Prettify theme CSS style: http://jmblog.github.io/color-themes-for-google-code-prettify/

[3] Code formatting tool: http://tool.oschina.net/codeformat

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/765001

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us


Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top