作者：呵呵哒 | 来源：互联网 | 2023-09-18 18:22
代码格式化&＃xff0c;高亮显示&＃xff0c;这在我们开发过程中都是司空见惯的功能&＃xff0c;各种编辑器都有&＃xff0c;在好多网站上也可以在线格式化代码&＃xff0c;但是如何在我们的前端页面上插入一段格式化后高亮显示的代码呢&＃xff1f;有些小伙伴可能还不会&＃xff0c;那么看完这篇文章之后肯定就学会了。
效果图如下&＃xff1a;
自己要去找实现方法可能很难也很花时间&＃xff0c;但是别人总结好的东西就会给你省下很多事情了。
多看多总结多分享&＃xff0c;跟大家一起进步&＃xff0c;加油&＃xff01;&＃xff01;
好了&＃xff0c;下面步入正题吧。
<html><head><meta charset&＃61;"utf-8"><script type&＃61;"text/Javascript" src&＃61;"js/jquery-1.4.2.js">script><script type&＃61;"text/Javascript" src&＃61;"src/shCore.js">script><script type&＃61;"text/Javascript" src&＃61;"scripts/shBrushXml.js">script><script type&＃61;"text/Javascript" src&＃61;"scripts/shBrushJScript.js">script><script type&＃61;"text/Javascript" src&＃61;"scripts/shBrushCss.js">script><script type&＃61;"text/Javascript" src&＃61;"extra/html_format.js">script><script type&＃61;"text/Javascript" src&＃61;"extra/js_format.js">script><script type&＃61;"text/Javascript" src&＃61;"extra/css_beautify.js">script><link type&＃61;"text/css" rel&＃61;"stylesheet" href&＃61;"styles/shCore.css" /><link type&＃61;"text/css" rel&＃61;"Stylesheet" href&＃61;"styles/shCoreDefault.css" /><link type&＃61;"text/css" rel&＃61;"Stylesheet" href&＃61;"styles/shThemeDefault.css" /><title>测试代码高亮title>head><body><style id&＃61;"css_code">input { line-height: 32px; outline: none; border: 1px solid violet; }style><div id&＃61;"ahri"><div> <p> <input type&＃61;"text"> <input type&＃61;"number"><input type&＃61;"checkbox"> <button type&＃61;"button"> 普通按钮 button><button type&＃61;"reset"> 重置按钮 button><button type&＃61;"submit"> 提交按钮 button>p>div><p> <span> <button type&＃61;"button"> button button>span> <span> <button type&＃61;"reset"> reset button>span> <span> <button type&＃61;"submit"> submit button>span>p>div><script id&＃61;"js_code">function ahri() { const map &＃61; new Map([ [&＃39;? ?&＃39;, &＃39;你在教我做事&＃xff1f;&＃xff1f;&＃39;],[new Array(5).fill(&＃39;??&＃39;), &＃39;你不对劲&＃39;]]); console.log(map.get(&＃39;? ?&＃39;));}script><div id&＃61;"kurumi">div><div id&＃61;"leona">div><div id&＃61;"dianna">div><div><h2>who&＃39;s your daddyh2>div><script type&＃61;"text/Javascript">format();function format() {html_code &＃61; document.getElementById(&＃39;ahri&＃39;).innerHTML.replace(/^\s&＃43;/, &＃39;&＃39;);tabsize &＃61; 2; tabchar &＃61; &＃39; &＃39;; if (tabsize &＃61;&＃61; 1) {tabchar &＃61; &＃39;\t&＃39;; }var pre &＃61; document.createElement(&＃39;pre&＃39;);pre.className &＃61; "brush: html;"if (html_code && html_code.charAt(0) &＃61;&＃61;&＃61; &＃39;<&＃39;) {pre.innerHTML &＃61; style_html(html_code, tabsize, tabchar, 80);} else {pre.innerHTML &＃61; js_beautify(html_code, tabsize, tabchar);}$(&＃96;#kurumi&＃96;).append(pre);js_code &＃61; document.getElementById(&＃39;js_code&＃39;).innerHTML.replace(/^\s&＃43;/, &＃39;&＃39;); var js_pre &＃61; document.createElement(&＃39;pre&＃39;);js_pre.className &＃61; "brush: jscript;"js_pre.innerHTML &＃61; js_beautify(js_code, tabsize, tabchar);$(&＃39;#leona&＃39;).append(js_pre);var options &＃61; {indent: &＃39; &＃39;, }var css_code &＃61; document.getElementById(&＃39;css_code&＃39;).innerHTML.replace(/^\s&＃43;/, &＃39;&＃39;);var css_pre &＃61; document.createElement(&＃39;pre&＃39;);css_pre.className &＃61; "brush: css;"css_pre.innerHTML &＃61; cssbeautify(css_code, options);$(&＃39;#dianna&＃39;).append(css_pre);Object.assign(SyntaxHighlighter.defaults, {toolbar: false, &＃39;quick-code&＃39;: false })SyntaxHighlighter.all();}script>body>
html>
代码基本都很简单&＃xff0c;如果想要实现更多的功能可以去看看工具方法的源码&＃xff0c;我也是看了源码慢慢摸索出来的&＃xff0c;希望能对大家有所帮助。
源代码可以在这里自行下载查看。
如果大家对高亮代码的颜色有所要求&＃xff0c;那么也可以自己设置代码高亮颜色&＃xff0c;参考方法如下&＃xff1a;
我们可以参考VScode的主题样式来配置自己的代码高亮展示
在VScode中打开开发者模式&＃xff0c;我们就可以像在浏览器中那样查看VScode编辑器中的代码主题颜色样式了&＃xff0c;然后在页面上也同样打开开发者模式&＃xff0c;一个个元素去对照&＃xff0c;修改对应的css文件就可以达到我们自定义代码高亮主题色彩的目的了。
京公网安备 11010802041100号