How to format JavaScript code snippet to display on Web Page?

Question

I am trying to format JavaScript code snippet to display on a web page as follow:-

<pre class="prettyprint">
     <code class="javascript"><script> $(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); }); </script></code>
  </pre>

I got the clue from this SO Link.

I have included all the files and followed the instrucntion but its not formatting it rather showing the snippet as combined.

Here is a screen shot

I am getting the code from json file that is why it is in a single line.

I have removed the <script> and the result is same.

<pre class="prettyprint">
         <code class="javascript">$(document).ready(function(){ setTimeout(function(){ console.log('deleting cookie'); $.cookie('cookie',null,{domain: document.domain}); },1000); });</code>
      </pre>

Any clue how may I intend it properly ?

1: this is real script, so it will run, it is not inert text. 2: did you remember to set the CSS for script { display: block; } or something? Because script elements are not shown by default, for obvious reasons. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Jan 1, 2019 at 16:53
@ MikePomax I have removed the script tag still its the same. — Afnan Ahmad
– Afnan Ahmad, Commented Jan 1, 2019 at 16:55

Tang Yun · Accepted Answer · 2019-01-01 17:04:17Z

0

If you wish to show the indents, you need to format the content in a multi-line string.

document.getElementById('src').textContent = 
`
$(document).ready(function(){ 
   setTimeout(function(){ 
      console.log('deleting cookie'); 
      $.cookie('cookie',null,{domain: document.domain}); 
   },1000); });
`;

<pre class="prettyprint">
     <code class="javascript" id="src"></code>
</pre>

BTW, please do not use document.getElementById('src').innerHTML = xxx, since <script> inside the string would be valid javascript code and would be executed

edited Jan 1, 2019 at 17:04

answered Jan 1, 2019 at 17:01

Tang Yun

1599 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Afnan Ahmad Over a year ago

I am reading it from json file and cannot do it in a multi line.

Tang Yun Over a year ago

I don't think the google's code prettify supports auto-indent or auto-format the code, which is going to be too heavy, since there are too many programming languages to cover...

Collectives™ on Stack Overflow

How to format JavaScript code snippet to display on Web Page?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related