如何让页面里面的java代码高亮显示

最新推荐文章于 2023-04-10 23:07:03 发布

糖醋里脊不要葱

最新推荐文章于 2023-04-10 23:07:03 发布

阅读量5.2k

点赞数 1

分类专栏：工具类插件文章标签： syntaxhighlighter 代码高亮 textarea标签

本文链接：https://blog.csdn.net/bu123dian/article/details/50965367

版权

工具类同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

插件

1 篇文章 0 订阅

订阅专栏

资源下载：

http://alexgorbatchev.com/SyntaxHighlighter/download/ 点击打开链接

示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/shCore.css">
<link rel="stylesheet" type="text/css" href="syntaxhighlighter/shThemeDefault.css">
<script type="text/javascript" src="syntaxhighlighter/shCore.js"></script>
<script type="text/javascript" src="syntaxhighlighter/shBrushJava.js"></script>
<script type="text/javascript">
	SyntaxHighlighter.all();
</script>
<style type="text/css">
	#b{
		border:1px solid #f3f3f3;
	}
</style>
</head>
<body class="">
<textarea class="brush: java;title:'';toolbar:'';" cols="100" rows="10" id="define_id">
	public void test(){
		System.out.println("test the high lighter");
	}
	@interface
	public interface Test{
		private static int i;
	}
</textarea>

<pre class="brush: java">
	public void test(){
		System.out.println("test the high lighter");
	}
	@interface
	public interface Test{
		private static int i;
	}
</pre>
</body>
</html>

上面就是示例代码，

第一步，当把资源下载下来之后，解压，然后依次引入

styles/shCore.css, styles/shThemeDefault.css, scripts/shCore.js,

最后一个js就是上面示例提到的shBrushJava.js这个是根据个人需要去引入，比如你在body元素里面需要渲染javascript的代码，就需要引入shBrushJScript.js, 具体可参照下面这个链接

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ 点击打开链接

第二步，这里只介绍下学习的方式

在上面示例代码中有三个用分号分割开来的三个参数，主要就是定义渲染时候的一些特性，具体可研究下载的资源里面的src/shCore.js这个文件，这个文件里面是源码，大家可参照里面的一些属性灵活的配置，或者可以看下资源文件里面自带的例子tests/cases...

首先看示例代码的效果

在浏览器的控制台运行SyntaxHighlighter.highlight(document,document.getElementById("define_id"));

注：这行代码可以绑定到textarea的onchange事件中

下面这个是运行语句之后的效果：

好了，我暂时也只研究了这么多，大家也可以看下官网上的文档说明，因为我主要是想给textarea这个元素里面的内容渲染，所以对于pre没有介绍太多，嘿嘿~