js中显示代码怎么写

在JavaScript中显示代码的方式有多种，具体取决于你是在浏览器环境中还是在Node.js等其他环境中进行开发。使用innerHTML、textContent、pre标签、模板字符串和第三方库等方法可以实现代码的显示。下面我将详细介绍这些方法中的一种，并提供具体示例：

最常用的方法之一是使用innerHTML或textContent结合<pre>和<code>标签显示代码。

一、innerHTML和textContent的使用

1. 使用innerHTML显示代码

使用innerHTML可以将代码作为HTML内容插入到指定的HTML元素中。这种方法适用于需要保留代码中的HTML标签或其他格式的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Code Example</title>
    <style>
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <pre id="codeBlock"></pre>
    <script>
        const code = `
            <html>
                <head>
                    <title>Sample Code</title>
                </head>
                <body>
                    <h1>Hello, World!</h1>
                </body>
            </html>
        `;
        document.getElementById('codeBlock').innerHTML = code;
    </script>
</body>
</html>

在这个示例中，我们使用innerHTML将包含HTML标记的代码插入到<pre>元素中，以便在网页上显示。

2. 使用textContent显示代码

使用textContent可以将代码作为纯文本插入到指定的HTML元素中。这种方法适用于不需要保留代码中的HTML标签或其他格式的情况。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Code Example</title>
    <style>
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <pre id="codeBlock"></pre>
    <script>
        const code = `
            <html>
                <head>
                    <title>Sample Code</title>
                </head>
                <body>
                    <h1>Hello, World!</h1>
                </body>
            </html>
        `;
        document.getElementById('codeBlock').textContent = code;
    </script>
</body>
</html>

在这个示例中，我们使用textContent将代码作为纯文本插入到<pre>元素中，以便在网页上显示。

二、使用模板字符串显示代码

模板字符串（Template Strings）是ES6引入的一种新的字符串表示方式，它使用反引号（“）包裹字符串，并允许在字符串中嵌入变量和表达式。模板字符串可以用于显示多行代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Code Example</title>
    <style>
        pre {
            background-color: #f4f4f4;
            padding: 10px;
            border: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <pre id="codeBlock"></pre>
    <script>
        const code = `
            <html>
                <head>
                    <title>Sample Code</title>
                </head>
                <body>
                    <h1>Hello, World!</h1>
                </body>
            </html>
        `;
        document.getElementById('codeBlock').textContent = code;
    </script>
</body>
</html>

三、使用第三方库显示代码

除了上述方法，还可以使用第三方库如highlight.js或Prism.js来显示和高亮代码。这些库提供了更强大的功能和更好的用户体验。

使用highlight.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Code Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script>
    <script>hljs.highlightAll();</script>
</head>
<body>
    <pre><code class="html" id="codeBlock"></code></pre>
    <script>
        const code = `
            <html>
                <head>
                    <title>Sample Code</title>
                </head>
                <body>
                    <h1>Hello, World!</h1>
                </body>
            </html>
        `;
        document.getElementById('codeBlock').textContent = code;
    </script>
</body>
</html>

使用Prism.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display Code Example</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
</head>
<body>
    <pre><code class="language-html" id="codeBlock"></code></pre>
    <script>
        const code = `
            <html>
                <head>
                    <title>Sample Code</title>
                </head>
                <body>
                    <h1>Hello, World!</h1>
                </body>
            </html>
        `;
        document.getElementById('codeBlock').textContent = code;
    </script>
</body>
</html>

在这两个示例中，我们分别使用了highlight.js和Prism.js来显示和高亮HTML代码。

四、总结

在JavaScript中显示代码有多种方法，选择哪种方法取决于具体需求。使用innerHTML、textContent、模板字符串和第三方库如highlight.js或Prism.js是常见的方式。希望以上内容对你有所帮助。