1

i put following lines in header of html

<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js" type="text/javascript"></script>

and in html i want to hightlight some html code :

<body onload="prettyPrint()">
    <pre class="prettyprint lang-html">

           <input type="button" value="HELLO"/>

</pre>
</body>

but i am not unable to hightline html code : current copy here : http://jsfiddle.net/jTYQk/

Arti Patel
  • 313
  • 3
  • 6
  • 15

1 Answers1

1

The pre element does not stop the browser from rendering internal elements. http://www.htmlcodetutorial.com/linepar/_PRE.html

By changing your < to &lt; and > to &gt;, you will get it to render correctly. Check http://jsfiddle.net/jTYQk/1/ for an example.

OR

You could also wrap your code in <xmp></xmp>. See it at http://jsfiddle.net/jTYQk/2/ .

However, this is not recommended since xmp has been marked obsolete. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/xmp

user694844
  • 1,188
  • 11
  • 16