[Html] Several options for Jekyll code highlighting

Source: Internet
Author: User
Tags cloudflare

Order

New Year's first gun, easy and enjoyable, to complete some years ago to write the article. There are many ways to format code in Jekyll, and here are some ways to implement it.

Jekyll

Jekyll is a tool that is compiled into HTML through templates and data, which is a tool, but it can also be said to be a service, if you can make a semi-dynamic Web page with GitHub (built with Jekyll service, can be compiled in real time), it's a good choice for friends who don't have their own servers.

In general, use Github+jekyll to build blogs and web pages of descriptive nature.

Prior to the publication of the win system under the construction of the article: [Environment to build]windows under the installation of Ruby and Jekyll
, as far as the Mac is done with the command line.

Code highlighting

Code highlighting can be said to be a programmer must, whether it is to build a module, or a product description of the site is required to show the code, and the style of code directly affect the reading effect, a good code highlighting plugin will have a good experience.

Official notes

http://jekyllrb.com/docs/posts/#highlighting-code-snippets
It is very simple to see the code in the official documentation:

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

The resulting effect is also:

Of course, different code highlighting plugins also require different compiled code.

In fact, the highlight plug-in is called JS to find the specific node in the HTML, and specific nodes assigned to a particular CSS, and the result of the CSS is to paint the code, so purely to say that the code highlighting is not related to Jekyll, here to say is Jekyll+md file +code way.

Pygments

This is a lot of Jekyll tutorial used, in most of the highlight blog is basically the use of the highlight. You will need to install Python first when compiling.

After installation we execute the command:

install pygments.rb

After the installation, we need to modify the Jekyll project **_config.yml** 's files and modify the highlighter as follows:

markdownkramdownhighlighterpygments

Then restart the Jekyll service.

Code
 "all"  rel  =  "stylesheet"  type= "text/css"  href=". /assets/pygments/pygments.css "/>params  [: id]) respond_to do  |format  | format . html # show.html.erb  format . JSON {render JSON: @widget} end
        end   {% endhighlight%}</body& gt;  

A lot of people don't know where this CSS file comes from, most of them copy and copy, and they're all 6-7 years old.

In fact, there are many ways to get:

    • First Kind
      command-line mode, too complex, see in detail:
      http://pygments.org/docs/styles/

    • The second Kind
      Direct download, open Web page: http://pygments.org/demo/3666780/Right can choose the style, choose Go to see the effect, and then open the browser debugging, you can see that there is a pygments.css file, download.

Show

Rouge

This person prefers, the color is more pure, looks comfortable. Less than pygments support language, if it is the use of pygments, which basically do not change any source code, only need to change the CSS reference OK. Of course Rouge is also the Jekyll default highlight compilation.

Open Source project Address: Https://github.com/jneen/rouge

First modify the **_config.yml** file for the Jekyll project, and modify the highlighter to include:

markdownkramdownhighlighterrouge

Then restart the Jekyll service.

Code
<head>    <title>Rouge</title>    <link Media= "All" rel="stylesheet" type=" Text/css " href=". /assets/rouge/rouge.css " />    <style> pre{  background: Rgba (0, 0, 0, 0.95 ); }            </style></head><body>    {% 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%}</body>

The default rouge theme is biased towards white, so I set the background to black.

Here is also rouge.css the need for files, at which point we use the command line to get:

rougify style monokai.sublime > rouge.css

This will generate a default CSS file, and of course more topics will be generated as described in the open source project.

Show

Highlight JS

In general, highlight is relatively extensive, the use of user volume is also very high. It works well and supports many languages.

Highlight can be perfectly compatible with Rouge and pygments, so there is no need to modify any configuration, just change the CSS and JS reference to OK.

: https://highlightjs.org/

Code
<head>    <title>Highlight.js</title>    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/ Libs/highlight.js/9.1.0/styles/default.min.css ">    <script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/ Highlight.min.js "></script>    <script type="Text/javascript">hljs.inithighlightingonload (); </script></head><body>    {% 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%}</body>

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

<pre><code class="html">...</code></pre>
Show

There are a variety of styles that can be selected arbitrarily.

Syntaxhighlighter

This is the older one a code highlighting plug-in, last year migrated, and now on GitHub maintenance, quality is very good, V4 version is good.

Official address: Https://github.com/syntaxhighlighter/syntaxhighlighter

Download it first, and then compile it yourself using the command:

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

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

Compile can get JS and CSS files, of course, the use of different styles of command can have several options.

Code
<head>    <title>Syntaxhighlighter</title>    <link Media="All" rel="stylesheet" type="text/ CSS " href=": /assets/syntax/theme.css " />    <script type="text/javascript" src="... /assets/syntax/syntaxhighlighter.js "></script></head><body>   <pre class="Brush:ruby">def show @widget = Widget (Params[:id]) respond_to do |format| Format.html # Show.html.erb Format.json {render json: @widget} end End</pre></body>

Here does not use Jekyll for code compilation, but preserves the original style, on the page using JS to parse.

Showprismjs

PRISMJS is a relatively good work, generate code is not superfluous, color applies to most of the website; there are several themes; there are a lot of supported languages, but the details are not perfect. In some cases, the style display is not very good, like the XML code does not support the xx.xx.xxx style;

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

Jekyll does not support him directly and needs to download the prism.rb plugin to use. After downloading, copy to the _plugins Project "" folder.

Commands are not used directly in Prismjs {% highlight %} , and commands are required {% prism %} .

Code
 <head><title>prismjs</title>  <link Media= "All" rel="stylesheet" type=" Text/css " href=". /assets/prism/prism.css " /></head><body>             {% 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></body>     
Show

Summarize

At present, these are some of the more excellent code highlighting, you crossing in accordance with their preferences to use just fine.

All the code and files are submitted to GitHub, file address:

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

========================================================
Qiujuer
Blog: Blog.csdn.net/qiujuer
Website: www.qiujuer.net
Open Source Library: github.com/qiujuer/genius-android
Open Source Library: Github.com/qiujuer/blink
Reprint Please specify source: http://blog.csdn.net/qiujuer/article/details/50419279
--open source of learning, for open source, beginner's mentality, with June mutual encouragement!

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

[Html] Several options for Jekyll code highlighting

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.