First to download its source here. There's a lot of stuff in it, and we can basically put it in two folders. where Shcore.js and Shcore.js and clipboard.swf into the JS folder, Shcore.css there is another CSS file (whichever you choose) and all the pictures in the style folder. If you want to highlight HTML or XML code, then put a shbrushxml.js in JS, if you want to highlight JavaScript code, you need to add a shbrushjscript.js code. The last is to refer to them on our web pages.
Copy Code code 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 inside, configure and invoke the Flash file.
Copy Code code as follows:
SYNTAXHIGHLIGHTER.CONFIG.CLIPBOARDSWF = ' js/clipboard.swf ';
Syntaxhighlighter.all ();
This code is not required to be placed in the window.onload. And finally how to use, put the code to be highlighted in a pre file, the code to remember to deal with in advance, the < into, and turn > into >. Then add a special type, brush quotes plus the type of your code. If you want to highlight JavaScript to class= "Brush:javascript", highlighting CSS to class= "brush:css." Of course, success is also whether you introduce relevant JavaScript files (refer to shbrushjscript.js, etc.)
Note that the code is not only highlighted, but also more travel numbers and toolbars, this will be more detailed configuration. They are in that class name cheats, if the line number is prohibited, it is necessary to class= "brush:javascript;gutter:false;"
These parameters are specifically visible here
Copy Code code as follows:
<pre class= "Brush:javascript;gutter:false;toolbar:false" >
Dom.ready (function () {
Test ("Dom.ready");
});
</pre>
