How to Use Kramdown

Updated: March 10, 2021

Markdown refers to the functionality of creating web page formats like HTML using its own syntax. The blog posts I am currently writing all have the .md extension, which stands for markdown, and if you write according to the syntax, you can easily add various effects to your blog posts. Markdown has been fragmented since it was first created by John Gruber and Aaron Swartz in 2004, with variations like PHP Markdown Extra, Multimarkdown, and GitHub Flavored Markdown. Among these, GitHub blogs support a Markdown called Kramdown. I am thinking of writing a post to learn the features of Kramdown as the first post for smooth and neat blog writing.

1. Headers

When writing header sentences, Kramdown allows you to create a total of 6 types of headers. You need to prefix the header sentence with the appropriate number of # symbols and leave a blank line below it.

# H1 Header

## H2 Header

### H3 Header

#### H4 Header

##### H5 Header

###### H6 Header

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header

2. Inline Code

When you want to insert code between sentences, emphasize a specific part, or use syntax characters that cannot be used directly (in this case, you can also escape with a backslash), you can use inline code blocks. The usage is to wrap the content with `.

`You can emphasize like this`

You can emphasize like this $ \ ~~~ You can also use syntax characters like this.

3. Code Block

Code blocks can be used when you want to display the written Markdown text as it is without converting it to HTML, or when you want to highlight it according to the programming language. There are two basic ways to write code blocks. The first method is to indent with 4 spaces.

    You can write a code block like this.

You can write a code block like this.

The second method is to wrap the code with tildes ~. It is important that the number of tildes used to close the code block is greater than the number used to open it.

~~~~
You can write a code block like this.
~~~
If the number is less, the code block will not end.
~~~~

You can write a code block like this.
~~~
If the number is less, the code block will not end.

When wrapping program code in a code block, syntax highlighting is often added for readability. To add syntax highlighting for program code in Kramdown, you need to specify the name of the language next to the ~~~ that starts the code block.

~~~ ruby
def what?
 42
end
~~~

~~~ java
public static void main(String[] args){
}
~~~

def what?
 42
end

public static void main(String[] args){
}

4. Horizontal Lines

When writing, there are times when you need to separate content with horizontal lines. Horizontal lines can be drawn in the following ways.

* * *

---

  _  _  _  _

---------------

5. Line Breaks

Even if you just write a line break in the original text, it will not appear in the result. To create a line break, you need to write two spaces.

This is a paragraph
which contains a hard line break

This is a paragraph which contains a hard line break

6. Emphasis

Emphasis phrases such as italics and bold can be written in two ways.

This is *italic*, **bold**
This is also _italic_, __bold__

This is italic, bold This is also italic, bold

7. Block Quotes

To directly quote a line or a paragraph, you can emphasize it by placing the > character at the beginning. You can also use it multiple times for multi-level block quotes.

> First block quote
> > Second block quote
> ### It can also be a header

First block quote

Second block quote

It can also be a header

8. Links

You can create links by placing the link text inside square brackets [ ] and the link address inside parentheses ( ). You can also provide a title attribute by leaving a space after the link address.

A [link](http://kramdown.gettalong.org)

A [link](http://kramdown.gettalong.org "hp")

A [link][kramdown hp]
to the homepage.

[kramdown hp]: http://kramdown.gettalong.org "hp"

A link to the [kramdown hp].

[kramdown hp]: http://kramdown.gettalong.org "hp"

A link

A link

A link to the homepage.

A link to the kramdown hp.

If you want to create an internal link to a file within the blog, you can use the following syntax. (Remove the space between the opening brace { and %)

[link]({ % post_url 2021-03-10-layout %})

[link](/blog/layout/)

link link

9. Images

You can attach images by linking to the image source address in the GitHub repository. The syntax is similar to links, but you add an exclamation mark before the square brackets.

Image: ![mine](https://key262yek.github.io/assets/images/new_bio_photo.jpg)

Image:

10. Footnotes

You can indicate footnotes by raising specific characters to the exponent.

Footnote1 declaration a footnote[^1].
Footnote2 declaration a footnote[^2].

[^1]: Explanation of the footnote (at the bottom of the document)
[^2]: Explanation of the footnote (at the bottom of the document)

Footnote1 declaration a footnote¹. Footnote2 declaration a footnote².

11. Paragraphs

Paragraphs can be separated according to the following syntax.

Even if you make a line break, it will be grouped as the same paragraph.
If you add two spaces, it will be grouped as the same paragraph but will appear as a line break.
If you add one more line break, it will be grouped as different paragraphs.

Same line paragraph 1,
Same line paragraph 2

Same paragraph different line 1
Same paragraph different line 2

Same line paragraph 1, Same line paragraph 2

Same paragraph different line 1 Same paragraph different line 2
Same paragraph different line 3

12. Ordered List

An ordered list with numbers 1, 2, 3 is supported. You need to break lines for each item to avoid confusion.

Ordered list 1

1. List Item 1
2. List Item 2
2. Seems like the second list Item 3
   , the continuation of the third item on the next line

Ordered list 1

List Item 1

List Item 2

Seems like the second list Item 3 , the continuation of the third item on the next line

Ordered list 2

1. List Item 1
    > With block quote

    # With header

2. List Item 2

Ordered list 2

List Item 1

With block quote

# With header

List Item 2

Ordered list 3

List Item 1
Sub list Item 1
Sub list Item 2
Sub list Item 3
List Item 2

Ordered list 3

List Item 1

Sub list Item 1

Sub list Item 2

Sub list Item 3

List Item 2

13. Unordered List

An unordered list is supported.

Unordered list 1

* Item1
, continuation of Item1

Unordered list 1

Item 1 , continuation of Item 1

Item 2

Unordered list 2

* Item 1
+ Item 2
- Item 3

Unordered list 2

Item 1

Item 2

Item 3

14. Definition List

Term1
: Definition1
: Definition2

Term2
Term3 (same meaning as term 2)
: Definition of term 2 and 3

Term4

: Definition paragraph 1
: Definition paragraph 2

Term 1

Definition 1

Definition 2

Term 2

Term 3 (same meaning as term 2)

Definition of term 2 and 3

Term 4

Definition paragraph 1

Definition paragraph 2

15. Table

Tables can be separated using the following characters.

: Pipe line to separate columns
:—– : Separates header and body.
— : Separates body within the table
=== : Separates the foot of the table

| Header1 | Header2 | Header3 |
|:--------|:-------:|--------:|
| Column1   | Column2   | Column3   |
| Column4   | Column5   | Column6   |
|----
| Column1   | Column2   | Column3   |
| Column4   | Column5   | Column6   |
|=====
| Foot1   | Foot2   | Foot3
{: rules="groups"}

Header1 Header2 Header3

Column1 Column2 Column3

Column4 Column5 Column6

Column1 Column2 Column3

Column4 Column5 Column6

Foot1 Foot2 Foot3

Header1	Header2	Header3
Column1	Column2	Column3
Column4	Column5	Column6
Column1	Column2	Column3
Column4	Column5	Column6
Foot1	Foot2	Foot3

Explanation of the footnote (at the bottom of the document) ↩
Explanation of the footnote (at the bottom of the document) ↩

Share on

Twitter Facebook LinkedIn

Myeongseon Choi

How to Use Kramdown

1. Headers

H1 Header

H2 Header

H3 Header

H4 Header

H5 Header

H6 Header