유기체의 다락방
키워드: #VuePress

# 마크다운 예제

마크다운 공식 이미지마크다운 공식 이미지

# 서두

이 사이트의 모든 글 작성의 기본이 될 마크다운 문법에 대해 공부하는 것이 당연하겠다. 조사를 해보니 마크다운은 표준이 없는 듯 하다. 그래서인지 기본적인 문법을 제외하면 각 사이트마다 매우 그 양상이 달랐다. 그러므로 VuePress에서 쓰이는 문법들로 알아보면 되겠다. 다만 공통적으로 적용될만한 기본적인 문법들이 무엇인지는 구분해서 알아두어야 하겠다.

VuePress는 markdown-it (opens new window)을 마크다운 파서로 사용한다. markdown-it에는 각종 플러그인 확장이 존재하는데 VuePress에서도 그 중 일부가 쓰인것으로 보이며 위 링크에 등장하는 플러그인 중 일부만 VuePress에서 동작한다. 아래는 모두 테스트 후 동작하는 것들만 기록. 현재 v0.14.2 기준이다.

데모 사이트가 있으니 각자 테스트 해보자. 데모 (opens new window)

# 기본

어느 파서에서나 동작할만한 기본적인 마크다운 문법

# 단락(Paragraph)

# 문법

첫번째 줄
두번째 줄

세번째 줄
1
2
3
4

# 출력

첫번째 줄 두번째 줄

세번째 줄

# 설명

마크다운을 처음 접할 때 가장 실수를 많이 하게 된 부분. 일반적인 문장은 엔터로 구분해도 하나의 단락으로 인식한다.

# 제목(Heading)

# 문법

# h1
## h2
### h3
#### h4
##### h5
###### h6
1
2
3
4
5
6

# 출력

# h1

# h2

# h3

# h4

# h5
# h6

# 설명

HTML 태그와 그대로 대응되는 것들. 헤딩은 URL 끝에 # 이후에 지정되면 해당 위치로 스크롤 되므로 꽤 중요한 정보가 된다. 한줄 띄어쓰지 않아도 된다. 특기할 만한 점은 ## 헤딩에만 자동으로 구분선이 그려진다는 점.

# 구문 장식

# 문법

**강조** __강조__

*이탤릭* _이탤릭_

~~취소선~~

인라인 `코드`
1
2
3
4
5
6
7

# 출력

강조 강조

이탤릭 이탤릭

취소선

인라인 코드

# 설명

매우 기본적인 장식. 위 첨자 아래 첨자는 기본일 줄 알았는데 동작하지 않았다. 복잡한 수식 들은 바로 적용이 안될것 같다. 필요할 때 연구해서 적용하는 수 밖에.

# 문법

