Velog 글 작성법(Markdown 작성법 + 수식)

Prologue

그동안 학생으로써 또는 개발자로서 나만의 기술 블로그를 작성하고 싶었습니다. 다양한 블로그 플랫폼(티스토리, github, 미디엄, 벨로그, 워드프레스 등등..) 고민하였으나 마크다운 기반으로 쉽게 작성가능한 velog를 첫 블로그 선택하였고.. 사용법을 작성해보고자 합니다.

Velog 글 작성법 (마크다운 문법)

1. Headings(제목,주제)

#을 사용하여 제목의 크기를 정합니다. 1~6개의 #으로 제목 텍스트를 설정할 수 있습니다.

2개 이상의 headings를 사용할 경우, 자동으로 contents table을 생성해 줍니다. Contents table 각각의 headings 를 클릭하면 해당 section으로 이동합니다.

⌨️ 입력

***
## The second largest heading
***
### 3333333333333333333
***
#### 444444444444444444444
***
##### 555555555555555555555
***
###### The smallest heading6
***

🖥 출력

The largest heading

The second largest heading

3333333333333333333

444444444444444444444

555555555555555555555

The smallest heading6

*** 으로 글에서 회색 구분선을, <br>로 줄바꿈 을 할 수 있습니다.

2. Styling text(글꼴 스타일)

글꼴 스타일 지정하여 텍스트를 강조할 수있습니다.

bold(굵게), italic(이탈릭체), strikethrough(취소선)

Style	Syntax	Keyboard shortcut	Example	Output
Bold	or __ __	Command + B (MAC) or Ctrl+B (Windows/Linux)	`This is bold text`	This is bold text
Italic	* * or _ _	Comand + I (MAC) or Ctrl+I (Windows/Linux)	`This text is italicized`	This text is italicized
Strikethrough	~~ ~~		`~~This was mistaken text~~`	~~This was mistaken text~~
Bold and nested italic	and _ _		`This text is _extremely_ important`	*This text is extremely* important**
All bold and italic	`* *`		`*All this text is important*`	*All this text is important*

3. Quoting text(인용문)

텍스트를 > 이용하여 인용할 수 있습니다.

⌨️ 입력
Text that is not a quote
> Thext that is a quote
🖥 출력
Text that is not a quote

Text that is quote

추가적으로 중복하여 사용할 수 있습니다.

⌨️ 입력

>Text that is quote
>>Quote that is in quote

🖥 출력

Text that is quote

Quote that is in quote

4. Quoting code(코드 인용)

하나의 backticks ` 으로 문장내 코드 또는 명령을 작성할 수 있습니다. backticks 내의 텍스트들은 포맷되지않고 그대로 출력됩니다.

⌨️ 입력
Use ` git status ` to list all new or modified files that haven't yet been committed.
🖥 출력

Use git status to list all new or modified files that haven't yet been committed.

코드나 텍스트를 독립적인 블록에 작성하고 싶다면 3개의 backticks `를 사용해 보세요!

⌨️ 입력

Some basic Git commands are:
```
git status
git add
git commit
```

🖥 출력

git status
git add
git commit

4.1 Syntax highlighting(문법 강조)

추가적인 언어 구별자를 사용해 코드 블럭 에서 syntax 강조를 할 수 있습니다.

예를들어 간단한 파이썬 코드를 작성해 보겠습니다.
⌨️ 입력

```python
def function1():
	for i in range(10):
		print("Hello Velog!")
    print("function1 finished")

```

🖥 출력

def function1():
	for i in range(10):
		print("Hello Velog!")
    print("function1 finished")

5. Links(링크)

인라인 링크를 작성하려면 대괄호 [] 로 묶은후 URL을 ()로 묶은후 입력하면 됩니다.

