We recommend a code highlight plug-in (sublime, github style) -- highlight. js

I often see good-looking highlighted code in some blogs, such as the sublime style and GitHub style. There is no doubt that a good highlight code plug-in will not only make your blog appear higher, but also give you a comfortable reading experience. After some searching on the internet, I finally found a very good highlight plug-in. Let's take a look at the effect!

1. Javascript Effect

// Detect URLfunction checkeUrl (url) {return new RegExp ("^ (https | http | ftp | rtsp | mms): // [-a-zA-Z0-9 + &##/%? = ~ _ |! :,.;] * [-A-zA-Z0-9 + & @ #/% = ~ _ |] ", 'G'). test (url) ;}; // The console prints window. console = window. console ||{ log: function (){}};

2. Java code

Public interface UserDao {/***** retrieve user information based on User objects * @ param user * @ return User * @ see [Class, Class # method, class # member] */public user getUser (User user ); /*** update user information ** @ param User * @ return int */public int updateUser (user );}

More High big effect, sublime, googlecode you can stamp here: http://highlightjs.org/static/test.html

Usage:

Preparations:

Plug-ins are easy to use. You only need to introduce highlight. js and Css style files of the corresponding code style on the page where you want to use the plug-in. For example, the style I use here is:

Solarized-Dark, then I introduced this css style file: http://highlightjs.org/static/styles/solarized_dark.css

On the page display end, see the following instance code:

// Add the initialization script <script> hljs. configure ({tabReplace: ''}); hljs. initHighlightingOnLoad (); </script> // the code to be highlighted must be enclosed by the <pre> <code class = "language"> </code> </pre> label, // language indicates the language of the Code to be displayed. For example, to display Java code, the language is class = "java ", // The html code is class = "xml" <pre> <code class = "xml"> // detailed code </code> </pre>

Use in a blog:

Add the JS Script Reference and initialization script in the background settings of the blog, Copy the code style css style to the custom CSS code on the page, and save it.

Then, when writing a blog post, after adding the code, switch to the HTML editing status, slightly modify the code, and remove the original pre class, then add the code tag and code class to it.

 

Agent official website address: http://highlightjs.org/

Hurry and try it, friends !!

Author: Ziv Serena
Source: http://www.cnblogs.com/zivxiaowei/
About the author: programmers who focus on Java Technology keep a high interest in JS development. Like music, reading, FM, etc.
The copyright of this article is shared by the author and the blog. You are welcome to repost this article, but you must keep this statement without the author's consent and provide a connection to the original article on the article page.
If there is a problem, you can mail: wewoor@foxmail.com
Weibo: Ziv Xiaowei