admin管理员组文章数量:1193750
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:
<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?
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:
<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?
Share Improve this question asked Jul 19, 2013 at 18:38 Webster GordonWebster Gordon 3001 gold badge5 silver badges13 bronze badges 1- 1 Try viewing the source HTML of this question, that'd show you one way. – Adrian Wragg Commented Jul 19, 2013 at 18:41
5 Answers
Reset to default 14You need to convert your <
and >
characters to HTML entities like so:
<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.
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.
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 &
.
So, to output the following without it being parsed as HTML:
<script>...</script>
...you need to enter:
<script>...</script>
It's running because of the <script>
tags. You should encode them:
<pre class="prettyprint">
<script>
$(document).ready(function(){
setTimeout(function(){
console.log('deleting cookie');
$.cookie('cookie',null,{domain: document.domain});
},1000);
});
</script>
</pre>
use <script>
and </script>
for <script>
tag
Let the textContent
property (or createTextNode
) do all the heavy lifting of encoding whatever text you need to insert into 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);
本文标签: htmlDisplay javascript as code snippetStack Overflow
版权声明:本文标题:html - Display javascript as code snippet - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1738489078a2089599.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论