前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)
要在前端使用highlight.js来高亮显示从服务端返回的代码字符串，你需要按照以下步骤操作：
- 引入highlight.js库及相关语言高亮样式。
- 在页面中准备一个用于显示代码的元素。
- 使用highlight.js提供的API将返回的代码字符串进行高亮渲染。
以下是一个简单的示例代码：
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Highlight Code Example</title>
<!-- 引入 highlight.js 样式 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
<!-- 引入 highlight.js 库 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
</head>
<body>
<pre><code id="code-container"></code></pre>
<script>
// 假设这是从服务端获取的代码字符串
var codeString = "console.log('Hello, World!');";
// 高亮渲染代码
hljs.highlightAuto(codeString).value;
// 将高亮后的代码设置到页面上的元素中
document.getElementById('code-container').innerHTML = hljs.highlightAuto(codeString).value;
</script>
</body>
</html>在这个例子中，我们假设codeString是从服务端接收到的代码字符串。highlightAuto函数自动检测代码语言并应用相应的高亮样式。然后，我们将高亮后的代码字符串设置到页面上的<code>元素内。
请确保服务器返回的内容类型是正确的（如application/json），以便正确处理从服务端接收到的字符串。如果服务端返回的内容是HTML格式，你可能需要对返回的代码字符串进行HTML实体编码，以避免XSS攻击。
评论已关闭