⌨️ 입력
I like [Github Pages](https://pages.github.com/).
I like [Velog](https:https://velog.io/).
🖥 출력
I like Github Pages.
I like Velog.

6. Images(이미지)

!입력후 [ ] 를 입력하고 이미지 링크를 입력하면 이미지를 띄울 수 있습니다. 컴퓨터에 있는 파일을 올리면 자동으로 링크를 생성해줍니다.

⌨️ 입력

![](https://media.vlpt.us/images/jay_/post/dcf7c78c-a924-4aa2-8e47-c23fc426a668/velog_logo.png)

🖥 출력

6.1 Images 크기 조절

html 을 활용하여 작성하면 width, height를 px,%등으로 입력하여 사이즈를 조절할 수 있습니다.

⌨️ 입력
<img src="https://images.velog.io/images/jay_/post/dcf7c78c-a924-4aa2-8e47-c23fc426a668/velog_logo.png" height="20%" width="20%">
🖥 출력

💡 height, width 뿐만 아니라 align값을 right, left를 입력하면 오른쪽, 왼쪽정렬이 가능합니다!

7. Lists(목록)

- 또는 * 사용하여 순서없는 목록을 만들 수 있습니다.

⌨️ 입력

- George Washington
- John Adams
- Thomas Jefferson

🖥 출력
George Washington
John Adams
Thomas Jefferson

순서가 있는 목록은 각 행 앞에 숫자를 붙이면 됩니다.

⌨️ 입력

1. James Madison
2. James Monroe
3. John Quincy Adams

🖥 출력

James Madison
James Monroe
John Quincy Adams

Nested list (중첩 목록)

하나 이상의 목록을 다른 항목 아래에 들여써 중첩 목록을 만들 수 있습니다. - 또는 *가 상위 항목의 텍스트 첫문자 바로 아래에 올때 까지 공백문자를 입력하면 됩니다.

⌨️ 입력

1. First list item
   - First nested list item
     - Second nested list item

🖥 출력

First list item
- First nested list item
  - Second nested list item

8. 이모티콘

다음의 단축키로 이모티콘을 사용할 수 있습니다.
Window : window + .
Mac : Command + Control + Spacebar
🖥⌨️🐽💡►🦊

9. Tables(표)

파이프 | 와 하이픈 -을 사용하여 table을 만들 수 있습니다. -은 각 열의 헤더를 만들때, |는 각 열을 구분하는데 사용합니다. (테이블윗줄이 비어있어야 합니다.)

⌨️ 입력

| Command | Description |
| --- | --- |
| `git status` | List all *new or modified* files |
| `git diff` | Show file differences that **haven't been** staged |

🖥 출력

Command	Description
`git status`	List all new or modified files
`git diff`	Show file differences that haven't been staged

다음과 같이 오른쪽, 왼쪽 중앙 정렬도 가능합니다.

⌨️ 입력

| Left-aligned | Center-aligned | Right-aligned |
| :---         |     :---:      |          ---: |
| git status   | git status     | git status    |
| git diff     | git diff       | git diff      |

🖥 출력

Left-aligned	Center-aligned	Right-aligned
git status	git status	git status
git diff	git diff	git diff

10. 수식

수식은 보통 논문에서 많이 보게되고 이에 작성의 필요성을 느껴 추가합니다. velog 에서 수식 작성은 KaTex 라이브러리를 이용하여 작성할 수 있습니다. 일반적으로 $$ 태그를 사이에 두고 작성합니다. (관련 내용 업데이트는 velog 공식 블로그에 간략하게 나와있습니다.)

예시1

⌨️ 입력

$$
\begin{bmatrix}a & b \\ c & d \end{bmatrix} * 
\begin{bmatrix}a & b \\ c & d \end{bmatrix} = 
\begin{bmatrix}a^2 + bc & ab+bd \\ 
ac+cd & bc+d^2 \end{bmatrix}
$$

🖥 출력 $\begin{bmatrix}a & b \\ c & d \end{bmatrix} * \begin{bmatrix}a & b \\ c & d \end{bmatrix} = \begin{bmatrix}a^2 + bc & ab+bd \\ ac+cd & bc+d^2 \end{bmatrix}$

예시2

⌨️ 입력

$$
\displaystyle\sum_{i=1}^{k+1}i
\displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right) 
+(k+1)
$$

🖥 출력 $\displaystyle\sum_{i=1}^{k+1}i \displaystyle \displaystyle= \left(\sum_{i=1}^{k}i\right) +(k+1)$

수학을 전공하지는 않았지만 수식에는 정말 다양한 표기가 있음을 압니다. 다양한 표기를 작성하는 방법은 Katex Docs 링크를 참고하시면 좋을 것 같습니다.
https://katex.org/docs/supported.html

참고자료

Velog [Markdown] 사용법:
https://velog.io/@kim-mg/velog-%EA%B8%80%EC%93%B0%EA%B8%B0-markdown-%EC%9E%91%EC%84%B1%EB%B2%95

[Markdown] 이미지 크기 조절,정렬
https://velog.io/@baekmoon1230/Markdown-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%81%AC%EA%B8%B0-%EC%A1%B0%EC%A0%88-%EC%A0%95%EB%A0%AC

깃허브Docs
https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#quoting-code

벨로그 공식 블로그
https://velog.io/@velog/v2-update#10-%EC%82%AC%EB%9D%BC%EC%A7%84-%EA%B8%B0%EB%8A%A5%EB%93%A4

좀더 읽어볼만한 자료

깃허브 - Working with advanced formatting
https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting

마크다운 문법 - detail한 글
https://velog.io/@wonhs717/%EB%A7%88%ED%81%AC%EB%8B%A4%EC%9A%B4Markdown-%EB%AC%B8%EB%B2%95-ytk5zemk0x

Epilogue

Velog .. 그리고 블로그 첫 글을 작성해 보았습니다. 글재주가 없고, 마크다운 작성법을 공부해 가면서 작성하느라 시간이 조금 걸렸습니다. 부족하거나 틀린부분있으면 편하게 말씀해주시면 감사드리겠습니다!

현재 이미지 크기조절이 잘 안되네요.. 참고하시길 바랍니다.

Author And Source

이 문제에 관하여(Velog 글 작성법(Markdown 작성법 + 수식)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jay_/Velog-글-작성법Markdown-작성법

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

DeprecationWarning: executable_path has been deprecated 해결하기

[TIL] 프론트엔드 Day 1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다