如何使用js将html、css、js代码格式化并高亮显示

本文链接：https://blog.youkuaiyun.com/NoSuchObjectError/article/details/109528816

本文介绍了一种在前端页面上实现代码格式化及高亮显示的方法。通过引入SyntaxHighlighter插件及相关工具，对HTML、CSS、JavaScript代码进行格式化与高亮处理。文章提供了具体实现步骤及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码格式化，高亮显示，这在我们开发过程中都是司空见惯的功能，各种编辑器都有，在好多网站上也可以在线格式化代码，但是如何在我们的前端页面上插入一段格式化后高亮显示的代码呢？有些小伙伴可能还不会，那么看完这篇文章之后肯定就学会了。

效果图如下：
在这里插入图片描述

自己要去找实现方法可能很难也很花时间，但是别人总结好的东西就会给你省下很多事情了。

多看多总结多分享，跟大家一起进步，加油！！

好了，下面步入正题吧。

<!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文件就可以达到我们自定义代码高亮主题色彩的目的了。