First download the source code. There are a lot of things in it. We can basically put it in two folders. Shcore.jsand shcore.js and clipboard.swf are put in the JS folder, and shcore.css has another CSS file (pick one with you) and all the images are put in the style folder. If you want to highlight HTML or XML Code Then, put one more shbrushxml. js in JS. If you want to highlight JavaScript code, add one more shbrushjscript. js code. Finally, we will reference them on our webpage.
Copy code The Code is as follows: <link type = "text/CSS" rel = "stylesheet" href = "style/shcore.css"/>
<Link type = "text/CSS" rel = "stylesheet" href = "style/shthemerdark.css"/>
<SCRIPT src = "JS/shcore. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/shbrushjscript. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/shbrushcss. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "JS/shbrushxml. js" type = "text/JavaScript"> </SCRIPT>
Then create a new script tag on the page, add code in it, configure and call the flash file.Copy codeThe Code is as follows: syntaxhighlighter. config. clipboardswf = 'js/clipboard.swf ';
Syntaxhighlighter. All ();
These codes do not need to be stored in window. onload. The last step is how to use the code to be highlighted in a pre file. Remember to process the code in advance and change <to <,> to>. Then add a special type, and add the type of your code to the brush with quotation marks. To highlight JavaScript, you need class = "Brush: JavaScript", and to highlight CSS, you need class = "Brush: CSS ". Of course, the success or failure lies in whether you introduce the relevant JavaScript files (such as shbrushjscript. JS)
Note that the Code will not only be highlighted, but also have more line numbers and toolbar, which requires more detailed configuration. They all work on that class name. If the row number is disabled, class = "Brush: javascript; gutter: false;" is required ;".
These parameters can be found here.
Copy code The Code is as follows: <PRE class = "Brush: javascript; gutter: false; toolbar: false">
Dom. Ready (function (){
Test ("dom. Ready ");
});
</PRE>