mdsvex를 통해 블로그의 포스트를 마크다운 파일로 작성합니다.

아래 내용은 마크다운의 기본 문법들을 테스트하기 위해 markdownguide.org의 basic-syntax를 인용했습니다.

The Complete Guide of
Readme Markdown Syntax

Markdown is a syntax for styling all forms of writing on the GitHub platform. Mostly, it is just regular text with a few non-alphabetic characters thrown in, like git # or *

You can use Markdown most places around GitHub:

1. Gists
2. Comments in Issues and Pull Requests
3. Files with the .md or .markdown extension

Headers

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Font

_Italics_
_This will also be italic_
**Bold text**
**This will also be bold**
**_Bold and Italics_**
_You **can** combine them_
~~Striked Text~~
**_~~Italic, bold, and strikethrough1~~_**

Italics
This will also be italic
Bold Text
This will also be bold
Bold and Italics
You can combine them
Striked Text
Italic, bold, and strikethrough1

Lists

Unordered

- Item 1
- Item 2
  - Item 1a
  - Item 2a
    - Item 1b
    - Item 2b

• Item 1
• Item 2
  • Item 1a
  • Item 2a
    • Item 1b
    • Item 2b

OR - Item 1

• Item 1

Ordered

1. First
2. jhg
   1. Second
   2. jhg
      1. Third
      2. jhg

1. First
2. jhg
   1. Second
   2. jhg
      1. Third
      2. jhg

Links

- [Link with more info with various formatting options](https://docs.github.com/en/github/writing-on-github 'more info')
- https://www.google.com/
- <https://www.google.com/>

• Link with more info with various formatting options
• https://www.google.com/
• https://www.google.com/

Link Label

[My GitHub][githublink]

My GitHub

You may define your link label anywhere in the document.

e.g. put on bottom:

---

[githublink]: https://github.com/PresentKim

Links to the URLs in a repository

[Example document](/posts/blog/basic-markdown)

Example document

[example](./basic-markdown)

example

Inserting Images or Gifs using links

![alt](URL 'title')

• alt in square bracket indicates the replacement text when the image fails to display (can be omitted)
• parenthesis contains image source
• title in quotes indicates the text to display when the mouse hovers over the image (can be omitted)

Nite: Dropping the image to the readme file will upload it automatically with this syntax; It’s the same as links, but add an exlamation mark (!) before opening square bracket; Image source can be either a location from the local machine or any valid image URL;

Example

![Octocat](https://avatars.githubusercontent.com/u/13284800?v=4 'Profile')

Resize images/Gifs

<img src="https://avatars.githubusercontent.com/u/13284800?v=4" alt="Profile" width="385px" align="center">

You can use HTML tags like width=“42px”, hight=“100px”, align=“center”, etc depending what you need. In this case this gif was once uploaded to the repository and the link was taken from there.

Linking Image/Gif

To open another webpage when image is clicked, enclose the Markdown for the image in brackets, and then add the link in parentheses.

[![Octocat](https://avatars.githubusercontent.com/u/13284800?v=4 "GitHub Logo")](https://github.com/)

Tables

| Header1 | Header2 | Header3 |
| ------- | ------- | ------- |
| This    | is a    | table   |
| This    | is 2nd  | row     |
| This    | is 3rd  | row     |

Align

You may specify alignment like this:

| Align left |    Centered     | Align right |
| :--------- | :-------------: | ----------: |
| col 3 is   | some wordy text |       $1600 |

p.s. You can use alignment with <h1 (or 2 etc.) align="center"> your text </h1> tags or with <p align="center"> your text</p> tag to align plain text.

CheckBox

- [ ] Checkbox1

- [ ] Checkbox2

- [x] Checkbox selected

• Checkbox1

• Checkbox2

• Checkbox selected

You may use this syntax in GitHub’s issue to check or uncheck the checkbox in real time without having to modify the original version of the issue.

Quoting Text

> This is a block quoted text

This is a block quoted text

Multi-level blockquotes

> Asia
>> China
>>> Beijing
>>>> Haidian
>>>>> Tsinghua

Look like

Asia

China

Beijing

Haidian

Tsinghua

• These are fenced code blocks

Text highlighting

`linux` `ubuntu`

Using a pair of backquotes is suitable for making tags for articles linux ubuntu

Horizontal Line

---
---

---

All three will be rendered as:

p.s.

<hr> works too

Break between lines

<br>

Multi-line text

Use three backticks:

asd,
sfd,
wer!

This syntax can also be used for code highlighting

Comments in Markdown

<!-- comment written in markdown -->

They will be invisible on readme

Emoji

:grinning: or just place the emoji 😀

😀 or just place the emoji 😀

To see a list of every image Github supports, check out the Emoji Cheat Sheet

Code Block

See example

Anchor

In fact, each title is an anchor, similar to the HTML anchor (#), e.g.

Note that all the letters in the title are converted to lowercase letters.