How to Use the syntaxhighlighter syntax highlighting plug-in

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.