网页代码如何设置高亮显示？

2024-12-21 07:24:54 php 1450

在网页上设置代码高亮显示有多种方法，以下是一些常见的方法和详细步骤：

1. 使用 JavaScript 库

JavaScript 库是实现代码高亮的一个方便方法，支持多种语言和自定义样式。常见的库包括:

1.1. Prism.js

步骤：

引入 Prism.js：在 HTML <head> 部分引入 Prism.js 和 Prism 的 CSS 文件。

html
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>

添加代码块：使用 <pre> 和 <code> 标签包裹代码，并添加适当的类名，如 language-php。
```
html
<pre><code class="language-php">
<?php
echo "Hello, World!";
?>
</code></pre>
```

特性：
- 支持多种语言。
- 主题和样式可以自定义。
- 易于集成和使用。

1.2. Highlight.js

步骤：

引入 Highlight.js：在 HTML <head> 部分引入 Highlight.js 和样式文件。

html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

添加代码块：使用 <pre> 和 <code> 标签包裹代码，并添加适当的类名，如 php.
```
html
<pre><code class="php">
<?php
echo "Hello, World!";
?>
</code></pre>
```

特性：
- 自动检测语言。
- 支持多种主题。
- 轻量级且易于使用。

2. 使用 CSS

如果不想使用 JavaScript 库，可以通过自定义 CSS 实现基本的代码高亮，但这通常需要手动设置样式。

步骤：

编写 HTML：使用 <pre> 和 <code> 标签包裹代码。

html
<pre><code class="php">
<?php
echo "Hello, World!";
?>
</code></pre>

编写 CSS：定义样式来突出显示代码中的关键字和语法。

css
pre {
    background: #f4f4f4;
    padding: 10px;
    border-radius: 5px;
    overflow: auto;
}

code {
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
}

.php .keyword {
    color: blue;
}

.php .string {
    color: green;
}

手动添加类：手动为代码中的不同部分添加类。

html
<pre><code class="php">
<span class="keyword"><?php</span>
<span class="keyword">echo</span> <span class="string">"Hello, World!";</span>
<span class="keyword">?></span>
</code></pre>

特性：
- 灵活度高，但需要更多的手动配置。
- 适合自定义样式需求。

3. 使用 CMS 插件

如果使用内容管理系统（CMS）如 WordPress，可以使用插件来实现代码高亮。

步骤：
1. 安装插件：在 WordPress 插件目录中搜索和安装如 SyntaxHighlighter Evolved 或 Crayon Syntax Highlighter。
2. 配置插件：根据插件的设置进行配置，选择适当的样式和语言。
3. 插入代码：使用插件提供的短代码或编辑器按钮插入代码块。
特性：
- 适合非技术用户。
- 提供图形化配置界面。

4. 示例代码

以下是一个结合 Prism.js 和基本 HTML 的示例：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Highlight Example</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/themes/prism.min.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.28.0/prism.min.js"></script>
</head>
<body>
    <h1>Code Highlight Example</h1>
    <pre><code class="language-php">
    <?php
    echo "Hello, World!";
    ?>
    </code></pre>
</body>
</html>

通过上述方法，你可以实现网页上的代码高亮显示，提升代码的可读性和美观性。选择适合你的需求和技术栈的解决方案来实现。