VS Code with Markdown

By | July 12, 2016

markdown을 쓰려는데 맥은 유료 구매해서 사용하는데 윈도우는 마땅한것이 없다…

그러던중 code가 지원한다고 들었다…해보자.

참고 https://code.visualstudio.com/docs/languages/markdown
https://code.visualstudio.com 다운받는다.

Code를 실행한다.

New file > save
Aaa.md 로 저장한다.

markdown_1
마크 다운으로 인식한다.

Ctrl+Shift+V 를 누르면 마크다운 preview 가 나온다.
Ctrl+K V를 누르면 side by side로 나온다.
(crtl+K 하고 컨트롤을 때고 v를 눌러야한다.)

맥에서는 Cmd + K V 이란다.

익스텐션을 편의상 설치한다 안해도 된다.

Auto-Open Markdown Preview
⇒ 자동으로 side by side스타일로 된다.

Ctrl + Shift+ P 를 누른후 install이라고 입력한다.

markdown_2

선택후 엔터

markdown_3
다음이 나온다..이제 위에 인스텐션을 설치하자.

파일을 닫고 md파일을 다시 ㅇ려어보자.
프리뷰가 바로 보이는것을 알수가 있다.

Markdownlint

문서 작성시 문서 포맷에 일관성을 줄 수 있다.

코드의 마크다운은 GitHub를 지원.
깃헙 스타일로 미리보기 화면을 바꿔보도록 하자.

https://github.com/mahonnaise/vs-code-markdown-theme

다운로드 후 압축 해제
Theme.css 와 vs-code.css
두개의 파일을 사용한다.
복사하자

C:\Program Files (x86)\Microsoft VS Code\resources\

이제 다음을 하자.

File -> Preferences -> User Settings

markdown_4

다음을 추가하자.

“markdown.styles”: [
“file:///C:/Program%20Files%20(x86)/Microsoft%20VS%20Code/resources/theme.css”,
“file:///C:/Program%20Files%20(x86)/Microsoft%20VS%20Code/resources/vs-code.css”,
“file:///C:/Program%20Files%20(x86)/Microsoft%20VS%20Code/resources/app/out/vs/languages/markdown/common/tokens.css”
]

markdown_5

,”editor.wrappingColumn”:0도 추가하자.

markdown_6
확인해보자.

markdown_7

나는 기본 default모드를 쓰다보니 거의 볼수가 없다.

컬러 테마를 바꿔보자.

Menu >> file >> preference >> color theme >> light로 설정해보자.

markdown_8
잘 나온다…

음 코드는 white로 써야하나??설명서에 나온데로 안되잇다…이상함.

스타일을 커스텀 할수 가 있을듯 싶은데 ..

검색후 득템

https://github.com/aliencube/markdownpad-github

다운받아서 css만 복사를 한후
설정을 바꿔준다.

확인해보자…각자 취향에 맞게 사용하자.

참고

Visual Studio Code 에서 깃헙 스타일 마크다운 사용하기


난 개인적으로 디폴트가 제일 낫다…

github는 dark theme하고 안맞는듯.