html函数如何实现代码高亮显示 html函数预格式化文本的样式

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

html函数如何实现代码高亮显示 html函数预格式化文本的样式

2025-10-25

浏览次数：次

返回列表

使用HTML标签和CSS样式结合J*aScript库实现代码高亮。1. 用保留格式并语义化代码；2. 通过CSS设置等宽字体、背景色与边框提升可读性；3. 引入Prism.js或Highlight.js等库实现语法着色，如按语言关键字、字符串等分类上色；4. 注意防止内容溢出、正确声明语言类型。该方法结构清晰、兼容性强，是网页代码展示的常用方案。

html函数如何实现代码高亮显示 html函数预格式化文本的样式

在网页中实现代码高亮显示，通常不依赖“HTML函数”（HTML 本身没有函数的概念），而是通过 HTML 结构配合 CSS 样式和 J*aScript 库来完成。下面介绍几种常见且实用的方法。

使用

 和 <code> 标签预格式化文本</H3><p>为了保留代码的缩进和换行，应使用 <strong><pre class="brush:php;toolbar:false;"></strong> 标签包裹代码内容，再结合 <strong><code></strong> 标签语义化地表示代码片段。</p><font color="#0000FF"><pre class='brush:html;toolbar:false;'><pre class="brush:php;toolbar:false;">
<code>
function hello() {
  console.log("Hello, world!");
}
</code>

</strong> 会保留空格和换行，浏览器不会合并空白字符；<strong><code></strong> 则告诉浏览器这是代码内容，常用于样式或可访问性增强。</p><H3>添加基础 CSS 样式美化代码块</H3><p>通过 CSS 设置字体、背景色、边框等，让代码块更清晰易读。</p><font color="#0000FF"><pre class='brush:php;toolbar:false;'>pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}
<p>code {
color: #d63384;
background-color: #f8f9fa;
padding: 2px 4px;
border-radius: 4px;
}

这种样式适用于简单的内联或块级代码展示，但不具备语法高亮功能。

使用第三方库实现语法高亮

若要实现真正的语法高亮（如关键字变色、字符串标绿等），推荐使用成熟的 J*aScript 高亮库：

小爱开放平台

小米旗下小爱开放平台

291 查看详情小爱开放平台

Prism.js：轻量、易用、主题丰富
Highlight.js：自动语言检测，支持多语言

以 Prism.js 为例：

<!-- 引入 Prism CSS 和 JS -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<p><!-- 使用 data-language 指定语言 -->
<pre class="brush:php;toolbar:false;"><code class="j*ascript">
function greet(name) {
return <code>Hello, ${name}!</code>;
}
</code>

Prism 会自动识别 class="xxx" 并对代码进行语法着色。