1. [내부 링크](/blog/vuepress/마크다운-예제.html)
2. [내부 링크](/blog/vuepress/마크다운-예제.md)
3. [내부 링크](/blog/vuepress/마크다운-예제)
4. [내부 링크](/blog/)
5. [내부 링크](/blog)
6. [외부 링크](https://www.google.com)
1
2
3
4
5
6

# 출력

  1. 내부 링크
  2. 내부 링크
  3. 내부 링크 오류!
  4. 내부 링크
  5. 내부 링크 오류!
  6. 외부 링크 (opens new window)

# 설명

내부 링크시 주의할 점은, .html이나 .md를 붙여줘야 한다는 점이다. .md는 실제로는 빌드시에 .html로 변환이 된다. 3번의 경우는 없는 페이지가 된다. 4번의 경우는 /blog/README.md파일이 링크가 되며, 5번처럼 /를 누락하면 역시 없는 페이지가 된다.

# 이미지(Image)

# 문법

![내부 이미지](/images/green-gear-small.png)

<img src="https://vuepress.vuejs.org/hero.png" alt="외부 이미지" height="100px" />
1
2
3

# 출력

내부 이미지

외부 이미지

# 설명

내부 주소의 경우는 기본 설정의 루트가 ~/docs/.vuepress/public이다. 또한 크기 설정이 필요한 경우는 img 태그를 써야 한다. img 태그는 바로 다음에 한 줄 띄어쓰기를 해야 다음 단락 구분이 된다.

# 구분자(Splitter)

# 문법

텍스트

---
텍스트
___
텍스트
***
텍스트
1
2
3
4
5
6
7
8

# 출력

텍스트

텍스트

텍스트

텍스트

# 설명

약간의 굵기 차이가 있는 것 같긴 한데, 크게 중요치 않으므로 가장 타이핑이 편한 ---를 자주 쓸 것 같다. 주의할 점은 텍스트 바로 다음줄에 ---가 등장하면 ## 헤딩과 동일한 효과로 인식되어 버린다. ___와 *** 구분자는 헤딩처럼 한 줄 띄어쓰지 않아도 된다.

# 그룹핑

# 블럭 코드 "펜스"(Block Code "Fences")

# 문법

　```
　markdown: {
　  lineNumbers: true
　}
　```
1
2
3
4
5

# 출력

markdown: {
  lineNumbers: true
}
1
2
3

# 설명

좌측의 줄번호는 기본적으로 나오지는 않고, config.js에 위의 설정값을 넣어줘야 한다.

# 문법 강조(Syntax Highlighting)

# 문법

　``` js
　let foo = 'bar'
　console.log(foo)
　// bar
　```
1
2
3
4
5

# 출력

let foo = 'bar'
console.log(foo)
// bar
1
2
3

# 설명

문법 강조는 highlight.js (opens new window) 패키지가 쓰인 것으로 보인다. 해당 링크에 데모와 함께 지원되는 문법 목록을 확인할 수 있다.

# 줄 강조(Line Highlighting)

# 문법

　``` js {2,4}
　let foo = param => {
　  return param
　}
　console.log(foo('bar'))
　// bar
　```
1
2
3
4
5
6
7

# 출력


 

 


let foo = param => {
  return param
}
console.log(foo('bar'))
// bar
1
2
3
4
5

# 설명

매우 유용한 기능인데, 강조하고 싶은 줄을 지정할 수 있다.

# 글상자(Custom Container)

# 문법

::: tip
팁
:::

::: warning
경고
:::

::: danger
위험
:::

::: danger 위험
위험
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 출력

TIP

팁

WARNING

경고

WARNING

위험

위험

위험

# 설명

딱히 설명할 것은 없으나, VuePress 버그인지 danger의 텍스트가 warning으로 나온다. 이 외에도 오타들이 종종 보이는데 시간나는대로 오픈소스 기여를 좀 해야하려나보다.

# 코드 스니펫(Code Snippet)Beta0.10.1+

# 문법

<<< @/docs/.vuepress/public/js/add.js{3}
1

# 출력



 
const fn = (a, b) => a + b

module.exports = fn
1
2

# 설명

오직 VuePress에만 있는 기능인듯 하다. 코드를 직접 넣지 안고 링크를 걸어서 임포트 한다는 건데 보안에 문제가 없을런지... 유용한 기능인 것만은 확실하다. 당연히 외부 링크는 동작하지 않는다.

# 불릿(Bullet)

# 문법

- 첫번째
  - 두번째
    - 세번째
      - 네번째
        - 다섯번째
          - 여섯번째

* 첫번째
  + 두번째
    - 세번째
1
2
3
4
5
6
7
8
9
10

# 출력

  • 첫번째
    • 두번째
      • 세번째
        • 네번째
          • 다섯번째
            • 여섯번째
  • 첫번째
    • 두번째
      • 세번째

# 설명

단계마다 최소 2칸은 들여쓰기 해야 한다. -, *, +에 따로 구분을 두지는 않는다. 마크다운 화면에서 내가 구분하기 쉽도록 단계별로 다른 문자를 쓰는게 좋겠다.

# 리스트(List)

# 문법

1. 첫번째
   1. 일번
   2. 이번
2. 두번째
3. 세번째
1
2
3
4
5

# 출력

  1. 첫번째
    1. 일번
    2. 이번
  2. 두번째
  3. 세번째

# 설명

불릿하고 다르게 3칸을 들여쓰기 해야 인식이 된다.

# 블럭인용(BlockQuote)

# 문법

> 인용
>
> 인용
>> 인용 내의 인용
>>
>> 인용 내의 인용
>>
> 인용
>
> 인용
1
2
3
4
5
6
7
8
9
10

# 출력

인용

인용

인용 내의 인용

인용 내의 인용

인용

인용

# 설명

인용 구문 등에 쓴다. 단락 구분을 하려면 인용 문법과 함께 한 줄 띄어쓰기를 해야 한다. 중복 인용은 거의 쓰지 않을 듯 하지만 알아두자.

# 들여쓴 코드(Indented Code)

# 문법

    // Some comments
    line 1 of code
    line 2 of code
    line 3 of code
1
2
3
4

# 출력

// Some comments
line 1 of code
line 2 of code
line 3 of code

# 설명

코드 블럭과 유사하다. 4칸 들여쓰기를 해야 인식된다. 들여쓰기 자체가 문법이므로 한 줄 띄어쓰지 않아도 다음 줄로 넘어간다.

# 기타

# 테이블(Table)

# 문법

| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
1
2
3
4
5

# 출력

Tables Are Cool
col 3 is right-aligned $1600
col 2 is centered $12
zebra stripes are neat $1

# 설명

좌/우/중앙 정렬 기능도 있다.

# 이모티콘(Emoji)

# 문법

:tada: :100:
1

# 출력

🎉 💯

# 설명

전체 목록 (opens new window)

# 내용 테이블(Table Of Contents)

# 문법

[[toc]]
1

# 출력

# 설명

현재 페이지 내의 모든 헤딩을 정리해서 보여준다. 보통 페이지의 처음에 삽입하면 되겠다. 2단계에서 3단계까지 보여주는 것 같다.

# 배지(Badge)Beta0.10.1+

# 문법

<Badge text="Badge" />
<Badge text="Badge" type="tip" />
<Badge text="Badge" type="warn" vertical="top" />
<Badge text="Badge" type="error" vertical="middle" />
1
2
3
4

# 출력

Badge Badge Badge Badge

# 설명

마크다운은 아니고, VuePress의 빌트인 컴포넌트이다. 몇가지 내장 컴포넌트들이 있으므로 홈페이지를 확인해보자.

Built In Components | VuePress (opens new window)

# 결론

끝!

키워드: #VuePress
최종 수정: 2020-6-29 12:47:28

← 정적 사이트 생성기란 →