网页中的代码展示与高亮。

底层技术是由第三方插件（SyntaxHighlighter）实现的，然后我们对其界面进行了部分优化。

hhDefCode、hhWhiteCode 只是 CSS 类名，用来优化样式，框架并未改变插件的代码和语法。

因为框架做了自动检测，所以无需手动初始化（SyntaxHighlighter.highlight()），代码会自动生效。


简单参数：

  1. 笔刷（brush）

    要展示的代码模板，正确的笔刷才能显示最佳的效果。

    原生插件支持 20 多种模板（查看全部），为了精简，我们剔除了大部分模板，只保留了 xml、js、css、php 这四个。

  2. 类名（class-name）

    自定义样式的类名，如果你想要修改样式，只需将定义好的类名添加到模板上即可。

更多参数和用法：

1. SyntaxHighlighter 官网

2. SyntaxHighlighter 详解（推荐）

hhDefCode

用法：

// 说明：hhDefCode 是框架的默认样式，此处的 class-name:hhWhiteCode; 是可以省略的。
<pre type="syntaxhighlighter" class="brush:js; class-name:hhWhiteCode;">
$(document).ready(function(){
	// 最怕空气突然安静
    $(".demo1").hhscroll({width:900,height:400,controller:false});
});
</pre>

原生效果：

原生的效果会出现一个竖向的滚动条，上下也紧贴着，没有内边距。

看看看，就是这个死样子。

$(document).ready(function(){
	// 最怕空气突然安静
    $(".demo1").hhscroll({width:900,height:400,controller:false});
});

优化效果：

下面是使用 hhDefCode 样式优化后的效果。

去除了竖向滚动条，增加了内边距，也做了 JS 代码注释的颜色。

$(document).ready(function(){
	// 最怕空气突然安静
    $(".demo1").hhscroll({width:900,height:400,controller:false});
});

hhWhiteCode

特性：

  1. 增加了小圆角和边框
  2. 增加了鼠标移入效果
  3. 增加了内边距，更加美观
  4. 去除了竖向的滚动条
  5. 修改了 js 注释颜色（浅灰色）
  6. 修改了行距（增高）
  7. 修改了数字序号右侧边框的宽度

HTML 代码效果：

笔刷：xml

类名：hhWhiteCode

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>后天堂框架</title>
    
    <link type="image/x-icon" rel="shortcut icon" href="icon/favor.ico" />
    <link rel="stylesheet" href="plugin/hhframe/hhframe.min.css" />
    <script src="plugin/hhframe/hhframe.min.js"></script>
</head>
<body>

    

    	后天堂
    


</body>
</html>

CSS 代码效果：

笔刷：css

类名：hhWhiteCode

/* ======================================================================= */

