您的位置：首页 > Web前端 > JavaScript

代码高亮javascript 插件 syntaxhighlighter 使用介绍

2015-12-21 13:37 706 查看

在网上找了几个代码高亮的插件，syntaxhighlighter 用起来比较顺手。

官网
http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
首先下载，然后解压，然后拷贝到网页文件目录。

新建一个 index.html来测试

首先在 <head></head> 中引入 js 以及 css 。

<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>

然后在写代码的时候，把代码包裹在 <pre></pre> 标签中。
<body>
<pre class="brush: cpp;">
void main()
{
print("helloworld!");
return 0;
}
</pre>
</body>

这个简单的测试页面全部内容如下
<html>

<head>
<title>test highlight</title>

<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter_3.0.83/scripts/shBrushCpp.js"></script>
<link type="text/css" rel="stylesheet" href="syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
<script type="text/javascript">SyntaxHighlighter.all();</script>
</head>

<body>
<pre class="brush: cpp;">
void main()
{
print("helloworld!");
return 0;
}
</pre>
</body>

</html>

在firefox中查看效果

示例代码下载：
http://pan.baidu.com/s/1qXdSGoO

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航