我经常要在Blogger中贴代码,尤其是HTML代码.
不过以前用的贴代码的东西都不太美观,于是就改进了一下,用了ext中的一张背景图片.
并加入了复制 运行 保存 展开/收缩 功能,不过一些功能在ff下无法使用,一直是一个遗憾.
希望大家可以帮助我改进一下.
CodeBox中很多代码取自NS_Code.因为要适用于Blogger,改变了一些代码的工作方式.
不过以前用的贴代码的东西都不太美观,于是就改进了一下,用了ext中的一张背景图片.
并加入了复制 运行 保存 展开/收缩 功能,不过一些功能在ff下无法使用,一直是一个遗憾.
希望大家可以帮助我改进一下.
CodeBox中很多代码取自NS_Code.因为要适用于Blogger,改变了一些代码的工作方式.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Code Box</title>
<style type="text/css">
pre.code {
border:1px solid #99BBE8;
padding:2px;
}
.code-box {
border:1px solid #99BBE8;
margin:5px 2px;
}
.code-box-head {
margin:0px;
height:26px;
line-height:26px;
font-size:20px;
background:url(http://w.886.cn/4gYC/120961475/120961475_1902.gif) #D3E1F1;
border-bottom:1px solid #99BBE8;
margin-bottom:0px;
padding:0px 2px;
color:#15428B;
}
.code-box-head a {
text-indent:0px;
border:1px solid #D3E1F1;
margin:2px 3px;
height:20px;
line-height:20px;
padding:0px 4px;
float:right;
font-size:12px;
text-decoration:none;
color:#7692AD
}
.code-box-head a:hover {border:1px solid #99BBE8;}
.code-box-content {
margin:0px;
background-color:#FFFFFF;
padding:2px;
color:#000066;
}
</style>
<script src='http://greatghoul.go1.icpcn.com/blogger/CodeBox.js' type='text/javascript'/></script>
</head>
<body>
<pre class="code" title="HEAD">
使用方法:
<pre class="code html" title="代码标题">
class 中code是必须的.当贴出的代码为html代码时,加上 html
转换后的代码(转换工具见文末)
</pre>
</pre>
<pre class="code">
Some Code
</pre>
</body>
</html>
<pre class="code html" title="代码标题"> class 中code是必须的.当贴出的代码为html代码时,加上 html 转换后的代码(转换工具见文末) </pre>
用到的图片:http://w.886.cn/4gYC/120961475/120961475_1902.gif
HTML转换工具
转载声明: 出自: Ghoul To World!作者: GreatGhoul
Posts
原来blogger可以访问了,速度还可以哈,你这博客做的挺漂亮的
ReplyDelete