Code coloring Syntaxhighlighter Items (most popular code highlighting)

Code coloring Syntaxhighlighter Items (most popular code highlighting) _ Related tips

Last Update:2017-01-18 Source: Internet

Author: User

Tags html tags first row

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Download Address: http://www.dreamprojections.com/syntaxhighlighter/
or http://code.google.com/p/syntaxhighlighter/
Demo Address: http://www.dreamprojections.com/syntaxhighlighter/Tests/PHP.html

How to use:

1, assuming that the Web page file test.htm stored in a directory, the Dp.syntaxhighlighter will be extracted to the subdirectory under the directory, assuming that images
2, insert the following code between the

3, in the page to display the source code of the program to insert the following code (of which the class= "JS" indicates the source code in JS syntax, the other can be set the class value of C #, CSS, C, Delphi, Java, JS, PHP, Python, Ruby, SQL, VB , XML):

Copy Code code as follows:

<textarea name= "code" class= "JS" rows= "cols=" >
The program source code is here.
</textarea>

4. Insert the following code before </body> at the end of the page:

Copy Code code as follows:

<title> Testing </title>
<link type= "Text/css" rel= "stylesheet" href= "Styles/syntaxhighlighter.css" ></link>
<body>
<textarea name= "code" class= "java" rows= "cols=" >
public class a{
}
</textarea>
</body>
<script class= "javascript" src= "Scripts/shcore.js" ></script>
<script class= "javascript" src= "Scripts/shbrushcsharp.js" ></script>
<script class= "javascript" src= "Scripts/shbrushphp.js" ></script>
<script class= "javascript" src= "Scripts/shbrushjscript.js" ></script>
<script class= "javascript" src= "Scripts/shbrushjava.js" ></script>
<script class= "javascript" src= "Scripts/shbrushvb.js" ></script>
<script class= "javascript" src= "Scripts/shbrushsql.js" ></script>
<script class= "javascript" src= "Scripts/shbrushxml.js" ></script>
<script class= "javascript" src= "Scripts/shbrushdelphi.js" ></script>
<script class= "javascript" src= "Scripts/shbrushpython.js" ></script>
<script class= "javascript" src= "Scripts/shbrushruby.js" ></script>
<script class= "javascript" src= "Scripts/shbrushcss.js" ></script>
<script class= "javascript" src= "Scripts/shbrushcpp.js" ></script>
<script class= "JavaScript" >
Dp. syntaxhighlighter.clipboardswf = ' scripts/clipboard.swf ';
Dp. Syntaxhighlighter.highlightall (' Code ');
</script>

Syntaxhighlighter is an open source project on Google code that is primarily used to color codes on Web pages, is easy to use, works well, and supports almost every language that is common.

How to install using:

1. First add the following code on the page (assuming the downloaded syntaxhighlighter is placed under the Syntaxhighlighter directory, note the directory structure):

Copy Code code as follows:

There is no window.onload in the official installation, I think this is still needed, after all, I need to color the code when the page is loaded.

2. The following methods are used:

Method One: Use pre

Copy Code code as follows:

Method Two: Use textarea

Copy Code code as follows:

In addition, there are some advanced features of the set up methods available for reference, such as code folding.

I installed on the interactive wiki successfully, installation method as above, the first step of the change code into the end of the doc.php file, later edit the wiki directly using HTML mode can be followed by the second step of the method to color code.

PS:CSDN's blog system is also used for this plugin:>

=============================
Http://code.google.com/p/syntaxhighlighter/downloads/list

Step One: Add styles to include

Copy Code code as follows:

The class here refers to the language has c,c#,vb,java,php,ruby,js,css,sql ...

The third step contains the required JS

Copy Code code as follows:

====================================

1. Download Syntaxhighlighter first.

2. Extract into the Syntaxhighlighter directory.

3. Create HTML file:

Copy Code code as follows:

Can be applied to the pre and textarea two HTML tags, name code,class for the language to be shaded, now supports C, C #, CSS, Delphi, Java, JScript, PHP, Python, Ruby, SQL, VB, XML this Some language.

4. Add the required CSS and JS files:

Copy Code code as follows:

Only Ruby is used here, and the others are similar.

5. The next step is to get syntaxhighlighter to work in the OnLoad incident in window.

Copy Code code as follows:

Window.onload = function ()

{
Dp. syntaxhighlighter.clipboardswf = './lib/syntaxhighlighter/scripts/clipboard.swf ';
Dp. Syntaxhighlighter.highlightall ("code");
};

Then, when you refresh the next page, you'll see that the code has been color-coded.

======================
Put the code you want to highlight in the pre or textarea

Copy Code code as follows:

The class option allows you to configure text blocks individually.

Nogutter will not display line numbers.

Nocontrols will not display the controller at the top.
Collapse collapses the code by default.
Firstline[value] Row count start value. The default value is 1
Showcolumns will display the row in the first line.

These options are placed together with aliases, separated by a colon: character.

Copy Code code as follows:

... some code here ...
</pre>

Language alias

C + + CPP, C, C + +
C # C #, C-sharp, CSharp
CSS CSS
Delphi Delphi, Pascal
Java Java
Java Script js, JScript, JavaScript
PHP php
Python py, Python
Ruby RB, Ruby, Rails, Ror
SQL SQL
vb vb, vb.net
xml/html XML, HTML, XHTML, XSLT

At the end of the page to add JS and CSS Reference JS there are many, if the language is fixed, as long as the introduction of Shcore and Shbrushxml (corresponding) JS file on the line

Copy Code code as follows:

* Syntaxhighlighter-highlightall method

This is a global function that finds all the blocks of code on a Web page and converts them into a highlighted block of code.
Parameters
function DP. Syntaxhighlighter.highlightall (name, [Showgutter], [Showcontrols],
[CollapseAll], [Firstline], [Showcolumns])

Name required <pre> and <textarea> element use.

Showgutter optionally turns on or off the line number of all the processed code blocks. (Default is True)
Showcontrols to turn on or off all processed <pre> controllers. (Default is True)
CollapseAll option to turn on or off all processing <pre> folding. If the Showcontrols is false or is swapped, this value is ignored. (Default is False)
Firstline Optionally allows you to specify the first line to start the line number. This is useful when you want to indicate the relative position of the code block in the file. (Default is 1)
The Showcolumns option will display the rows in the first row. (Default is False)

All values passed to the Highlightall call will overload the corresponding options for the configuration.

Download Address:

http://code.google.com/p/syntaxhighlighter/

With a small example of the difference between textarea and pre

Copy Code code as follows:

<title> Highlight Test </title>
<link type= "Text/css" rel= "stylesheet" href= "Styles/syntaxhighlighter.css"/>
<script language= "javascript" src= "Scripts/shcore.js" ></script>
<script language= "javascript" src= "Scripts/shbrushxml.js" ></script>
<body>
<textarea name= "code" class= "xml" rows= "cols=" >
The program source code is here AfDs
Dp. Syntaxhighlighter.highlightall (' Code ');
Dp. Syntaxhighlighter.highlightall (' Code2 ');
Please note the two sentences to see the effect, pay attention to the difference between textarea and pre. The "number" in the pre will need to be translated, or it will be exported as if the highlighted code is not in effect.
-------------------
</textarea>
<pre name= "Code2" class= "xml" rows= "cols=" >
The program source code is here AfDs
Dp. Syntaxhighlighter.highlightall (' Code ');
Dp. Syntaxhighlighter.highlightall (' Code2 ');
-------------------
</pre>
<script class= "JavaScript" >
Dp. Syntaxhighlighter.highlightall (' Code ');
Dp. Syntaxhighlighter.highlightall (' Code2 ');
</script>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More