Search code examples
javascriptsyntax-highlightinggoogle-code-prettify

syntax highlighting of code snippets in a web page “google-code-prettify” not working with aspx and html code

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/

Solution

  • 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