如何区分字符串中的代码块与普通字符串并使用highlight.js高亮

要让highlight.js只高亮代码块、不影响普通文本，核心是把普通文本和代码块拆分开，分别用不同的HTML结构包裹，只给代码块加上高亮所需的标记。具体步骤如下：

1. 拆分原始内容 #

先处理你手里的字符串：

• 去掉前后的双引号，得到干净的内容：explain this code dependencies {...}
• 拆分出普通文本和代码块：
  • 普通文本：explain this code
  • 代码块：从dependencies {到结尾的整个Gradle依赖配置段

你可以通过固定标记（比如找dependencies {的位置）或者正则表达式来拆分，比如用正则匹配/(dependencies \{[\s\S]*?\})/就能精准提取代码块部分。

2. 构建正确的HTML结构 #

把普通文本放在常规的文本标签里（比如<p>），代码块用<pre><code>包裹，并加上对应语言的类名（这里是Gradle，所以加class="language-gradle"）。同时要注意对代码块里的特殊字符做HTML转义，避免格式错乱或XSS问题。

举个前端实现的例子：

// 原始字符串
const originalStr = `"explain this code 
 dependencies {
    implementation 'com.squareup.okhttp3:okhttp:3.9.1'
    implementation 'org.jetbrains.kotlin:kotlin-stdlib:1.6.20'
    implementation 'org.eclipse.lsp4j:org.eclipse.lsp4j:0.8.0'
    //implementation 'org.conscrypt:conscrypt-android:1.4.0'
    // runtimeOnly 'org.conscrypt:conscrypt-android:2.2.1'
    implementation 'com.google.android:android:4.1.1.4'
    testImplementation 'org.junit.jupiter:junit-jupiter-api:5.7.0'
    testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine:5.7.0'
}"`;

// 清理并拆分内容
const trimmedStr = originalStr.slice(1, -1);
const regex = /(dependencies \{[\s\S]*?\})/;
const matches = trimmedStr.match(regex);
const regularText = trimmedStr.replace(regex, '').trim();
const codeBlock = matches[1];

// 转义HTML特殊字符
function escapeHtml(text) {
  return text.replace(/&/g, '&')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;')
             .replace(/'/g, '&#039;');
}

// 插入到页面
const container = document.getElementById('your-content-container');
container.innerHTML = `
  <p>${regularText}</p>
  <pre><code class="language-gradle">${escapeHtml(codeBlock)}</code></pre>
`;

// 调用highlight.js高亮
hljs.highlightAll();

3. 确保highlight.js支持对应语言 #

如果你的highlight.js没有包含Gradle的高亮模块，需要手动引入（本地部署的话把对应语言的文件加到项目里），不然代码块不会被正确高亮。

这样处理后，普通文本会以正常样式显示，只有代码块会被highlight.js高亮。

内容的提问来源于stack exchange，提问作者Ravindra Pawar