JekyllMarkdown

Hello, world!

Test example

Posted by Lynn on July 25, 2020

The post in website based on Jekyll is typically written with Markdown, which is just a lightweight markup language with plain text formatting syntax. This makes it very easy to create and publish posts.

Create a Post

To create a post, add a file to your _posts directory with the following format:

1

YEAR-MONTH-DAY-name-of-post.md

Where YEAR is a four-digit number, MONTH and DAY are both two-digit numbers. For example, the following are examples of valid post filenames:

1

2020-07-30-test-example.md

All blog post files must begin with front matter which is typically used to set a layout or other metadata. The post you are reading now is like this:

1
2
3
4
5

---
title:    Hello, world!
subtitle: Test example
tags: [Jekyll, Markdown]
---

Add More Content

After you create the post file, it’s time to add some content. Below is a simple list of Markdown syntax and extensions.

Block Elements

Headers

1
2
3
4
5
6
7
8
9

# H1

## H2

### H3

#### H4

##### H5

You may not use # H1 in your post, because the title variable in front matter is considered as H1 and showed on the top of the page.

Lists

  • Unordered

    1
2
3

      - Red
  - Green
  - Blue
    • Red
    • Green
    • Blue

  • Ordered

    1
2
3

      1. Red
  1. Green
  1. Blue
    1. Red
    2. Green
    3. Blue

  • Task

    1
2
3

      - [x] Task 1
  - [ ] Task 2
  - [ ] Task 3
    • Task 1
    • Task 2
    • Task 3

Code Blocks

There are many different ways to style code blocks, you can indent with four spaces:

    if (2 > 1) {
        return true
    }

1
2
3

if (2 > 1) {
    return true
}

GitHub also supports something called code fencing, which allows for multiple lines without indentation, and if you’d like to use syntax highlighting, include the languages:

```java
if (2 > 1) {
    return true
}
```

1
2
3

if (2 > 1) {
    return true
}

We use Linguist to perform language detection and syntax highlighting. You can find out which keywords are valid in the languages YAML file.

Blockquotes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

> Blockquotes uses `>` characters for blockquoting. And blockquotes can be nested by adding additional levels of `>`:
>
> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Blockquotes can also contain other Markdown elements:
>
> 1. This is the first list item.
> 1. This is the second list item.
>
> Here's some example code:
>
> ```java
>  if (2 > 1) {
>      return true
>  }
> ```

Blockquotes uses > characters for blockquoting. And blockquotes can be nested by adding additional levels of >:

This is the first level of quoting.

This is nested blockquote.

Blockquotes can also contain other Markdown elements:

  1. This is the first list item.
  2. This is the second list item.

Here’s some example code:

1
2
3

 if (2 > 1) {
     return true
 }

Span Elements

  • Hyperlinks

    1

      [Lynn's Blog](https://lynn9388.github.io)

    Lynn’s Blog

  • Anchor Links

    An anchor link is a link on a page that brings you to a specific place on that page.

    1

      [Span Elements](#span-elements)

    Span Elements

    Note that the link must be a lowercase header, even if the original header contains uppercase letters. If the header contains multiple words, they must be connected by -. If your header contains complex symbols, you should pre-generate the HTML page from Markdown and see what the id attribute of that header with your browser’s web developer tools.

Text Formatting

1
2
3
4
5

*Italic*

**Bold**

~~Strikethrough~~

Italic

Bold

Strikethrough

Inline Code

1

Inline `code` has `backticks` around it.

Inline code has backticks around it.

Extras

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

1
2
3

| HEADER1 | HEADER2 | HEADER3 | HEADER4 |
| ------- | :------ | :-----: | ------: |
| content | content | content | content |
HEADER1 HEADER2 HEADER3 HEADER4
content content content content

You can choose a different alignment style for each column:

  • :----- Align left
  • :----: Align center
  • -----: Align right

You may want to use a table generator for complicated tables.

MathJax

The theme supports MathJax, which means you can embed mathematics with \(\rm\LaTeX\).

1

$$E = mc^2$$
\[E = mc^2\]

References

    CATALOG
      FEATURED TAGS
      JekyllMarkdown