Dưới đây là toàn bộ styling dùng trong .md để post trong theme của blog:

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body text

Kiểu chữ đậm : đây là kiểu đậm. Kiểu chữ nghiêng : nghiêng.

Chèn ảnh vào post:

Water is H₂O. The New York Times (That’s a citation). Underline.

HTML and CSS are our tools.

Trích dẫn Blockquotes

Failling to plan is planning to fail !

Các kiểu danh sách List

List Thứ tự

1. Item one
   1. sub item one
   2. sub item two
   3. sub item three
2. Item two

List không theo Thứ tự

• Item one
• Item two
• Item three

Bảng và canh lề

Tùy biến kiểu Code với tông màu

Thêm màu cho cú pháp thông qua Pygments

• Ví dụ :

#container {
  float: left;
  margin: 0 -240px 0 0;
  width: 100%;
}

• Nếu không có Pygment thì sẽ không có màu và đơn điệu:

  This is great isn't it?

Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.¹

Để thay đổi cấu trúc highlighting, phải sửa đổi trên file

1

/_sass/_pygments.scss

Phân chia code và các nội dung khác thông qua cấu trúc Fenced Code Blocks

Ví dụ :

1. R

   1
   2
   3
   4
   5
   image_read("https://jeroen.github.io/images/frink.png") %>%
     image_rotate(270) %>%
     image_background("blue", flatten = TRUE) %>%
     image_border("red", "10x10") %>%
     image_annotate("The same thing with pipes", color = "white", size = 30)
   

2. CSS

   1
   2
   3
   4
   5
   #container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
   }
   

HTML

1
2
3
4
5
6
7
8
<nav class="pagination" role="navigation">
    {% if page.previous %}
        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
    {% endif %}
    {% if page.next %}
        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
    {% endif %}
</nav><!-- /.pagination -->

To modify styling and highlight colors edit

1	/_sass/_coderay.scss

. Line numbers and a few other things can be modified in

1	_config.yml

. Consult Jekyll’s documentation for more information.

1. yaml

image:
  background: filename.png

If you want to set a background image for the entire site just add

1	background: filename.png

to your

1	_config.yml

and BOOM — background images on every page!

Thêm link vào tiêu đề post

Chỉ cần thêm

1

link: http://url-you-want-linked

Thay đổi ảnh nền

Thêm tùy biến background trong YAML của post

image:
  background: filename.png

Chú ý ảnh nền phải được đặt trong thư mục

1

/images

If you want to set a background image for the entire site just add background: filename.png to your _config.yml and BOOM — background images on every page!

Thêm các nút để liên kết với link ngoài (Buttons)

Sử dụng lớp

1

.btn

<a href="#" class="btn btn-success">Success Button</a>

Video post

Not sure if this only effects Kramdown or if it’s an issue with Markdown in general. But adding YouTube video embeds causes errors when building your Jekyll site. To fix add a space between the

1

<iframe>

tags and remove

1	allowfullscreen

.

Ví dụ:

<iframe width="560" height="315" src="//www.youtube.com/embed/SU3kYxJmWuQ" frameborder="0"> </iframe>

Hình ảnh

1 hình

2 hình

Dùng

1

half

<figure class="half">
	<img src="/images/image-filename-1.jpg" alt="">
	<img src="/images/image-filename-2.jpg" alt="">
	<figcaption>Caption describing these two images.</figcaption>
</figure>

Rồi 3 hình …

<figure class="third">
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<a href="http://placehold.it/1200x600.jpg"><img src="http://placehold.it/600x300.jpg" alt=""></a>
	<figcaption>Caption describing these three images.</figcaption>
</figure>