如何在web中动态高亮显示sql脚本

1、静态语法高亮

适用于sql脚本已经嵌入在html的形式;

1.1、显示效果

在这里插入图片描述

1.2、源码

<!DOCTYPE html>
<html>
<head>
<title>highlight语法着色</title>
<meta charset="utf-8">
<link rel="stylesheet" href="../../util/highlight/styles/vs2015.css">
<script type="text/javascript" src="../../util/highlight/highlight.pack.js"></script>
</head>
<body>
	<div id="main" style="height: 700px; font-size: 24px;">
		<pre>
			<code class="sql">
SELECT 1 AS ID, '张三' AS NAME, '2019-01-01' AS birthday FROM dual UNION ALL 
SELECT 2 AS ID, '李四' AS NAME, '2019-02-01' AS birthday FROM dual UNION ALL 
SELECT 3 AS ID, '王五' AS NAME, '2019-03-01' AS birthday FROM dual 
ORDER BY id
	</code>
		</pre>
	</div>
	<script>
		hljs.initHighlighting();
	</script>

</body>
</html>

2、动态语法高亮

静态语法高亮，适用于sql脚本已经嵌入在html的形式;
如果sql脚本是通过后台动态生成，则需要使用如下方法将sql进行动态渲染：

var str_sql="SELECT 1 AS ID, '张三' AS NAME, '2019-01-01' AS birthday FROM dual";
var format_sql= hljs.highlight('sql', str_sql).value;

2.1、显示效果：

参考w3school的在线编辑样式：
在这里插入图片描述

2.2、源码：

index.html

<!DOCTYPE html>
<html>
<head>
<title>动态语法高亮</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="tc.css" />
<link rel="stylesheet" href="../../util/highlight/styles/vs2015.css">
<script type="text/javascript"src="../../util/highlight/highlight.pack.js"></script>
<script type="text/javascript">
	function refresh() {
		var highlightDiv = document.getElementById('resultDiv');
		var str_sql = document.getElementById('TestCode').value;
		var format_sql = hljs.highlight('sql', str_sql).value;
		highlightDiv.innerHTML = "<pre><code class='sql'>" + format_sql
				+ "</code></pre>";
	}
</script>
</head>
<body id="editor">
	<div id="wrapper">
		<div id="header">
			<h1>TIY-动态语法高亮</h1>
		</div>
		<div id="butt">
			<input type="button" value="提交代码" onclick="refresh()">
		</div>
		<div id="CodeArea">
			<h2>编辑您的代码：</h2>
			<textarea id="TestCode" rows="50" cols="80">SELECT 1 AS ID, '张三' AS NAME, '2019-01-01' AS birthday FROM dual</textarea>
		</div>
		<div id="result">
			<h2>查看结果:</h2>
			<div id="resultDiv"></div>
		</div>
		<div id="footer">
			<p>请在上面的文本框中编辑您的代码，然后单击提交按钮测试结果。</p>
		</div>
	</div>
</body>
</html>

样式文件：tc.css

*	{
	margin:0;
	padding:0;
	border:0;
	background-color:transparent;
	}

div#wrapper
	{
	margin: 0 auto;
	text-align: left;
	border:1px solid #c5c5c5;
	}

body#editor	{
	text-align:left;
	font: 12px Verdana, Arial, Helvetica, sans-serif;
	}

div#header	{
	color:#000;
	height:90px;
	background:#fff;
	border-bottom: 1px solid #c5c5c5;
	background: #f5f5f5;
	min-width:1000px;
	}

#header h1	{
	margin:20px 0 0 0;
	font-size:30px;
	float:left;
	color: #a5a5a5;
	}

#header #ad {
	float:left;
	margin:0 0 0 10px;
	border:0px solid #fff;
	width:728px;
	height:90px;
	}

div#butt	{
	height:50px;
	border-bottom: 1px solid #c5c5c5;
	background:#fff;
	}

div#butt input {
	margin:10px 0 0 10px;
	background:red;
	color:#fff;
	width:150px;
	height:30px;
	font:14px Verdana, Arial, Helvetica, sans-serif;
	}

div#CodeArea	{
	float:left;
	height:435px;
	width:50%;
	margin-left:5px;
	}

#CodeArea h2	{
	margin:10px 0 6px 5px;
	color:red;
	font-size:14px;
	}

#CodeArea textarea{
	width:100%;
	height:400px;
	overflow:auto;
	border:1px solid #c5c5c5;
		border-right:0;

	font:14px "Courier New", Courier, monospace;
	}

div#result	{
	float:left;
	height:435px;
	width:49%;
	}

#result h2	{
	margin:10px 0 6px 5px;
	color:red;
	font-size:14px;
	}

#result #resultDiv{
	width:100%;
	height:400px;
	border:1px solid #c5c5c5;
	}

#footer	{
	clear:both;
	background:#fff;
	border:1px solid #f5f5f5;
	text-align:left;
	background: #f5f5f5;
	}

#footer	p {
	margin:10px;
	color: #000000;
	font-weight:bold;
	}

Highlight.js插件安装

登录官方网站：https://highlightjs.org/download/
下载插件包，解压到合适的目录即可：
在这里插入图片描述

Highlight.js插件API文档

关于highlight插件传入参数的含义，请查找官方文档：
https://highlightjs.readthedocs.io/en/latest/api.html
在这里插入图片描述