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