问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何以格式化的方式在html页面中显示html代码

社区维基
1
新手上路，请多包涵

我的网站是一个简单的教育网站。我想以格式化的方式在我的网页中显示 HTML 代码，就像它们在编辑器中看起来一样。我的意思是说 HTML 标签应该以与剩余文本等不同的颜色显示。这是来自另一个网站的代码片段。我想要这样的网页输出：

在此处输入图像描述

这是我的代码：-

 <html>

<head>
    <title>HTML Tutorial</title>
</head>

<body>
    <div class="code">
        <xmp>
            <!DOCTYPE html>
            <html>

            <head>
                <title>HTML Tutorial</title>
            </head>

            <body>
                This is a simple HTML page
            </body>

            </html>
        </xmp>
    </div>
</body>

</html>

如何在我的网页中实现所需的行为。我感谢你们所有人的努力。

原文由 Code Hungry 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlformatting
阅读 353
2 个回答
得票最新
社区维基
1
✓ 已被采纳

要做到这一点并让 HTML 显示为网页上的实际内容，最普通的方法是将要显示在“ 

 ”标签内的 HTML 标记包装起来。



然后你需要使用 HTML 实体来显示你需要的特殊字符，一个左括号是



&lt;





右括号是



&gt;





您还可以使用插件来帮助使您的代码看起来更漂亮，例如语法突出显示等等。一个非常好的 javascript 插件可以在这里找到 http://prismjs.com/





原文由 Russell Jonakin 发布，翻译遵循 CC BY-SA 3.0 许可协议
社区维基
1

使用适当的 HTML 标记。不要使用 <xmp> ，它不在 HTML 中。

  • 使用 <pre> 表示空格很重要
  • 对 HTML 中具有特殊含义的字符使用实体（例如 &lt; ）
  • 使用 <code> 标记代码（例如 <code class="html tag start-tag">&lt;title&gt;</code> ）。

为您想要的颜色应用 CSS。 <code> 元素给你一些目标。

原文由 Quentin 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