Question

I am using highlight.js to syntax highlight my code. At the moment, all code is highlighted according to the css file ‘xcode.css’. However, I would like to know how I can, by setting the lang property of the <pre><code> tag, use a specific css file for highlighting the code? At the moment, the code is highlighted by just importing one css file in the header.

<link rel="stylesheet" href="js/highlight/styles/xcode.css">
<script src="js/highlight/highlight.pack.js" type="text/javascript"></script>

For example, the following code would use the css file ‘js/highlight/styles/xcode.css’:

<pre><code lang="xcode">#import "Testing.h"</code></pre>

Answer 1

You can wrap any specific styles you want with an attribute selector like this:

pre code[lang="xcode"] {
    /* xcode specific styles */
}

You can then either save those styles in the same xcode.css or in a new css file and link it in the header.

Here’s a fiddle demo: http://jsfiddle.net/stevenschobert/vpMEJ/