代码高亮插件

控件简介
使用帮助
高级使用
下载控件
反馈BUG

网页代码高亮显示插件

Qoo.cc 是一个使用 JavaScript 编写的 Code 高亮控件，
主要应用于互联网技术类博客（WordPress）、论坛（Discuz、PHPWind）等需要高亮显示代码颜色的站点。
博客上使用代码高亮插件的演示

支持语言

HTML、XML、JavaScript、JSON、CSS

插件特点

  1. 体积小（只有一个 JS 和一个 CSS 文件）、速度快、功能强、错误渲染率接近零
  2. 代码无论怎么折行、混乱都能准确高亮
  3. 智能识别代码类型
  4. 可以实时编辑代码、运行代码
  5. 选择复制高亮的代码不带有行号
  6. 兼容主流的代码高亮显示插件（如：SyntaxHighlighter），可以零成本移植插件

高亮显示

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>简单的HTML、JS、CSS混合测试</title>
</head>
<body>
<!-- 有引号属性 和 无引号属性测试 -->
<div id="test" data-test = 123 data-abc = '234' abcde>
	<!-- 折行测试 -->
	<span
    	class="nav first"  id="home"
        >首页</span>
</div>

<style type="text/css">
	@import("../../comm.css");
	table[id^=test]{ width:200px !important; width:300px\0; /* 注释 */ _width:210px;}
	@media screen, print{
		.nav span:not(.test){ -moz-window-shadow:none; -ms-zoom:1; /*
			跨行注释
		*/ background:#fff url("http://www.css-js.com/common.css");}
	}
</style>

<script type="text/javascript">
	var expr = /:((?:[\w\u00c0-\uFFFF-]|\\.)+)(?:\((['"]?))?/ig,
	url = "http://www.css-js.com" + 2,   
	hex = 0xFF00EE; // 16进制识别
	$(window).ready(function(){
		$.getScript( url, function(data /* 注释 */ ){
			this.addClass(); // 单行注释
			this.remove();
		});
	});
</script>
</body>
</html>

Qoo.cc 高亮控件可以毫无压力的高亮 10000 行代码或者一个 JavaScript 库

插件的调用方法

  1. 下载解压控件
  2. 将控件放置到网站一个合适的可以访问的目录
  3. 在需要调用控件的页面 head 区域中添加一个CSS链接
    <link rel='stylesheet' href="/Qoo/cc/default.css" />
  4. 在</body>之前引入控件 JS 文件
    <script src="/Qoo/cc/cc.js"></script>
  5. 在 引入的控件 JS 文件标记后 添加一个
    <script>Qoo.cc.all("pre")</script>