如何以纯文本显示代码?

时间:2009-12-09 09:17:00

标签: html

我想在HTML页面上显示裸代码,我试过这个:

<script>
function getSize() {
    var myFSO = new ActiveXObject("Scripting.FileSystemObject");
    var filepath = document.upload.file.value;
    var thefile = myFSO.getFile(filepath);
    var size = thefile.size;
    alert(size + " bytes");
}
</script>

上述JavaScript代码是用户输入的一些代码。我无法想象在html页面上显示这个裸代码而不被浏览器解释和搞砸。

如何在HTML页面上显示裸代码?

6 个答案:

答案 0 :(得分:1)

我对这个问题的具体细节并不十分清楚,因为一般情况下,预标签应该可以解决问题,但这里有一个替代标签:

<xmp>[Code can be displayed here]</xmp>

如果你使用的是服务器端语言,我建议在输出之前转换为HTML实体,然后使用CSS来设置样式。

同样,请确保您是否接受任何JavaScript被过滤且从未执行过的用户输入。

答案 1 :(得分:1)

您可以使用<pre><code>标记来显示格式化代码。但是为了防止代码执行而不显示,您需要将文本转换为字符实体。 >变为&gt;<变为&lt等。

您可以使用PHP执行此操作,例如:

<?php echo htmlentities('function getSize() {  var myFSO = new
ActiveXObject("Scripting.FileSystemObject");
  var filepath =
document.upload.file.value;   var
thefile = myFSO.getFile(filepath);
  var size = thefile.size;  alert(size
+ " bytes"); }'); ?>

由于您的系统依赖于用户输入,您可能必须依靠AJAX来实际处理用户输入并将其转换为HTML实体。

答案 2 :(得分:1)

使用<code></code>标记,并使用javascript或服务器端脚本语言

答案 3 :(得分:0)

将其转储到textarea并将其呈现为div标签

这是一个黑客和客厅技巧,但它确实有效。

获取呈现在HTML页面上的裸代码是将其放在文本区域中并删除textarea周围的所有格式,使其看起来像<div>标记:

Code:<br>
<textarea style="border: none;width:400;height:200;background-color:lightgrey;">
#include<iostream>
using namespace std;
class Box{
  public:
    int mymethod(){ cout << "is method"; }
};
int myfunction(){ cout << "is function"; }
int main(){
  Box b;
  b.mymethod();
  myfunction();
}
</textarea>
<br>
Output:
<pre>is methodis function
</pre>

上面的html代码应该在页面上呈现如下:

enter image description here

我所做的是无效的HTML,它只能起作用,因为习惯性的错误处理恰好以这种方式处理它。您不应将未转义的尖括号放在<textarea>的内容中。您将获得未定义的行为,具体取决于浏览器选择如何解释您的textarea标记。

答案 4 :(得分:0)

要显示裸露的代码,您很可能必须使用textarea标记,如果要使文本区域足够长以一次显示所有代码,请确保使用“ height”:    <textarea style="height: 150px;"> // Your code goes here </textarea>

希望这会有所帮助!

答案 5 :(得分:-1)

最可靠的方法是htmlencode要在页面上显示的代码。

例如

<加入&lt

空格到&nbsp