如何以纯文本形式显示代码？答案

【问题标题】：How to display code in plain text?如何以纯文本形式显示代码？
【发布时间】：2009-12-09 09:17:00
【问题描述】：

我想在 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 页面上显示裸代码？

【问题讨论】：

为什么不能在<pre>中显示？这不是重点吗？
有效，还有其他解决方案吗？

标签： html

【解决方案1】：

我不太清楚这个问题的具体细节，因为 pre 标签通常应该可以解决问题，但这里有一个替代标签：

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

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

此外，如果您接受用户输入，请确保任何 JavaScript 都被过滤并且永远不会执行。

【讨论】：

唉，该标签似乎已被弃用：stackoverflow.com/questions/4545/xmp-tag
HTML 解析应该由您使用的任何服务器端语言的库完成。在 PHP 中有 HTML Purifier，在 C# 中有 HTML Agility Pack。你是对的，pavium，它已被弃用，不过我想我会提供一个不同的元素作为选项。

【解决方案2】：

您可以使用<pre> 和<code> 标签来显示格式化代码。但是为了防止代码执行而不显示，您需要将文本转换为字符实体。 &gt; 变成 &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 实体。

【讨论】：

【解决方案3】：

使用<code></code> 标签，并使用 javascript 或您的服务器端脚本语言

【讨论】：

【解决方案4】：

将其转储到文本区域并像 div 标签一样渲染

这有点像黑客和客厅的把戏，但它确实有效。

获取呈现到 HTML 页面上的裸代码是将其放置在文本区域中并删除文本区域周围的所有格式，使其看起来像 <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 代码应该在页面上呈现如下：

我所做的是无效的 HTML，它只是因为习惯错误处理恰好以这种方式处理它。您不应该将未转义的尖括号放在<textarea> 的内容中。根据浏览器选择解释 textarea 标签的方式，您会得到未定义的行为。

【讨论】：

【解决方案5】：

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

例如

< 转为&lt

空格到&nbsp

等等

【讨论】：