码迷,mamicode.com
首页 > Web开发 > 详细

仿CSND实现网页中程序代码高亮显示

时间:2016-07-13 17:21:48      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

关于SyntaxHighlighter 3.0.83的使用

下载SyntaxHighlighter

可以到官方网站下载

在页面引入

  • 引入shCore.js and shCore.css
  • 添加支持相应语言的js文件
    需要支持什么语言,就引入该语言对应的JS文件
    技术分享
  • 引入shThemeDefault.css
  • 将需要高亮显示的代码放置在<pre /> 或是<script />中
  • 调用SyntaxHighlighter.all() 方法

实例

程序如下:

<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="styles/shCore.css"/>
<link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
<script type="text/javascript" src="scripts/shCore.js"></script>
<script type="text/javascript" src="scripts/shBrushPhp.js"></script>
</script>
<script type="text/javascript">
    SyntaxHighlighter.all();
</script>

<h1>测试</h1>
<pre class="brush: php;">
  /**
  *
  *@author dequan
  */ 
  Class Person{
    public function say(){
        echo ‘hello world‘;
    }
  }      
</pre>

效果如下图
技术分享

将SyntaxHighlighter 整合到OneThink中的kindeditor中

修改code.js文件

技术分享
将48行注释掉,改为49行
技术分享
在相应的现实视图中添加syntaxhighlighter需要的CSS以及JS文件

测试

技术分享

技术分享

前端预览(http://www.findme.wang/index.php?s=/Blog/detail/id/20.html

技术分享

okey了

仿CSND实现网页中程序代码高亮显示

标签:

原文地址:http://blog.csdn.net/hsd2012/article/details/51892739

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!