显示HTML代码块

Displaying HTML Code Blocks

本文关键字：代码 HTML 显示      更新时间：2023-09-26

我正在尝试创建一个包含代码示例（HTML、JavaScript、CSS等）的网站，并且需要弄清楚如何在浏览器不将代码解释为文本的情况下显示代码。

我编写了一个JavaScript函数来转换<，>从文本中，然后它写入结果，但浏览器似乎仍然识别<script>（没有/script.前后的空格

        function codeToHTML(input) {
            var output = "";
            for(i=0;i<input.length;i++) {
                var c = input.charAt(i);
                if(c=='<') {
                    output+="&lt;";
                } else if (c=='>') {
                    output+="&gt;"; 
                } else if (c==''n') {
                    output+="<br>";
                } else if (c==' ') {
                    output+="&nbsp;";
                } else {
                    output+=c;
                }
            }
            return output;
        }

有没有更好的方法来解决这个问题？

HTML5有一个非常有用的<code>标记函数，您放入其中的所有内容都将显示为代码格式。你也可以使用<pre>标签，这样它就可以按照你想要的方式显示它

如果你谈论的是专门处理特殊字符，我想你可以为此编写一些js，但如果它们是静态示例，我认为简单地反斜杠和/或像在javascript中那样编写适当的代码会更容易。仔细想想，当脚本看到<script>标记时，它就会运行。去掉它，它知道不应该运行它，所以就做&ltscript&gt。这听起来很烦人，但我认为从长远来看，它会少很多麻烦。理想情况下，HTML应该专注于内容，我认为显示代码是一件内容的事情，而不是Javascript的事情。

如果您正在处理堆积如山的代码，您也可以只使用HTML转换器。希望这能有所帮助。

相关文章：