【原】高亮您的代码,秀出您的水平【有源码,支持大部分常用语言的高亮显示,如C#,JAVA等】...

本文介绍如何在基于文件驱动的网站中实现代码高亮功能,通过使用SyntaxHighlighter库,有效提升用户体验,并提供具体实现代码及下载链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先让大家看个直观的效果:

【项目结构图】

2009022717024986.jpg

【高亮代码图(默认是C#,读者可以根据注释自行修改成为其它语言)】

【效果图(1)】

2009022717044890.jpg

【效果图(2)】

2009022717054437.jpg

这一篇本来想命名为“基于文件驱动的网站开发”的续篇的,可是想想,还是单独列出标题比较清晰,故用当前的名称。

基于文件驱动的网站开发那篇,请参考:http://www.cnblogs.com/OceanChen/archive/2009/02/04/1383794.html

在没有高亮方法时,我们常常自己写样式,当然也有直接使用微软的Word转换成HTML来实现,可是转换出来的HTML冗余非常大。

其实这个不是什么高深的技术了,只是利用Google提供的【SyntaxHighlighter 2.0】库来实现的,如果要下载【SyntaxHighlighter 2.0】请参考如下地址:http://code.google.com/p/syntaxhighlighter/

我写这系列文章主要是考虑这样一个场景:

如果您租用过虚拟服务器就肯定遇到这样的问题,只是数据库的,要另外收钱,而且价格很高!说不定比您的虚拟服务器的价格还高呢!这也是我为什么要写基于文件驱动网站的一个原因,一来可以有效利用我们租用的磁盘空间,二来可以省去数据库【省钱】。

假如说我们打算写个基于文件驱动的【技术】博客,为了客户端用户阅读方面,我们基本上会使用高亮代码来实现,就像这个博客园,我们贴代码的时候都会用到【插入代码】功能来高亮我们的代码,这也正是我写这篇文章的目的,从此您就不必为高亮代码而忧虑了!

好了,不多说了,上代码:

<% @ Page Language = " C# "  AutoEventWireup = " true "  ValidateRequest = " false "   %>

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
    
< title > dp.SyntaxHighlighter </ title >
    
< link type = " text/css "  rel = " stylesheet "  href = " dp.SyntaxHighlighter/Styles/SyntaxHighlighter.css "   />

    
< script src = " dp.SyntaxHighlighter/Scripts/shCore.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushCpp.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushCSharp.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushCss.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushDelphi.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushJava.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushJScript.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushPhp.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushPython.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushRuby.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushSql.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushVb.js "  type = " text/javascript " ></ script >

    
< script src = " dp.SyntaxHighlighter/Scripts/shBrushXml.js "  type = " text/javascript " ></ script >

    
< script language = " javascript "  type = " text/javascript " >
    function getCode(name,css)
    {
        document.getElementById(name).className 
=  css;
        dp.SyntaxHighlighter.ClipboardSwf 
=   ' dp.SyntaxHighlighter/Scripts/clipboard.swf ' ;   
        dp.SyntaxHighlighter.HighlightAll(name);        
    }
    
</ script >

</ head >
< body >
    
<!--  
    
class = " CSharp "  中的CSharp与Scripts文件夹下的JS后缀相关,    
    比如说shBrushCSharp.js,则后缀为:CSharp,即把前面的shBrush
    给去掉,详细参考如下代码:
    
-->
    
< textarea id = " code "  name = " code "   class = " CSharp "  style = " height: 294px; width: 922px; "
        rows
= " 15 "  cols = "" >
    
///   <summary>
    
///  绑定99个编号
    
///   </summary>
    
///   <param name="ddlPosition"></param>
     void  BindDataToPosition(DropDownList ddlPosition)
    {
        
for  ( int  i  =   1 ; i  <   100 ; i ++ )
        {
            ddlPosition.Items.Add(ConvertNumberToString(i));
        }
    }
    
    
</ textarea >
    
< textarea id = " Textarea1 "  name = " Textarea1 "   class = " CSharp "  style = " height: 294px; width: 922px; "
        rows
= " 15 "  cols = "" >
    
///   <summary>
    
///  绑定99个编号
    
///   </summary>
    
///   <param name="ddlPosition"></param>
     void  BindDataToPosition(DropDownList ddlPosition)
    {
        
for  ( int  i  =   1 ; i  <   130 ; i ++ )
        {
            ddlPosition.Items.Add(ConvertNumberToString(i));
        }
    }
    
    
</ textarea >
    
<!--  SyntaxHighlighter CSS and JavaScript  -->

    
< script language = " javascript "  type = " text/javascript " >   
dp.SyntaxHighlighter.ClipboardSwf 
=   ' dp.SyntaxHighlighter/Scripts/clipboard.swf ' ;   
dp.SyntaxHighlighter.HighlightAll(
' code ' );   
    
</ script >

    
< br  />
    
< input id = " btnSubmit "  type = " button "  value = " C# "  onclick = " getCode('Textarea1','CSharp'); "   />
</ body >
</ html >

 

上面的代码是全部的代码,当然您也可以下载项目,您只需下载这个项目直接可以跑了。

下载地址:

http://files.cnblogs.com/OceanChen/SynataxHighlighter.rar

 

 

如果您有更好的高亮代码方法,也请您不必吝啬,共享出来!谢谢了先。

转载于:https://www.cnblogs.com/OceanChen/archive/2009/02/27/1399710.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值