Register
> 博客>

html显示代码块

新星源码网 2月 9日 2 0

要在HTML中显示代码块，你可以使用 <pre> 元素来保留代码的格式和空格，或者使用 <code> 元素来标记代码。使用 <pre> 元素：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Block with &lt;pre&gt;</title>
</head>
<body>
    <pre>
        <code>
            function greet() {
                console.log("Hello, world!");
            }
            greet();
        </code>
    </pre>
</body>
</html>

使用 <code> 元素：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Block with &lt;code&gt;</title>
    <style>
        code {
            white-space: pre-wrap; /* 保留空格和换行 */
            font-family: monospace; /* 使用等宽字体 */
            background-color: #f4f4f4; /* 设置背景色 */
            padding: 10px; /* 添加内边距 */
            border: 1px solid #ccc; /* 添加边框 */
            border-radius: 5px; /* 添加圆角 */
            display: block; /* 设置为块级元素 */
        }
    </style>
</head>
<body>
    <code>
        function greet() {
            console.log("Hello, world!");
        }
        greet();
    </code>
</body>
</html>

这些示例可以在浏览器中显示代码块，并保持其格式不变。

如果你想让你的代码块在网页上更具交互性和可复制性，你可以使用一些JavaScript库，比如Highlight.js或Prism.js。这些库可以帮助你高亮显示语法，并提供复制功能等。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Code Block with Highlight.js</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.initHighlightingOnLoad();</script>
</head>
<body>
    <pre>
        <code class="javascript">
            function greet() {
                console.log("Hello, world!");
            }
            greet();
        </code>
    </pre>
</body>
</html>

在这个例子中，我们使用了Highlight.js来高亮显示JavaScript代码。你只需要包含Highlight.js的CSS和JavaScript文件，并在代码块上添加适当的类名，就可以让它自动高亮显示代码。

Prism.js也提供类似的功能，你可以查看它们的文档来了解更多信息和用法。

使用这些工具可以让你的代码在网页上更具可读性和交互性，提供更好的用户体验。

Related

热门文章

微海报