Home > Developer > Web Develop
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.
JekyllJekyll 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 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 noteshttp://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.
PygmentsThis 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.
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 JSIn 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:
Show<pre><code class="html">...</code></pre>
There are a variety of styles that can be selected arbitrarily.
SyntaxhighlighterThis 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.
ShowprismjsPRISMJS 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 %} .
<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> 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
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
