JavaScript版代码高亮

2023年6月10日下午2:51 • JavaScript

JavaScript版代码高亮是一种常见的在网页中实现代码着色效果的方式。以下是该技术的完整攻略。

什么是JavaScript版代码高亮

JavaScript版代码高亮是一种传统的在前端网页中实现代码着色的方式。它基于JavaScript语言，通过识别代码标签，并在标签内的文本中应用CSS样式，从而实现代码高亮的效果。由于其简单易用，不需要使用额外的插件或库，因此被广泛的采用。

如何实现JavaScript版代码高亮

实现JavaScript版代码高亮的基本步骤如下：

在HTML文件中，包含CSS样式、代码标签和JavaScript代码。
使用JavaScript代码来获取代码标签内的文本。
使用正则表达式匹配文本中需要高亮的部分。
在匹配到的文本中应用CSS样式。

下面是一个示例代码，可以用来实现JavaScript版代码高亮：

<!-- 1. 在HTML文件中引入必要的样式和脚本 -->
<style>
  .code {
    color: #333;
    font-family: monospace;
    background: #f5f8fa;
    padding: 10px;
  }
  .keyword {
    color: #0077AA;
    font-weight: bold;
  }
  .string {
    color: #0f0;
  }
  .number {
    color: #09f;
  }
  .comment {
    color: #aaa;
    font-style: italic;
  }
</style>

<pre><code class="code">
// 2. 使用JavaScript代码匹配需要高亮的部分
const codeEl = document.querySelector('.code');
const codeText = codeEl.innerHTML;

// 3. 使用正则表达式匹配CSS关键字、字符串、数字和注释
const keywordRegex = /\b(var|let|const|if|else|for|while|do|function)\b/g;
const stringRegex = /"([^"]+)"/g;
const numberRegex = /\b\d+\b/g;
const commentRegex = /\/\/(.*)/g;

let highlightedCode = codeText
  .replace(keywordRegex, '<span class="keyword">$1</span>')
  .replace(stringRegex, '<span class="string">"$1"</span>')
  .replace(numberRegex, '<span class="number">$&</span>')
  .replace(commentRegex, '<span class="comment">//$1</span>');

// 4. 使用应用CSS样式高亮代码
codeEl.innerHTML = highlightedCode;
</code></pre>

以上示例代码实现了对代码标签中JavaScript语言中的CSS关键字、字符串、数字和注释的高亮。代码演示了匹配规则、CSS样式和高亮效果。

示例

示例一

假设我们有如下的HTML代码：

<pre><code class="js">
function hello() {
  console.log("Hello, world!");
}
</code></pre>

经过 JavaScript版代码高亮处理后，会被转换为：

<pre><code class="js">
function <span class="keyword">hello</span>() {
  console.<span class="keyword">log</span>(<span class="string">"Hello, world!"</span>);
}
</code></pre>

代码中的JavaScript函数名称、关键字、字符串都会被高亮。可以看出，在前端页面中使用JavaScript版代码高亮，能够使代码更加易读。

示例二

假设我们有如下的HTML代码：

<pre><code class="python">
# 计算斐波那契数列的第 n 项
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)
</code></pre>

经过 JavaScript版代码高亮处理后，会被转换为：

<pre><code class="python">
<span class="comment"># 计算斐波那契数列的第 n 项</span>
<span class="keyword">def</span> <span class="function">fibonacci</span>(n):
    <span class="keyword">if</span> n <span class="operator">&lt;=</span> <span class="number">1</span>:
        <span class="keyword">return</span> n
    <span class="keyword">return</span> <span class="function">fibonacci</span>(n <span class="operator">-</span> <span class="number">1</span>) <span class="operator">+</span> <span class="function">fibonacci</span>(n <span class="operator">-</span> <span class="number">2</span>)
</code></pre>

代码中的Python定义、注释、关键字、操作符、函数名称和数字都会被高亮。可以看出，JavaScript版代码高亮不仅能用于JavaScript代码，也适用于其他编程语言的代码。