.intro .app_logo { position:absolute; border:0px solid #f00; }
.intro .app_logo.logo1 { width:250px; left:30px; top:70px; }
.intro .app_logo.logo2 { width:270px; left:20px; top:70px; }
.intro .app_logo.logo3 { width:230px; left:40px; top:90px; }
.intro .app_logo.logo4 { width:230px; left:40px; top:50px; }

.intro .info { margin-left:400px; width:520px; border:0px solid #f00; }
.intro .info h3 { font:25px/1em "微软雅黑"; color:#555; margin-bottom:1em; }
.intro .info p  { font:15px/1.5em "微软雅黑"; color:#666; margin:10px 0; }
.intro .info a  { color:#0487c4; }
.intro .info .btn:hover { background:#2DB245; color:#fff; }

/* ======================================================================= */

JS 代码效果：

笔刷：js

类名：hhWhiteCode

// 个推推送
Gpush(function(notice){
	Console("notice - ",notice);
	switch(notice.event)
	{
		case "warning":     // 警告
			alert(notice.descp);
			break;
		case "logout":      // 退出登录
			alert(notice.descp);
//			open_UserLogin("index");
//			api.sendEvent({name:"evt_UserLogout"});
//			api.alert({msg:notice.descp});
			break;
	}
});

PHP 代码效果：

笔刷：php

类名：hhWhiteCode

<?php

$nid = $_GET["news_id"];
$uid = $_GET["user_id"];
$token = $_GET["token"];

//exit($_SERVER["CONTENT_TYPE"]);
//echo '{"header":"'.$_SERVER["CONTENT_TYPE"].'","name":"'.$name.'"}';
//echo '{"header":"'.$_SERVER["CONTENT_TYPE"].'","name":"'.$_POST["user_id"].'"}';
//exit();

if( $nid=="" || $uid=="" || $token=="" )
	echo '{"state":false,"msg":"缺少参数","code":500}';
else
	echo '{"state":true,"msg":"成功","news_id":"'.$nid.'","code":0}';

?>

hhDwCode

特性：

  1. 增加了小圆角和边框
  2. 增加了鼠标移入效果
  3. 增加了内边距，更加美观
  4. 去除了竖向的滚动条
  5. 修改了 js 的整体配色
  6. 修改了插件的默认字体（"Courier New"）
  7. 修改了行距（增高）
  8. 修改了数字序号右侧边框的宽度和颜色

HTML 代码效果：

笔刷：xml

类名：hhDwCode

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>后天堂框架</title>
    
    <link type="image/x-icon" rel="shortcut icon" href="icon/favor.ico" />
    <link rel="stylesheet" href="plugin/hhframe/hhframe.min.css" />
    <script src="plugin/hhframe/hhframe.min.js"></script>
</head>
<body>

    

    	后天堂
    


</body>
</html>

CSS 代码效果：

笔刷：css

类名：hhDwCode

/* ======================================================================= */

.intro .app_logo { position:absolute; border:0px solid #f00; }
.intro .app_logo.logo1 { width:250px; left:30px; top:70px; }
.intro .app_logo.logo2 { width:270px; left:20px; top:70px; }
.intro .app_logo.logo3 { width:230px; left:40px; top:90px; }
.intro .app_logo.logo4 { width:230px; left:40px; top:50px; }

.intro .info { margin-left:400px; width:520px; border:0px solid #f00; }
.intro .info h3 { font:25px/1em "微软雅黑"; color:#555; margin-bottom:1em; }
.intro .info p  { font:15px/1.5em "微软雅黑"; color:#666; margin:10px 0; }
.intro .info a  { color:#0487c4; }
.intro .info .btn:hover { background:#2DB245; color:#fff; }

/* ======================================================================= */

JS 代码效果：

笔刷：js

类名：hhDwCode

// js code
$(document).ready(function(){
	$(".demo1").hhscroll({width:900, height:400, controller:false});
});

// 单参数 示例代码
Ajax({
	url: "proc.php",
	data: {
		name: "立树",
		job: "前端程序猿、WebApp开发者",
	},
	success: function(ret){
		alert("Ajax 终于请求成功了，你看返回状态："+ret.state);
	},
	failed: function(err){
		alert("最后难逃没网的命运");
	},
});

// 个推推送
Gpush(function(notice){
	switch(notice.event)
	{
		case "warning":
			// 弹出警告内容
			alert(notice.descp);
			break;
		case "logout":
			// 执行强制用户退出的程序
			UserLogout();
			break;
	}
});

PHP 代码效果：

笔刷：php

类名：hhDwCode

<?php

$nid = $_GET["news_id"];
$uid = $_GET["user_id"];
$token = $_GET["token"];

//exit($_SERVER["CONTENT_TYPE"]);
//echo '{"header":"'.$_SERVER["CONTENT_TYPE"].'","name":"'.$name.'"}';
//echo '{"header":"'.$_SERVER["CONTENT_TYPE"].'","name":"'.$_POST["user_id"].'"}';
//exit();

if( $nid=="" || $uid=="" || $token=="" )
	echo '{"state":false,"msg":"缺少参数","code":500}';
else
	echo '{"state":true,"msg":"成功","news_id":"'.$nid.'","code":0}';

?>

后天堂

其他链接

作品分类

联系我们

Copyright © 2012-2018 houheaven. All rights reserved.