如何给网站文章中的代码添加高亮效果？

为了在网站文章中的代码添加高亮效果，通常可以使用以下几种方法：
1. 使用HTML和CSS：
通过HTML标签来标识代码块，然后利用CSS来添加样式。以下是一个基本的示例：

 <pre><code>
    .example {
      color: #333;
      background-color: #f5f5f5;
      padding: 10px;
    }
</code></pre>

然后在CSS中定义样式：

<pre><code>
    .language-css {
      color: #333; /* 设置字体颜色 */
      background-color: #f5f5f5; /* 设置背景颜色 */
      font-family: monospace; /* 设置字体类型 */
      font-size: 14px; /* 设置字体大小 */
    }
</code></pre>

2. 使用JavaScript库：
有许多JavaScript库可以帮助实现代码高亮，例如 Prism.js、Highlight.js 和 SyntaxHighlighter。
- Prism.js 的使用示例：
首先，在HTML中引入 Prism.js 和相关的CSS文件：

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

然后，在文章中使用 `<pre>` 和 `<code>` 标签包裹代码，并指定语言：

<pre><code>body { background-color: #f0f0f0; }</code></pre>

- Highlight.js 的使用示例：
同样，首先引入 Highlight.js 和相关的CSS文件：

<pre><code>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
</code></pre>

然后在文章中使用 `<pre>` 和 `<code>` 标签，并指定语言：

<pre><code class="hljs css">body { background-color: #f0f0f0; }</code></pre>

最后，在JavaScript中初始化Highlight.js：

<pre><code>
hljs.highlightAll();
</code></pre>

3. 使用Markdown语法：
   如果你的网站支持Markdown，可以直接使用Markdown的语法来添加代码高亮：

<pre><code>
body { background-color: #f0f0f0; }
</code></pre>

这将在Markdown渲染时自动应用代码高亮。
选择哪种方法取决于网站的具体需求和所使用的平台或框架。一般来说，使用JavaScript库可以提供更丰富和专业的代码高亮效果。