html 显示js代码怎么写

在HTML中显示JavaScript代码的方法包括使用预格式化标签、特殊字符实体以及代码高亮库。具体方法有：使用<pre>标签、<code>标签、和HTML实体编码。 使用<pre>标签可以保留格式，<code>标签用于标记代码块，而HTML实体编码则用于显示特殊字符。下面详细讲解其中的一种方法。

使用<pre>和<code>标签：

<pre><code>&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;</code></pre>

这种方法结合了<pre>和<code>标签，并使用HTML实体编码来显示代码中的特殊字符。接下来，我们会详细探讨如何在HTML中显示JavaScript代码的不同方法和注意事项。

一、使用`<pre>`和`<code>`标签

<pre>标签用于保留文本的格式，而<code>标签用于标记代码块。这种方法非常适合显示代码片段。

1.1 基本用法

<pre><code>&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;</code></pre>

在上面的例子中，我们使用了HTML实体编码来替换特殊字符，如<替换为<，>替换为>。这样可以确保浏览器不会解析这些字符为实际的HTML或JavaScript代码。

1.2 代码高亮

为了让代码更具可读性，可以结合CSS或JavaScript库（如Highlight.js）实现代码高亮。

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code class="html">&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;</code></pre>

在这个例子中，我们使用了Highlight.js库来自动高亮代码块。只需要引入库并调用hljs.highlightAll()方法即可。

二、使用HTML实体编码

HTML实体编码是将特殊字符转换为对应的HTML实体，从而避免浏览器将其解析为实际的代码。

2.1 常见HTML实体

< 替换为 <
> 替换为 >
& 替换为 &
" 替换为 "
' 替换为 '

2.2 应用实例

<pre><code>
&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;
</code></pre>

通过使用HTML实体编码，可以确保代码片段在网页中正确显示。

三、使用模板引擎

一些模板引擎（如Handlebars、EJS）提供了自动转义功能，能够轻松显示代码片段。

3.1 Handlebar示例

<script id="code-template" type="text/x-handlebars-template">
<pre><code>
{{{code}}}
</code></pre>
</script>
<script>
  var source = document.getElementById('code-template').innerHTML;
  var template = Handlebars.compile(source);
  var context = { code: '&lt;script&gt;function sayHello() { alert('Hello, World!'); }&lt;/script&gt;' };
  var html = template(context);
  document.getElementById('output').innerHTML = html;
</script>
<div id="output"></div>

在这个例子中，我们使用Handlebars模板引擎来动态生成HTML内容，并自动转义特殊字符。

四、使用第三方库

有许多第三方库可以简化在HTML中显示代码的过程，如Prism.js、Highlight.js等。

4.1 Prism.js 示例

<link href="https://cdn.jsdelivr.net/npm/prismjs/themes/prism.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
<pre><code class="language-js">
&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;
</code></pre>

Prism.js是一个轻量级的代码高亮库，支持多种语言和主题。

4.2 Highlight.js 示例

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
<pre><code class="html">&lt;script&gt;
  function sayHello() {
    alert('Hello, World!');
  }
&lt;/script&gt;</code></pre>

Highlight.js同样支持多种语言和主题，并且易于集成到现有项目中。

五、注意事项

在显示代码时，需要注意以下几点：

5.1 安全性

避免直接在HTML中嵌入未转义的代码，以防止XSS（跨站脚本）攻击。使用HTML实体编码或模板引擎来自动转义特殊字符。

5.2 可读性

使用代码高亮库可以显著提升代码的可读性。选择合适的高亮库和主题，以确保代码清晰易读。

5.3 维护性

在大型项目中，使用模板引擎或第三方库可以提高代码的可维护性。选择适合项目需求的工具，以简化代码显示和管理。

六、总结

在HTML中显示JavaScript代码的方法多种多样，包括使用<pre>和<code>标签、HTML实体编码、模板引擎以及第三方库。每种方法都有其优缺点，选择合适的方法可以提升代码的可读性和安全性。通过合理使用这些技术，可以在网页中轻松显示和管理JavaScript代码。

无论是简单的代码片段还是复杂的代码展示，通过结合使用<pre>和<code>标签、HTML实体编码，以及代码高亮库，都能有效实现代码的清晰展示。这不仅有助于提高网页的专业性，还能为开发者提供更加友好的阅读体验。