使用syntaxhighlighter在网页中高亮代码

2020/1/15 位置：服务器

学习总结博客免不了要粘贴自己的代码。但是直接将代码贴在网页上不够美观。如果在网页里能有一个可以高亮代码的位置就好了。经过博主的一番搜索，终于找到并学会了syntaxhighlighter的使用方法。

学习的资源来自源网页https://blog.csdn.net/huutu/article/details/50371460 这里把我个人的总结于此。

关于C语言的高亮效果如下：

		void main()
		{
			print("我是一个木的感情的例子...");
			return 0;
		}

一、下载并分离出syntaxhighlighter的js文件夹和css文件夹。

这里推荐两个渠道下载：
①从上面的链接中下载这个博主放在文章最后的例子工程。
②使用的方式可以参考文档：http://alexgorbatchev.com/SyntaxHighlighter/manual/installation.html
jar包的下载地址：https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83
因为个人是看的最上面的博主的博文学习的所以这里以渠道①的文件结构说明（其实两种渠道的文件结构也十分相似）。
步骤：
1.新建一个你自己的新网页的文件夹。比如叫做“New”。
2.按照html——>syntaxhighlighter_3.0.83打开下载下来的文件夹。从文件夹中复制出“scripts”和“styles”。这里“scripts”存放着所有支持的语言的js文件，“styles”里是css文件。并把他们粘贴到之前自己创建的文件夹中。

二、建立一个最简单的html文件。

在“New”文件夹中新建一个HTML文件，如“sample.html”。并写入以下代码：

	<html>
	<head>
		位置1
	</head>
	<body>
		位置2
	</body>
	</html>

三、引用js和css文件。

在sample.html的位置1，写入以下代码：

	
	<!--这里是引用了支持C++的js文件。-->
	<!--这里是引用了css文件。可以更换不同的风格。-->

四、编写要高亮的代码段。

在位置2，写入类似以下的代码段：

	<!--这里的cpp就表示你下面的代码段是C语言的。-->
		void main()
		{
			print("这里是C语言的高亮!");
			return 0;

同样的道理，如果你打算添加一个Java代码，就将上面的cpp改成java即可。
当然，同时你也需要在位置1添加支持Java的js引用：

	<!--这里是引用了支持java的js文件。-->

关于其他语言的高亮，类似以上方法。
本文的所有代码段的显示都是使用该方法实现的。
希望对看到它的你有所帮助。