代码格式化,高亮显示,这在我们开发过程中都是司空见惯的功能,各种编辑器都有,在好多网站上也可以在线格式化代码,但是如何在我们的前端页面上插入一段格式化后高亮显示的代码呢?有些小伙伴可能还不会,那么看完这篇文章之后肯定就学会了。
效果图如下:
自己要去找实现方法可能很难也很花时间,但是别人总结好的东西就会给你省下很多事情了。
多看多总结多分享,跟大家一起进步,加油!!
好了,下面步入正题吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入jquery作为辅助工具 -->
<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
<!-- SyntaxHighlighter,用于对代码进行高亮的插件 -->
<!-- SyntaxHighlighter插件的核心文件 -->
<script type="text/javascript" src="src/shCore.js"></script>
<!-- <script type="text/javascript" src="src/shAutoloader.js"></script> -->
<!-- 用于对html代码并进行高亮处理 -->
<script type="text/javascript" src="scripts/shBrushXml.js"></script>
<!-- 用于对js代码并进行高亮处理 -->
<script type="text/javascript" src="scripts/shBrushJScript.js"></script>
<!-- 用于对css代码并进行高亮处理 -->
<script type="text/javascript" src="scripts/shBrushCss.js"></script>
<!-- 用于对html代码进行格式化 -->
<script type="text/javascript" src="extra/html_format.js"></script>
<!-- 用于对js代码进行格式化 -->
<script type="text/javascript" src="extra/js_format.js"></script>
<!-- 用于对css代码进行格式化 -->
<script type="text/javascript" src="extra/css_beautify.js"></script>
<!-- SyntaxHighlighter插件的核心样式表 -->
<link type="text/css" rel="stylesheet" href="styles/shCore.css" />
<!-- SyntaxHighlighter插件的默认样式表 -->
<link type="text/css" rel="Stylesheet" href="styles/shCoreDefault.css" />
<!-- SyntaxHighlighter插件的默认主题样式表,可以自己设置主题 -->
<link type="text/css" rel="Stylesheet" href="styles/shThemeDefault.css" />
<title>测试代码高亮</title>
</head>
<body>
<!-- 杂乱的css代码,用于进行测试 -->
<style id="css_code">
input { line-height: 32px; outline: none; border: 1px solid violet; }
</style>
<!-- 杂乱的html代码,用于进行测试 -->
<div id="ahri">
<div> <p> <input type="text"> <input type="number">
<input type="checkbox"> <button type="button"> 普通按钮 </button>
<button type="reset"> 重置按钮 </button>
<button type="submit"> 提交按钮 </button>
</p>
</div>
<p> <span> <button type="button"> button </button>
</span> <span> <button type="reset"> reset </button>
</span> <span> <button type="submit"> submit </button>
</span>
</p>
</div>
<!-- 杂乱的js代码,用于进行测试 -->
<script id="js_code">
function ahri() { const map = new Map([ ['? ?', '你在教我做事??'],
[new Array(5).fill('??'), '你不对劲']
]); console.log(map.get('? ?'));
}
</script>
<!-- 用于显示格式化后高亮的html代码 -->
<div id="kurumi"></div>
<!-- 用于显示格式化后高亮的js代码 -->
<div id="leona"></div>
<!-- 用于显示格式化后高亮的css代码 -->
<div id="dianna"></div>
<div>
<h2>who's your daddy</h2>
</div>
<script type="text/javascript">
format();
function format() {
// 获取要进行处理的html代码内容
html_code = document.getElementById('ahri').innerHTML.replace(/^\s+/, '');
tabsize = 2; // 缩进位数
tabchar = ' '; // 缩进方式为空格
if (tabsize == 1) {
tabchar = '\t'; // 缩进方式为tab
}
// SyntaxHighlighter插件处理代码高亮时需要使用到pre标签
var pre = document.createElement('pre');
// 设置pre标签的class名称为这个就可以对html代码进行高亮处理
pre.className = "brush: html;"
if (html_code && html_code.charAt(0) === '<') {
// 使用style_html方法对html代码进行格式化
pre.innerHTML = style_html(html_code, tabsize, tabchar, 80);
} else {
// 使用js_beautify方法对js代码进行格式化
pre.innerHTML = js_beautify(html_code, tabsize, tabchar);
}
// 将pre标签内容加入到dom中
$(`#kurumi`).append(pre);
// 获取js代码内容
js_code = document.getElementById('js_code').innerHTML.replace(/^\s+/, '');
// 创建pre标签同上
var js_pre = document.createElement('pre');
// 这里的class名称要设置要变为以下内容
js_pre.className = "brush: jscript;"
// 对js代码进行格式化
js_pre.innerHTML = js_beautify(js_code, tabsize, tabchar);
// 将pre标签内容放入到dom中
$('#leona').append(js_pre);
// css代码格式化的方法的配置参数
var options = {
indent: ' ', // 缩进使用空格或 \t(tab)
// openbrace: 'separate-line' // 使用第一个{的时候是否换行
}
// 获取css代码内容
var css_code = document.getElementById('css_code').innerHTML.replace(/^\s+/, '');
// 创建pre标签同上
var css_pre = document.createElement('pre');
// 将class名称改一下
css_pre.className = "brush: css;"
// 格式化css代码
css_pre.innerHTML = cssbeautify(css_code, options);
// 将pre标签内容放入到dom中
$('#dianna').append(css_pre);
// 配置一下SyntaxHighlighter插件
Object.assign(SyntaxHighlighter.defaults, {
toolbar: false, // 是否显示帮助的?按钮
'quick-code': false // 是否双击后编辑代码
})
// 调用此方法就可以将代码进行高亮了
// 如果使用SyntaxHighlighter.all()无法出现代码高亮效果,就直接使用SyntaxHighlighter.highlight();
SyntaxHighlighter.all();
}
</script>
</body>
</html>
代码基本都很简单,如果想要实现更多的功能可以去看看工具方法的源码,我也是看了源码慢慢摸索出来的,希望能对大家有所帮助。
源代码可以在这里自行下载查看。
如果大家对高亮代码的颜色有所要求,那么也可以自己设置代码高亮颜色,参考方法如下:
我们可以参考VScode的主题样式来配置自己的代码高亮展示
在VScode中打开开发者模式,我们就可以像在浏览器中那样查看VScode编辑器中的代码主题颜色样式了,然后在页面上也同样打开开发者模式,一个个元素去对照,修改对应的css文件就可以达到我们自定义代码高亮主题色彩的目的了。