将 javascript 显示为代码片段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17753241/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Display javascript as code snippet
提问by Webster Gordon
What I'm trying to do is display a snippet of javascript on the page, and not have it run, just display as a code snippet for folks to copy. I load google's Prettify, then in the page I have this code:
我想要做的是在页面上显示一段 javascript，而不是运行它，只是显示为代码片段供人们复制。我加载了 google 的 Prettify，然后在页面中我有这个代码：
<pre class="prettyprint">
<script>
$(document).ready(function(){
setTimeout(function(){
console.log('deleting cookie');
$.cookie('cookie',null,{domain: document.domain});
},1000);
});
</script>
</pre>
But this code just executes and doesn't display the JS snippet. What am I missing here?
但是这段代码只会执行，不会显示 JS 代码段。我在这里错过了什么？
回答by Travis
You need to convert your <and >characters to HTML entities like so:
您需要将您的<和>字符转换为 HTML 实体，如下所示：
<pre class="prettyprint">
<script>
$(document).ready(function(){
setTimeout(function(){
console.log('deleting cookie');
$.cookie('cookie',null,{domain: document.domain});
},1000);
});
</script>
</pre>
I would also recommend wrapping the code in <code>tags in addition to the existing <pre>tags.
<code>除了现有<pre>标签之外，我还建议将代码包装在标签中。
回答by Jim
The problem you have is that you are entering HTML and you want it to not be treated as HTML. Specifically, the opening <script>element.
您遇到的问题是您正在输入 HTML 并且您希望它不被视为 HTML。具体来说，开口<script>元件。
In order to enter HTML that will not be parsed as HTML, you need to encode characters that are special to HTML. For instance <is encoded as <, >is encoded as >, and &is encoded as &.
为了输入不会被解析为 HTML 的 HTML，您需要对 HTML 特有的字符进行编码。例如<被编码为<，>被编码为>，&被编码为&。
So, to output the following without it being parsed as HTML:
因此，要输出以下内容而不将其解析为 HTML：
<script>...</script>
...you need to enter:
...您需要输入：
<script>...</script>
回答by basher
It's running because of the <script>tags. You should encode them:
因为<script>标签，它正在运行。你应该对它们进行编码：
<pre class="prettyprint">
<script>
$(document).ready(function(){
setTimeout(function(){
console.log('deleting cookie');
$.cookie('cookie',null,{domain: document.domain});
},1000);
});
</script>
</pre>
回答by Moazzam Khan
use <script>and </script>for <script>tag
use<script>和</script>for<script>标签
回答by jongo45
Let the textContentproperty (or createTextNode) do all the heavy lifting of encoding whatever text you need to insert into dom:
让textContent属性（或createTextNode）完成所有繁重的编码工作，您需要插入 dom 中的任何文本：
var sampleCode="<script> $(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); }); </script>";
var pre=document.createElement("pre");
pre.textContent=sampleCode;
pre.className="prettyprint";
document.body.appendChild(pre);
