1. Download the plug-in:
Xheditor: You can download it at http://xheditor.com /.
Prety: go to http://code.google.com/p/google-code-prettify/to download
Xheditor is a small HTML editor that uses jquery technology. I believe many people have used it.
Prettify is a lightweight code highlight plug-in developed by Google. This plug-in is much smaller than syntaxhighlighter. The principle is to put the code in a pre block, and then highlight the content in the PRE block.
2. Load the plug-in.
If the editor and display content are on the same webpage, You need to load the JS file and CSS file.
<script type="text/javascript" src="jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="xheditor/xheditor-1.1.6-zh-cn.min.js"></script>
<script type="text/javascript" src="xheditor/prettify/prettify.js"></script>
<link href="xheditor/prettify/prettify.css" rel="stylesheet" type="text/css" />
The first two lines are used in the editor, and the last two lines are used to display the highlighted code. If an article is published and an article is displayed on two pages, you can load it separately.
3. Modify the editor
After xheditor is downloaded and decompressed, it can be placed in the xheditor folder in the root directory of the website. After preteditor is downloaded and decompressed, it can be placed in the xheditor folder. Pay attention to path issues.
1. Create an icon.
You can use a plotting tool to create a small GIF icon and put it under the pret.pdf folder.
Then write a CSS introduction:
.btnCode
{
background:transparent url(xheditor/prettify/code.gif) no-repeat 16px 16px;
background-position:2px 2px;
}
2. Load the xheditor editor for multi-line text boxes.
Add a piece of js code to the page with a multi-line text box:
<SCRIPT type = "text/JavaScript">
VaR editor;
$ (Pageinit );
Function pageinit ()
{
VaR allplugin = {
Code: {C: 'btncode', T: 'insert Code', H: 1, E: function (){
VaR _ this = this;
VaR htmlcode = '<div> <select id = "xhecodetype"> <option value = "html"> html/XML </option> <option value = "JS"> JavaScript </option> <option value = "CSS"> CSS </option> <option value = "php"> php </option> <option value = "Java"> JAVA </ option> <option value = "py"> python </option> <option value = "PL"> perl </option> <option value = "rb"> ruby </Option> <option value = "CS"> C # </option> <option value = "C"> C ++/C </option> <option value = "VB"> vb/asp </option> <option value = ""> others </option> </SELECT> </div> <textarea id = "xhecodevalue" Wrap =" soft "spellcheck =" false "style =" width: 300px; Height: 100px; "/> </div> <Div style =" text-align: right; "> <input type =" button "id =" xhesave "value =" OK "/> </div> ';
VaR jcode = $ (htmlcode), jtype = $ ('# xhecodetype', jcode), jvalue = $ ('# xhecodevalue', jcode ), jsave = $ ('# xhesave', jcode );
Jsave. Click (function (){
_ This. loadbookmark ();
_ This. pastehtml ('<PRE class = "prettyprint Lang-' + jtype. val () + '">' + _ this. domencode (jvalue. val () + '</PRE> ');
_ This. hidepanel ();
Return false;
});
_ This. showdialog (jcode );
}}
};
Editor = $ ('# txttopic'). xheditor ({plugins: allplugin, tools: 'fontface, fontsize, bold, italic, underline, removeformat, source, Code '});
}
</SCRIPT>
Among them, tools: 'fontface, fontsize, bold, italic, underline, removeformat, source, Code' is the icon tool used for display and can be set at will. Txttopic is the ID of the multi-line text box.
3. display code
Add onload = 'prettyprint () 'to the body tag of the displayed page ()'
That is
<body onload="prettyPrint()">
This is caused by great efforts.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
