代码高亮插件SyntaxHighlighter

本文介绍了如何使用语法高亮器来美化网站上的代码展示效果。首先需要引入核心的JS和CSS文件,然后根据需要引入特定语言的JS文件及主题CSS。通过在HTML中添加特定的<pre>标签即可实现对不同语言代码的高亮。

第一
      解压压缩包,scripts文件夹中包含了各种语言的JS文件,在styles文件夹中是各种显示高亮的主题

第二
  如何使用?首先要引入其核心javascript文件shCore.js和核心CSS文件shCore.css,这两个是必选要引入的。其次引入你要高亮的语言JS,比如我想高亮显示的是C#,那么必须引入在scripts文件夹中的shBrushCSharp.js,最后引入高亮显示的主题CSS,默认的为shThemeDefault.css

第三
      下面以高亮显示JavaScript代码为例讲解。

     引入JS和CSS文件之后还要在页面上写相关代码。

 

     引入JS和CSS文件之后还要在页面上写相关代码。

====================================
   

   <script src="syntaxhighlighter/scripts/shCore.js" type="text/javascript"></script>

<link href ="syntaxhighlighter/styles/shCore.css" rel="Stylesheet" type="text/css" />

<script src="syntaxhighlighter/scripts/shBrushCSharp.js" type="text/javascript"></script>

<link href="syntaxhighlighter/styles/shThemeDefault.css" type="text/css" rel="Stylesheet" />

<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushCss.js"></script>

<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushJScript.js"></script>

<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushPhp.js"></script>

<script type="text/javascript" src="syntaxhighlighter/scripts/shBrushXml.js"></script>

<script type="text/javascript">

SyntaxHighlighter.config.clipboardSwf = syntaxhighlighter/scripts/clipboard.swf;

SyntaxHighlighter.all(code);

</script>

  

Html代码:

========================

在后台编辑器FCK或者ckinder中添加<pre class="brush:c-sharp" name="code"></pre>==这里以C#代码为例所以添加brush:c-sharp;

 效果图:

转载于:https://www.cnblogs.com/zcds-jk/p/4345259.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值