zoukankan      html  css  js  c++  java
  • 五、Google Code Prettify:实现代码高亮的JS库

    介绍

    • 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>标签中加入onload="prettyPrint();"
    <body onload="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

  • 相关阅读:
    201521123093 java 第二周学习总结
    201521123093 java 第一周总结
    Word 2010怎么自动添加文献引用
    动态链接库(dll)文件的动态调用(使用动态链接库,解析Wis文件--测井数据文件的一种)
    open inventor 学习笔记
    井眼轨迹的三次样条插值 (vs + QT + coin3d)
    VS2010 + QT 5 +open inventor 环境配置
    我的第一个项目(人力资源管理之报表管理)
    B-tree 和 B+tree
    mysql count(*)与count(1)的区别
  • 原文地址:https://www.cnblogs.com/xiazdong/p/3575693.html
Copyright © 2011-2022 走看看