显示HTML代码块

时间:2012-08-26 09:09:31

标签: javascript

我正在尝试创建一个包含代码示例的网站(在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;
        }

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

1 个答案:

答案 0 :(得分:1)

HTML5有一个非常有用的<code>标记功能,您放入其中的所有内容都将显示为代码格式。您还可以使用<pre>标记,以便按照您希望的方式显示它。

如果你正在谈论专门处理特殊字符,我想你可以写一些js但是如果它们是静态的例子,我认为只是简单地反斜杠和/或写出适当的代码就更容易了正如你在javascript中所做的那样。如果你考虑一下,那么使脚本运行的是它看到<script>标签的时候。摆脱它,它知道不要运行它所以只是做&ltscript&gt这听起来很烦人,但我认为从长远来看这将是一个麻烦。理想情况下,你的HTML应该专注于内容,我会说显示代码是一个内容的东西,而不是一个Javascript的东西。

如果您正在处理大量代码,您也可以使用HTML converter。希望这会有所帮助。