md 파일 문법
Markdown, Jekyll ??
Markdown 문법이란, 웹에 화면을 보여주기 위해 글을 쓰는 서식, 하나의 약속입니다.
Markdown 이라는 공통된 규칙으로 글을 쓰기 때문에, 해당 규칙을 바탕으로 실제 웹을 보여주는데 필요한 요소인 HTML을 생성 할 수 있습니다.
Markdown 으로 작성 된 문서를 HTML로 바꾸어 주는데는 변환도구가 필요한데, Jekyll이 이 역할을 해주는 도구 중에 하나입니다.
Quriously의 기술 블로그는 Jekyll이라는 라이브러리를 사용해서 만들어 졌습니다.
Jekyll은 데이터베이스에서 정보를 가져와 동적으로, 그때그때화면을 구성하는 방식이 아닙니다.
Markdown, Liquid, javascript 등의 언어로 이루어진 정적파일을 바탕으로 화면을 구성하는 방식입니다.
이미 만들어진 파일을 기반으로 홈페이지를 구성하기 때문에, 글을 추가하거나 글쓴이 추가하기 위해선 파일 생성이 필수적인 요소입니다.
여기서 필요한 파일이 확장자가 .md인 Markdown 문법으로 작성 된 파일입니다.
따라서 글을 작성하기위해 Markdown 문법에 따라 어떻게 글이 변하는지 소개하겠습니다.
Syntax
읽는 방법
( 변환 전 )
#### 이부분에 *있는* 내용을 본문에 넣으면 이렇게 변합니다. ( *__원본__* )
( 변환 후 )
이부분에 있는 내용을 본문에 넣으면 이렇게 변합니다. ( 원본 )
제목
제목의 크기를 ‘#’을 이용하여 변환 할 수 있습니다. ( 최대 6개 )
# HTML에서 H1에 해당합니다.
## HTML에서 H2에 해당합니다.
### HTML에서 H3에 해당합니다.
#### HTML에서 H4에 해당합니다.
##### HTML에서 H5에 해당합니다.
###### HTML에서 H6에 해당합니다.
####### 여섯개 까지 지원합니다. 그이상은 '#'이 그대로 출력됩니다.
HTML에서 H1에 해당합니다.
HTML에서 H2에 해당합니다.
HTML에서 H3에 해당합니다.
HTML에서 H4에 해당합니다.
HTML에서 H5에 해당합니다.
HTML에서 H6에 해당합니다.
####### 여섯개 까지 지원합니다. 그이상은 ‘#’이 그대로 출력됩니다.
줄바꿈
엔터로 줄을 구분해도 줄이 바뀌지
않습니다. 실제론 이렇게
쳤어요.
엔터로 줄을 구분해도 줄이 바뀌지 않습니다. 실제론 이렇게 쳤어요.
줄바꿈을 하기 위해선 문장의 끝에 공백을 두칸 입력 해 주어야 합니다.
줄바꿈 테스트
줄바꿈을 하기 위해선 문장의 끝에 공백을 두칸 입력 해 주어야 합니다.
줄바꿈 테스트
이미지
이미지를 입력하기 위해선 먼저 이미지를 생성해야 합니다.
이미지파일을 반드시 ( 해당 파일의 날짜 제외 이름을 가진 폴더 )에 이미지를 생성 해 주세요. 폴더가 없다면 폴더를 생성 해주시면 됩니다.
ex_ 2019-07-30-youtube-sample.md 파일에서는 /assets/images/posts/폴더에 youtube-sample이라는 폴더를 생성 해 주시고 해당폴더에 이미지를 넣어 주세요.
이미지를 넣어 주셨다면,를 입력하시면 이미지가 삽입됩니다.
구글, 네이버 등에서 검색이 좀 더 잘 되도록 이미지를 넣어 주실떄 반드시 이미지 [이미지 이름]에 이미지에 대한 설명을 적어주세요.
( 출처 : [출처를 명시해줄 url](출처를 명시해줄 url) )
( 출처 : 출처를 명시해줄 url )
비디오
youtube 또는 vimeo에 올라온 영상을 삽입 할 수 있습니다.
youtube / vimeo의 영상엔 id가 존재합니다.
해당 id값을 넣어주면 영상이 삽입됩니다.
{% include video id="xaHIBS6u4Rg" provider="youtube" %}
{% include video id="350872876" provider="vimeo" %}
링크
1.외부 링크
[글에 표시될 url값](실제 url값)
으로 표시하면 됩니다.
[큐리어슬리](https://www.quriously.com/)
2.내부 링크
이동 하고 싶은 제목( header, 목적지 )에 아이디 값을 부여합니다. ( ID가 한글이면 아이디값이 부여되지 않으며, 띄어쓰기는 -로 구분합니다. )
출발지 설정
소괄호 입니다.
[여기서 이동](#headerId)
도착지 설정
한칸 띄워야 하며 중괄호 입니다.
### [도착지 설정] {#headerId}
[도착지 설정]
강조
이텔릭 / 두껍게 / 취소선 / 밑줄 사용 가능합니다.
이텔릭체는 *별표* 를 사용합니다.
두껍게는 **별표 두개** 를 사용합니다.
**_이텔릭체와_ 두껍게**를 같이 사용 할 수 있습니다.
취소선은 ~~물결표시~~를 사용합니다.
<u>밑줄</u>은 `<u></u>`를 사용합니다.
이텔릭체는 별표 를 사용합니다.
두껍게는 별표 두개 를 사용합니다.
이텔릭체와 두껍게를 같이 사용 할 수 있습니다.
취소선은 물결표시를 사용합니다.
밑줄은 <u></u>를 사용합니다.
코드 강조
코드 강조는 inline 형태와 block 형태가 있습니다. 모두 특수문자 `( grave, 따옴표(‘‘)가 아닙니다 ! )를 사용하여 표시합니다.
inline 형태는 글의 중간에 코드를 (`text`)입력하고자 할 때 사용합니다.
inline 형태는 글의 중간에 코드를 (text)입력하고자 할 때 사용합니다.
```java
// 블록 형태의 코드강조를 사용하려면 `를 세번 이상 사용하여 표시합니다.
public void print() {
system.out.print("hello world!");
}```
// 블록 형태의 코드강조를 사용하려면 `를 세번 이상 사용하여 표시합니다.
public void print() {
system.out.print("hello world!");
}
사용 할 수 있는 언어 종류는 https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers에서 확인 할 수 있습니다.
인용문
> 문장 앞에 '>'를 붙여 인용 형태의 글을 사용 할 수 있습니다.
문장 앞에 ‘>’를 붙여 인용 형태의 글을 사용 할 수 있습니다.
목록
1. 숫자 목록을 만들때
6. 6으로 시작해도 알아서 숫자가 매겨집니다.
1. 1로 시작하셔셔 목록을 만들어주세요
- 서브목록도 됩니다.
- 이건 숫자를 적용하지 않을꺼에요.
1. 알아서 숫자가 바뀝니다.
1. 이렇게요.
1. 탭을 두번을 주시면 숫자 서브목록도 됩니다.
1. 숫자도 바뀝니다. 같은 1인데요.
- 숫자가 들어가지 않은 목록이에요.
- 대쉬도 사용 가능하구요
* 별표도 사용가능합니다.
+ 더하기도 가능해요.
- 숫자 목록을 만들때
- 6으로 시작해도 알아서 숫자가 매겨집니다.
- 1로 시작하셔셔 목록을 만들어주세요
- 서브목록도 됩니다.
- 이건 숫자를 적용하지 않을꺼에요.
- 알아서 숫자가 바뀝니다.
- 이렇게요.
- 탭을 두번을 주시면 숫자 서브목록도 됩니다.
- 숫자도 바뀝니다. 같은 1인데요.
- 숫자가 들어가지 않은 목록이에요.
- 대쉬도 사용 가능하구요
- 별표도 사용가능합니다.
- 더하기도 가능해요.
수평선
***
---
___
를 사용하여 수평선을 만들 수 있습니다.
수평선 끝
표
헤더 셀을 구분 할 때 - 를 세개 이상 사용하여 구분합니다.
컬럼을 구분 할 때 |를 사용하여 구분합니다.
기본적으로 왼쪽 정렬이며, 가운데 정렬, 오른쪽 정렬을 하기 위해선 헤더셀을 구분 할 때 :를 사용합니다.
| 아무것도 하지 않은 정렬 | 가운데 정렬 | 오른쪽 정렬 |
| ----------------- |:---------:|----------:|
| 하하하 |하하하 | 하하하하 |
| ㅎㅎㅎ | ㅎㅎ하 | 하하하 |
| 아무것도 하지 않은 정렬 | 가운데 정렬 | 오른쪽 정렬 |
|---|---|---|
| 하하하 | 하하하 | 하하하하 |
| ㅎㅎㅎ | ㅎㅎ하 | 하하하 |
Raw HTML
HTML 코드 / jekyll의 template language인 liquid의 문법도 md 파일에서 사용 하실 수 있습니다.
{% assign number = 1 | plus: 5 %}
{% if number == 4 %}
<h3> number 값은 {{ number }}야 ! </h3>
{% else %}
<h3> number 값은 4가 아니라 {{ number }}이야 ! </h3>
{% endif %}
