[Html] several options for highlighting Jekyll code

[Html] several options for highlighting Jekyll code
Collation

The first shot of the New Year is easy and pleasant to complete the articles prepared some years ago. There are many ways to format the code in Jekyll. Here are several implementation methods.

Jekyll

Jekyll is a tool that is compiled into HTML by using templates and data. It can also be said to be a tool, but it can also be said to be a service. If you use Github (build the Jekyll service, you can compile it in real time) semi-dynamic web pages can be made. It is a good choice for friends who do not have their own servers.

In general, Github + Jekyll is used to build a blog and some webpages that describe the nature.

Use the command line in Mac.

Code highlighting

Code highlighting can be said to be essential for programmers. Whether it is to build a module or to describe the product, the website needs to display code, and the code style directly affects the reading effect, A good code highlight plug-in will have a good experience.

Official description

Http://jekyllrb.com/docs/posts/
The code in the official document is very simple:

{% highlight ruby %}def show  @widget = Widget(params[:id])  respond_to do |format|    format.html # show.html.erb    format.json { render json: @widget }  endend{% endhighlight %}

The result is:

Of course, different code highlighting plug-ins also need different compilation codes.

In fact, the highlighted plug-in is JS to find specific HTML nodes and assign specific css to specific nodes. the css result is to color the code; therefore, if the CODE is highlighted, it has nothing to do with Jekyll. Here we will talk about the Jekyll + MD file + CODE method.

Pygments

This is used in many Jekyll tutorials and is basically used in most highlight blogs. Install Python before compiling.

After installation, run the following command:

gem install pygments.rb

After installation, we need to modify**_config.yml**File, modify the highlighter:

markdown: kramdownhighlighter: pygments

Then restart the Jekyll service.

Code

{% highlight ruby %} def show @widget = Widget(params[:id]) respond_to do |format| format.html # show.html.erb format.json { render json: @widget } end end {% endhighlight %}

Many people do not know where the css file comes from. Most of them are copies and then copies, and all are 6 ~ Seven years ago.

There are actually several ways to get it:

First
The command line mode is too complex. For details, see:
Http://pygments.org/docs/styles/

Second
Download directly, open the web page: http://pygments.org/demo/3666780/ on the right side can choose a style, select GO you can see the effect, and now open the browser debugging, you can see onepygments.cssFile, download it.

Show

Rouge

This person prefers it. The color is pure and looks comfortable. There are fewer languages than Pygments. If you use Pygments, you do not need to change any source code. You only need to change the css reference. Of course, rouge is also the default highlighted compilation of Jekyll.

Open Source Project: https://github.com/jneen/rouge

First, modify**_config.yml**File, modify the highlighter:

markdown: kramdownhighlighter: rouge

Then restart the Jekyll service.

Code

{% highlight ruby %} def show @widget = Widget(params[:id]) respond_to do |format| format.html # show.html.erb format.json { render json: @widget } end end {% endhighlight %}

The default rouge topic tends to be white, so I set the background to black.

This is also requiredrouge.cssFile, then we can use the command line to get:

rougify style monokai.sublime > rouge.css

In this way, a default css file can be generated. For more theme generation details, see the open-source project description.

Show

Highlight JS

In general, Highlight is widely used and the number of users is quite high. The results are good, and many languages are supported.

Highlight is perfectly compatible with Rouge and Pygments, so you don't need to modify any configuration. You just need to change css and js references to OK.

: Https://highlightjs.org/

Code

<Script src = "http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"> </script> <script type = "text/javascript"> hljs. initHighlightingOnLoad (); </script> {% highlight ruby %} def show @widget = Widget(params[:id]) respond_to do |format| format.html # show.html.erb format.json { render json: @widget } end end {% endhighlight %}

Of course, you can also directly use HTML in the MD document:

...  

Show

You can select multiple styles as needed. <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4NCjxoMiBpZD0 = "syntaxhighlighter"> SyntaxHighlighter

This is an old code highlight plug-in. It was migrated once last year and is now maintained on Github. the quality is good and the V4 version is good.

Official Address: https://github.com/syntaxhighlighter/syntaxhighlighter

First download and compile it with the command:

Https://github.com/syntaxhighlighter/syntaxhighlighter/releases

Https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Building

After compilation, JavaScript and css files can be obtained. Of course, there are several options for different styles using commands.

Code

<Script type = "text/javascript" src = "../assets/syntax/syntaxhighlighter. js"> </script>

    def show    @widget = Widget(params[:id])    respond_to do |format|        format.html # show.html.erb        format.json { render json: @widget }    end    end    

Jekyll is not used for code compilation. Instead, the original style is retained and js is used for parsing on the page.

ShowPrismjs

Prismjs is an excellent work. The generated code is not redundant and the color applies to most websites. There are several themes. Many languages are supported. However, the details are incomplete. In some cases, the style display is not very good, XML Code does not support xx. xx. xxx style; currently, Google is widely used.

Home page with: http://prismjs.com/

Jekyll does not support it directly and needs to be downloaded.Prism. rbPlug-ins. Download and copy it to the Project"_plugins"Folder.

Prismjs cannot be used directly{% highlight %}Command, but you need to use{% prism %}Command.

Code

{% prism ruby %} def show @widget = Widget(params[:id]) respond_to do |format| format.html # show.html.erb format.json { render json: @widget } end end {% endprism %} <script src="../assets/prism/prism.js" ></script>Show

Summary

Currently, these types of codes are highlighted. You can use them as you like.

All the code and files are submitted to GITHUB:

Https://github.com/qiujuer/BeFoot/tree/master/blog/sample/Highlight