html 代码高亮

HTML代码高亮可以使用以下方法：

使用CSS样式表

在CSS样式表中定义代码高亮的样式，然后将代码包裹在<pre>和<code>标签中，使用class属性指定样式类。

例如：

<style>
    .highlight {
        background-color: #f8f8f8;
        border: 1px solid #ccc;
        padding: 10px;
        font-family: monospace;
        font-size: 14px;
    }
    .highlight span {
        color: #f00;
    }
</style>

<pre class="highlight"><code>
    &lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

使用JavaScript插件

可以使用一些JavaScript插件来实现代码高亮，如Prism.js、Highlight.js等。

例如：

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

<pre><code class="language-html">
    &lt;html&gt;
    &lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>

<script>
    Prism.highlightAll();
</script>

以上两种方法都可以实现HTML代码高亮，具体选择哪种方法取决于个人喜好和项目需求。

继续为您解答。

使用在线工具

还可以使用在线工具来实现HTML代码高亮，如Codepen、JSFiddle等。这些工具提供了代码编辑器和预览窗口，可以直接在网页上编辑和预览代码，并且支持代码高亮。

例如，在Codepen上可以创建一个新的HTML项目，然后在编辑器中输入HTML代码，Codepen会自动为代码添加高亮效果。您可以在预览窗口中查看代码的效果，并且可以分享您的代码给其他人。

使用编辑器插件

如果您使用的是代码编辑器，如Sublime Text、Visual Studio Code等，那么可以安装相应的插件来实现HTML代码高亮。这些插件可以根据您的编辑器设置自动为代码添加高亮效果，让您更加方便地编辑和查看代码。

例如，在Visual Studio Code中可以安装HTML插件，该插件可以为HTML代码添加高亮效果，并且提供了代码补全、代码格式化等功能，让您更加高效地编写HTML代码。

总结

以上就是几种实现HTML代码高亮的方法，您可以根据自己的需求选择适合自己的方法。无论您是使用CSS样式表、JavaScript插件、在线工具还是编辑器插件，都可以轻松地为HTML代码添加高亮效果，让您更加方便地编辑和查看代码。