Z-Blog的插件鼓捣了有些日子了,磨工完全出于自己懒惰,和编辑环境完全没关系,至少当我尝试用VS2008打开本地IIS站点时惊人的时候还能编译通过.能使用上VS的JS提示以及HTML页面控件的拖拽,即使编辑VBscript时相当于记事本毫无帮助.
是一个给代码加亮的插件,暂定名CodeLight.属于自给自足.不会发出来
主要是自己懒的面对各式各样不同种类天马行空的bug错误.
下面给大家推荐一些选定加亮代码时的js库.
- 实时的语法高亮
- 支持代码片段
- 自动完成(简单的类别诸如 " 双引号 ' 单引号 ( 括号 { 大括号)
- 支持快捷键
- 支持多段显示("Multiple windows" 我也不知道怎么翻译
)
安装步骤:
- 在 CodePress 首页下载库代码,代码仅仅是一些Javascript脚本以及HTML所以你可以在本地环境中调试(不需要webserver).
- 插入CodePress脚本在你的代码页面<head>标记或则<body>标记中.
<script src="/codepress/codepress.js" type="text/javascript"></script>
- 添加<textarea>标记 在你需要高亮显示的地方.CodePress将不改变其高度与宽度,当页面完全载入时(代码载入完毕),CodePress会自动的替换代码段成加亮代码段.
<textarea id="myCpWindow" class="codepress javascript linenumbers-off">
// your code here
</textarea>
- class中的javascript部分表示段代码将会以JavaScript格式编辑
- class中的codepress部分表示这是一段CodePress加亮代码段
- class中的其他选择有linenumbers-off (行数目-关),autocomplete-off (自动完成-关),readonly-on (只读,不可编辑-开)
- 注意不要使用相同的id名称在不同的代码段(
<textarea id="xx"...>)中,以及不要使用像"."(点)之类的符号作为id名称.
以上是对CodePress官方的一些简单翻译,鄙人英语不好,能表达个大概,各位见谅.
CodePress最大的特色就是支持自动完成,虽然很简陋,但加上他能直接编辑,并实时加亮,成了在线编辑代码的不二选择.并且他的API支持一些对代码段的获取,设置等,也决定了他不是甘于前台简单加亮而已(加亮简单? = =! 一般得有个三四百行吧),如果您需要后台编辑,他是您最好的选择.
缺陷就是只支持IE脚本复制,FF没有相关函数吧,其实其他的几种都是通过与Flash交互达成,多浏览器惹得祸啊.没有代码折叠功能.
简单,强大,易用.这就是我使用后的感受.支持多种语言,易拓展,以及Flash剪贴板实现任意浏览器复制.
遗憾的是没有代码折叠,这对前台显示需要的,对于大量代码折叠显然能提高阅读效率.
安装步骤
- 你可以使用下列两种代码格式,都是可行的.
你可以将代码放在<pre>标记内,他的好处是对RSS阅读程序的支持,有丰富的订阅用户显然可以先考虑这种格式.需要设置name属性,和class属性,其中class属性是语言别名的需要.(原: one of the language aliases you wish to use).
注意:需要将 "<" 等HTML闭合符号转换为其等意 < 符.以避免代码提早闭合了代码段,这有可能造成部分代码不显示.<pre name="code" class="c-sharp">
... some code here ...
</pre>
另一种代替的选择是<textarea>标记,他没有必要考虑代码闭合问题,但在RSS feed上无法工作.
<textarea name="code" class="c#" cols="60" rows="10">
... some code here ...
</textarea>
- 更多配置
可以在class中设置更多参数:
nogutter 不会显示装订线(?) nocontrols 不会显示顶部设置栏 collapse Will collapse the block by default. (折叠数据块?) firstline[value] 行数初始值 showcolumns 显示列在第一行 exp:
<pre name="code" class="html:nocontrols:firstline[10]">
... some code here ...
</pre>
- 使他工作
你需要在代码页面添加如下脚本:
<link type="text/css" rel="stylesheet" href="css/SyntaxHighlighter.css"></link>
<script language="javascript" src="js/shCore.js"></script>
<script language="javascript" src="js/shBrushCSharp.js"></script>
<script language="javascript" src="js/shBrushXml.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.ClipboardSwf = '/flash/clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>
国人制造!似乎这年头国货能上脸的都很稀有= =!.
支持折叠,支持多种语言,支持未知语言高亮,安装方式多样,富有弹性.
缺点就是类不规范,好像很难拓展的样子,自己修改自足有难度.
安装步骤
- 首先在 <head> 区里添入样式表：<link href="style.css" rel="stylesheet" type="text/css" />，可根据需要更改名称。
再在 <head> 区里添入js脚本文件，这有两种选择，详见下文 脚本选择。
再将需要着色在网页上的代码放在 <pre> 或者 <textarea> 标签中（二者的优劣及注意事项见下文 标签使用），并将其 name 命名为 code ，再将其 class 属性设置为相应的代码语种名称。如：<pre name="code" class="c">。
最后，在 <body> 区内的尾部添入js脚本：<script type="text/javascript">jssc.colorAll("code");</script>，即可。
(注：自动装载版本需要将colorAll命令改成exec，jssc2.2之后的版本都支持语法别名和按需自动装载。如果命名为 code 有冲突，可以修改。相应的colorAll方法的参数也需修改。) - 脚本选择
“All-in-one”、“Individual”和“Auto-Load”三个文件夹中的脚本功能完全相同，只是用法上稍加区别。
“All-in-one”里只需添入一个脚本文件：<script type="text/javascript" src="jssc2.js"></script>，这样便可着色所有支持的语种的代码。好处是一次性装载省时省事，浏览器缓存效果好；缺点是文件稍大（20k），且网页中仅有少数几种语言的代码需要着色时加载过多浪费。
“Individual”里首先需要加入一个脚本文件：<script type="text/javascript" src="core.js"></script>，它必须放置在第一位，即其它js文件的前面。随后在它后面添加需要着色的代码的语种文件。如需着色c代码：<script type="text/javascript" src="c.js"></script>。好处是装载的文件小，无浪费；缺点是过于零碎。
“Auto-Load”是综合以上两个的不足提出的新方案，它只需装载一个脚本：<script type="text/javascript" src="autoload.js"></script>。之后脚本会自动计算需求的语法文件并按需自动装载，无需理会细节。这是一个折中的方案，如果没有别的原因，一般情况下请选择这个版本。
如果使用“Auto-Load”的话，最后的colorAll命令请改成exec命令：<script type="text/javascript">jssc.exec("code");</script>。它接收两个参数：第一个和前面一样，是节点name属性；第二个是加载语法文件的目录以及图片、flash文件的目录，如果需要加载的语法文件和页面处于同一目录的话可以省略此参数，如果在其它目录的话可以添加绝对或者相对路径。
另外自动装载版本在本机无法掩饰，由于其使用XmlHttpRequest，必须部署在服务器上才能看到效果。“All-in-one”、“Individual”和“Auto-Load”三个文件夹请各取所需，按环境和个人喜好来使用。示例文件中都使用了，可以查看源代码比较。
- 标签使用
<pre> 或者 <textarea> 标签二者功能完全相同，只是使用略有区别。两者共同的缺陷是由于浏览器会解析掉一些特殊字符(如：<、>、"、&)，因此在源代码中出现它们的解析字符时(如：<、>、"、&)，请先使用替换功能将 & 替换成 & 。
<pre> 的优点是在RSS feed环境中表现更好;缺点是代码中不能出现 < 符号，需要将其替换成 < 。
<textarea> 和 <pre> 正好相反，而且在firefox等浏览器下 <textarea> 可以支持超过4096字节长度的代码,<pre> 则不行。
使用哪个标签请各按所需，示例文件中都使用了，可以查看源代码比较。
好了,翻译就到这里了.(压根就是把自己读了半天的使用方法中文表达了一下)其他的就不多介绍了,我还得写插件呢!
其他高亮选择:
google-code-prettify 小巧!50kb不到!支持多种格式,客户端实现,仅仅只有2个文件,易用.
star-light 客户端实现,较简陋.
Generic Syntax Highlighter 支持多种流行语言,格式化语言,易拓展,服务端实现.
WordPress Code Highlight Plugin WP专用插件,国人修改后出现多款修改版,CoolCode, Code Highlight Plugin.
HighLight Z-blog插件,我是没有使用成功的,所以才有了自己弄的心思.
代码萌芽网 这种方法最直接,但是也挺烦了,每次都得自己手动贴来贴去.
相关链接:
语法高亮的简单JavaScript实现
为论坛和Blog添加代码高亮显示的功能 (aspx C# 后台实现)
基于 dp.SyntaxHighlighter 写的代码语法着色工具 (可以看看别人是如何修改整合dp.SH的)
2008-8-20 20:06:15 回复该留言
进来360就弹出木马提示
楼主查一下吧，别中了别人的道！
2008-8-21 8:52:10 回复该留言
我那种只是为了代码也页面内容分离而已。
2008-8-29 19:31:12 回复该留言
我想要一个博客的了加音乐的代码有吗？
谢谢了
2008-8-30 20:03:16 回复该留言
to 离心机网,隐藏一个播放器播放就可以了,在网上搜索音乐播放器就会有很多.
2008-9-28 19:38:05 回复该留言
呵
常做网页吗?
最近 好像没怎么更新了耶