Google code prettify thinks css #id's are line comment. What am I doing wrong?

820 Views Asked by At

Example CSS

#wrap{margin:20px}

Code prettify wraps the whole line in .com

<span class="com">#wrap{margin:20px}</span>

Somebody has a similar issue here.

Where someone answers "Are you loading lang-css.js?".

Here's what I'm loading in the footer.

<script src="/js/google-code-prettify/lang-css.js"></script>
<script src="/js/google-code-prettify/prettify.js"></script>

I can see both of them with web inspector. I tried changing the order and loading them from the header. I'm using the latest version.

All help is greatly appreciated :)

Thanks!

1

There are 1 best solutions below

0
On BEST ANSWER

The order you link to the javascript files matters. You need to call the base code (prettify.js) first followed by the css specific code (lang-css.js). You can place the script tags either in the head section or at the end of the document... both work but placing at the end of the document will speed up the page load.

<script src="/js/google-code-prettify/prettify.js"></script>
<script src="/js/google-code-prettify/lang-css.js"></script>



You will also need to ensure that you are linking the stylesheet in the head of your document.

<link rel="stylesheet" type="text/css" href="/css/prettify.css">



You also need to add the correct classes your pre tag(s). The syntax-highlighting functions contained in lang-css.js will not be called without adding the class "lang-css" to the <pre> tag.

<pre class="prettyprint lang-css linenums">



Finally, make sure you call the "prettyPrint()" function on page load.

<body onload="prettyPrint()">