웹사이트 검색

Linux에서 GitHub 기반 Markdown으로 작업하는 방법


마크다운은 웹용으로 만들어진 서식 지정 언어입니다. 마크다운의 목적은 우리가 인터넷에 글을 쓸 때 삶을 편하게 만드는 것입니다. 시간이 지나면서 다양한 종류의 마크다운이 만들어졌습니다. 하지만 이 글에서는 주로 Github Flavored Markdown(GFM)에 중점을 둘 것입니다.

GithubCommonMark를 기반으로 합니다. 테이블, 코드 펜싱 등과 같이 GFM에서 지원되는 추가 기능이 많이 있습니다. GFM의 구문과 다양한 경우에 이를 사용하는 방법을 살펴보겠습니다.

나는 이것을 보여주기 위해 VScode를 사용하고 있지만 당신에게 적합한 Linux 편집기를 선택할 수 있습니다. Atom 및 Vscode와 같은 일부 편집기에는 마크다운 지원이 제공되며 일부 편집기의 경우 마크다운 플러그인을 설치해야 합니다.

마크다운을 사용하려면 파일을 .md 또는 .markdown 확장자로 저장해야 합니다.

Markdown Editor에 제목을 추가하는 방법

마크다운에는 6 수준의 제목이 지원됩니다. 제목을 만들려면 해시 (#) 기호 뒤에 공백과 제목 이름을 사용하세요. 해시 값이 높을수록 제목 크기가 작아집니다.

참고: H1H2에는 기본적으로 밑줄 스타일이 있습니다.

Heading1
## Heading2
### Heading3
#### Heading4
##### Heading5
###### Heading 6

때로는 제목을 중앙으로 정렬하고 싶을 수도 있습니다. 그러나 슬픈 이야기는 마크다운에서 정렬이 기본적으로 지원되지 않는다는 것입니다. 기본적으로 제목은 왼쪽 정렬로 렌더링됩니다. 정렬을 위해 마크다운 내에 HTML/CSS 태그를 포함할 수 있습니다.

<h1 style="text-align:center">MARKDOWN</h1>
<h1 style="text-align:left">MARKDOWN</h1>
<h1 style="text-align:right">MARKDOWN</h1>
<h1 style="text-align:justify">MARKDOWN</h1>

마크다운 편집기에 주석을 추가하는 방법

주석은 코드/문서를 더 잘 이해할 수 있도록 특정 사항을 문서화하는 방법입니다. 이는 마크다운 엔진에 의해 렌더링되지 않습니다.

<!--
Comment block
-->

텍스트를 한 줄로 렌더링하는 방법

일반적으로 별도의 줄에 무언가를 입력하면 다른 마크다운이 한 줄로 렌더링됩니다.

두 가지 방법으로 줄 바꿈을 만들 수 있습니다.

  • 부드러운 줄 바꿈
  • 강경 브레이크

부드러운 줄 바꿈은 줄 끝에 공백 두 개를 추가하여 만들 수 있습니다. 이런 식으로 마크다운은 각 줄을 별도의 줄로 렌더링합니다.

강경한 줄 바꿈은 각 줄 사이에 빈 줄을 삽입하여 만들 수 있습니다.

수평선을 추가하는 방법

가로줄별표(*), 하이픈(-) 또는 밑줄(_)을 3개 이상 배치하여 만들 수 있습니다. 한 줄에. 사이에 공백을 추가하는 것도 괜찮습니다.

* * *
---
___

텍스트를 굵게 만드는 방법

단어나 줄을 굵게 만들려면 이중 별표 (**) 또는 이중 밑줄 (__) 사이에 단어나 줄을 묶습니다.

**Making this sentence bold using double asterisks.**

__Making this sentence bold using double underscore.__

텍스트를 이탤릭체로 만드는 방법

단어나 줄을 기울임꼴로 만들려면 단일 별표 (*) 또는 단일 밑줄 (_) 사이에 단어나 줄을 묶습니다.

*Making this line to be italicized using asterisks.*

_Making this line to be italicized using underscore._

선에 취소선을 추가하는 방법

무엇이든 치려면 이중 물결표를 사용해야 합니다. 이중 물결표 (~~) 사이에 취소선이 필요한 부분을 둘러싸세요.

I am just striking the word ~~Howdy~~.

~~I am striking off the entire line.~~

인용문을 추가하는 방법

인용 부호에는 (>)보다 큰 기호를 사용하세요.

> Single line blockquote.

아래 블록 인용문이 어떻게 렌더링되는지 확인하세요. 두 줄 모두 같은 줄에 렌더링됩니다.

> first line
> Second line
> Third line
> Fourth line

각 줄의 끝에 두 개의 공백을 남겨두면 줄바꿈을 사용할 수 있습니다. 이렇게 하면 각 줄이 한 줄로 렌더링되지 않습니다.

보다 큰 기호 앞에 붙은 대체 줄을 비워 둡니다. 이 방법으로 동일한 블록 내의 각 줄 사이에 줄 바꿈을 만들 수 있습니다.

> first line
> 
> Second line
> 
> Third line
> 
> Fourth line 

(>>)보다 큰 기호 두 개를 추가하여 중첩된 블록 따옴표를 만들 수도 있습니다.

인라인 코드 생성

인라인 코드를 만들려면 BACKTICK을 사용하세요. 아래 예제에서는 인라인 코드를 생성하는 방법을 보여줍니다. 인라인 코드로 렌더링된 단어 Notes와 Readme를 살펴보세요.

Markdown is one of the best tools for taking `notes` and creating `readme` files.

코드 블록 구문 강조 추가

탭이나 공백 4개를 추가하고 코드를 배치하여 코드 블록으로 렌더링합니다. 또는 세 개의 백틱 사이에 코드를 배치하여 블록이 코드 블록으로 렌더링되도록 만드세요. 여기서 주목해야 할 중요한 기능은 구문 강조입니다. 일반적으로 블록 내에 코드를 배치하면 색상 구성표가 적용되지 않습니다.

```
echo "Hello world"
```

이제 동일한 예를 보면 색 구성표가 자동으로 적용됩니다. 이는 코드에 색 구성표를 적용하는 세 개의 역따옴표 뒤에 프로그래밍 언어 이름을 추가하면 가능합니다.

```bash
echo "Hello world"
```

샘플 파이썬 코드.

```python
def fp():
  print("Hello World!!!")
fp()
```

샘플 SQL 쿼리.

```sql
SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE   
WHERE SALARY_EMP<(SELECT MAX(SALARY_EMP) FROM EMPLOYEE_TABLE)
```

정렬된 목록과 정렬되지 않은 목록 만들기

마크다운에서는 항목을 순서가 있는 목록과 순서가 없는 목록으로 구성할 수 있습니다. 순서가 지정된 목록을 만들려면 숫자와 마침표를 추가하세요. 여기서 주목해야 할 흥미로운 부분은 숫자가 순차적일 필요가 없다는 것입니다. 마크다운 엔진은 비순차적 정렬을 하더라도 그것이 정렬된 목록이라는 것을 이해할 만큼 똑똑합니다.

아래 예에서는 비순차적 순서(10, 15, 150)로 정렬된 목록을 생성했지만 마크다운 엔진이 이를 적절한 순서로 렌더링하는 것을 볼 수 있습니다. 이미지에 표시된 대로 중첩 목록을 만들 수도 있습니다.

순서가 지정되지 않은 목록을 만들려면 더하기 기호 (+) 별표 (*) 또는 대시 (-) 뒤에 공백과 목록 내용을 사용하세요. 순서가 지정된 목록과 유사하게 여기에서도 중첩 목록을 만들 수 있습니다.

작업 목록 만들기

이는 GFM의 특별한 기능입니다. 아래 이미지와 같이 작업 목록을 생성할 수 있습니다. 작업을 완료로 표시하려면 이미지에 표시된 대로 대괄호 사이에 'x'를 추가해야 합니다.

텍스트에 링크 추가

링크를 추가하려면 아래 구문을 따르세요.

[Tecmint](https://linux-console.net "The best site for Linux")

구문을 3가지 부분으로 나누어 보겠습니다.

  • 표시할 텍스트 – 대괄호 ([Tecmint]) 안에 배치될 텍스트입니다.
  • 링크 – 실제 링크를 괄호 안에 넣습니다.
  • 제목 – 텍스트 위에 마우스를 올리면 링크에 대한 툴팁이 표시됩니다. 제목은 이미지와 같이 따옴표 안에 넣어야 합니다.

아래 이미지에서 "Tecmint"가 내 표시 텍스트임을 볼 수 있으며, 이를 클릭하면 "linux-console.net"으로 리디렉션됩니다.

링크를 꺾쇠 괄호 < > 안에 넣어서 생성할 수도 있습니다.

이미지에 링크 추가

이미지의 구문은 링크를 추가하는 것과 유사합니다. 이미지를 추가하려면 아래 구문을 따르세요.

![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")

구문을 3부분으로 나누어 보겠습니다.

  • 대체 텍스트 – 대체 텍스트는 대괄호(![alt-text]) 사이에 배치됩니다. 이미지가 깨졌거나 로드할 수 없는 경우 이 텍스트가 깨진 기호와 함께 표시됩니다.
  • 링크 – 괄호 안에 이미지에 대한 실제 링크를 배치합니다.
  • 제목 – 이미지 위에 마우스를 올리면 이미지 이름이 표시됩니다. 제목은 이미지와 같이 따옴표 안에 넣어야 합니다.

이미지로 링크를 만들 수도 있습니다. 사용자가 이미지를 클릭하면 외부 링크로 리디렉션됩니다. 구문은 몇 가지 수정 사항을 제외하고 동일하게 유지됩니다. 대괄호 안에 이미지를 삽입하는 데 사용한 것과 동일한 구문을 사용하고 괄호 안에 링크를 넣습니다.

[![BrokenImage](https://www.bing.com/th?id=AMMS_ff6f3f7a38b554421b6e614be6e44912&w=110&h=110&c=7&rs=1&qlt=80&pcl=f9f9f9&cdv=1&dpr=1.25&pid=16.1 "Markdown logo")](https://en.wikipedia.org/wiki/Markdown)

테이블 만들기

테이블은 원래 마크다운 버전에서 지원되지 않습니다. 이는 GFM과 함께 제공되는 특별한 기능 중 하나입니다. 단계별로 테이블을 작성하는 방법을 살펴보겠습니다.

첫 번째 부분은 열 이름을 만드는 것입니다. 컬럼 이름은 (|) 파이프로 구분하여 생성할 수 있습니다.

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |

두 번째 줄에서는 대시 (-)를 콜론 (:)과 함께 사용합니다. 대시는 마크다운 엔진에 이것이 테이블로 렌더링되어야 함을 알려주고 콜론은 텍스트를 가운데 정렬할지, 왼쪽 정렬할지, 오른쪽 정렬할지 결정합니다.

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|

:---:  ⇒ Center alignment
:---   ⇒ Left alignment
---:   ⇒ Right alignment

세 번째 줄부터 레코드 생성을 시작할 수 있습니다. 레코드는 파이프 (|)로 구분되어야 합니다.

| EMPLOYEE_NAME | EMPLOYEE_AGE | EMPLOYEE_ID |
|:-------------:|:-------------|------------:|
|  Ravi         |   30         |  127        |
|  karthick     |   27         |  128        |

위 이미지를 보면 테이블이 제대로 렌더링된 것을 볼 수 있습니다. 열 1은 가운데 정렬되고 열 2와 3은 왼쪽 및 오른쪽 정렬됩니다. Vscode를 사용하는 경우 'Markdown Table Prettifier'를 사용하여 테이블 형식을 깔끔하게 지정할 수 있습니다.

이모티콘 만들기

GFM은 다양한 이모티콘을 지원합니다. 이모티콘 치트 시트를 살펴보세요.

이것이 바로 이 기사입니다. 피드백이 있으면 댓글 섹션에 게시해 주세요.