Shulou(Shulou.com)06/01 Report--

The main content of this article is to explain "what is the method of custom configuration of jekyll". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what is the method of jekyll custom configuration"!

First, the picture is centered and shaded

The first way is to use the center tag inside the md document so that the picture is centered:

However, it is too troublesome to manipulate each image, so I directly added the image center and shadow effect to the blog theme style file style.css, which looks more beautiful:

.markdown-body img {/ * Picture Center * / clear: both; margin: 0 auto; display: block; / * add Picture Shadow * / box-shadow:0px 1px 4px rgba, 0 40px rgba (0 40px rgba), 0 40px rgba (0 40px rgba), 0 40px rgba (0 40px rgba) Moz-box-shadow:0px 1px 4px rgba, 00 40px rgba, inset; o-box-shadow:0px 1px 4px rgba, 0 40px rgba, inset;}

This is the effect of adding shadow in the middle, not bad.

Second, rendering mathematical formula

When writing a machine learning blog, you need to use a lot of formulas, so it is necessary to render the formula. I added the following code to include/head.html:

MathJax.Hub.Config ({tex2jax: {skipTags: ['script',' noscript', 'style',' textarea', 'pre'], inlineMath: [[' $','$']]})

This is a formula rendering effect, but it is also possible:

H θ (x) = θ 0 + θ 1x1 + θ 2x2 + θ 3x3 h _ {\ theta}\ left (x\ right) = {\ theta_ {0} + {\ theta_ {1}} + {\ theta_ {2}} {x _ 2} + {\ theta_ {3}} h θ (x) = θ 0 + θ 1x1 + θ 2x2 + θ 3x3

Third, render the table

When I was writing a blog, I suddenly found that the form could not be rendered, so I looked for some code on the Internet and wrote it into the style.css file:

Table {padding: 0; width: 100%;} table tr {border-top: 1px solid # cccccc; background-color: white; margin: 0; padding: 0;} table tr:nth-child (2n) {background-color: # f8f8f8;} table tr th {font-weight: bold; border: 1px solid # cccccc; text-align: left; margin: 0; padding: 6px 13px;} table tr td {border: 1px solid # cccccc; text-align: left; margin: 0 Padding: 6px 13px;} table tr th: first-child, table tr td: first-child {margin-top: 0;} table tr th: last-child, table tr td: last-child {margin-bottom: 0;}

In this way, you can render the table, but it is not very ugly:

Fourth, adjust the text typesetting

The word spacing of the body is too small, it looks tired, the line spacing is also very small, and the two ends are not aligned. Under the unified adjustment in style.css, add the following code:

.markdown-body {/ * character spacing 1 * / letter-spacing: 1px; / * Line spacing 1.6* / line-height: 1.6; / * text alignment * / text-align: justify;} V, code highlight

The previous code highlight is not very conspicuous, but this time it has been changed to sublime style, which is the above code style. Look for the following configuration steps online:

5.1 install rouge

My blog seems to have been installed by default, so I didn't perform this step:

Gem install kramdowngem install rouge5.2 configuration _ config.yml

Emmm... In this step, I'll test whether I can add it or not. Maybe my jekyll has just been upgraded, and it supports these by default. If you can't, add it:

Highlighter: rougemarkdown: kramdownkramdown: input: GFM syntax_highlighter: rouge5.3 generates rouge css style files

I actually executed this line of code by using the following command to generate the required css file. I may have installed all the previous things:

# the file name generated by the css theme is rougify style monokai.sublime > syntax_monokai.css

Supported css topics can be viewed using the help command:

Rougify help style

Then copy the generated css file to the blog's style style directory, and then refer to the new css file in the header of the include/head.html file:

Of course, your directory name may not be the same as mine, but basically the same, find the style directory and head.html file is basically right, now the codeword looks much more comfortable.

At this point, I believe you have a deeper understanding of "what is the method of jekyll custom configuration". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.