Visual studio code 를 markdown 에디터로 사용해 보자

visual studio code

비주얼 스튜디오 코드는 마이크로소프트에서 개발한 chrome 기반의 코드 에디터이다. 

가볍고, 플러그인 개발이 쉬운 장점이 있으며 마이크로소프트의 지원을 받고 있다는 장점이 있다.

링크

Visual Studio Code

마크다운 문서를 편집할 때 결과물이 어떻게 보일 것인지 확인하면서 작성하면 편한데, 비주얼 스튜디오 코드 1.9 버전에서 Sync Markdown Preview 기능을 지원하게 됨으로써 특별히 플러그인을 깔지 않아도 마크다운 문서가 변경될 때 마다 Preview 를 동기화하여 실시간으로 보여주는 기능이 추가되었다. 한번 사용해 보자.

화면 오른쪽 상단에 Open Preview 버튼을 누른다. 

그러면 Preview 가 열린다. 

이제 Preview 가 열린 탭을 VS code 창의 오른쪽 끝 쪽까지 드래그 하면 화면을 분할하여 사용할 수 있게 된다. 

짠

Copy Markdown as HTML : HTML 로 변환하기

작성한 마크다운 문서를 HTML 로 변환해야 할 필요가 있을 때가 있다. 가령, 티스토리 블로그에 마크다운으로 문서를 작성하고 싶을 때, 티스토리는 마크다운 문법으로 게시글을 쓰는것은 지원하지 않지만 HTML 편집을 지원 하므로 그러한 기능은 매우 유용할 것이다.

다음과 같이 플러그인을 설치한다.

위 플러그인을 설치하고 VS code 를 껏다 켠다. 

그리고 F1 을 눌러 바로가기 검색창을 열고 mark 나 copy 를 치게 되면 위와 같이 Markdown : Copy as HTML 항목이 보일 것이다. 

이것을 선택하게 되면 클립보드에 html 코드가 저장되게 되는데, 붙여넣고 싶은 곳에 가서 Ctrl + V 를 눌러주게 되면 ... 

위와 같이 Markdown 이 HTML 로 변환된 코드가 붙여넣어짐을 확인할 수 있다. 

Markdown 이란? (.md 확장자)

markdown 이란?

마크다운은 html 의 사촌 뻘 되는 언어로써, 일종의 문서 편집 도구라 할 수 있다. 마크다운 문법으로 작성된 파일은 md 확장자를 가진다. (.md) 

마크다운의 간단한 문법을 이용하면 Plain text 를 보기 좋게 꾸며줄 수 있다. 일반적으로 위키 편집, README 파일 등에서 사용된다.  백문이 불여일견이니, 예시를 보자.

 # markdown
 ---
from wikipidea, the free encyclopedia


 Markdown is a 
 [lightweight markup language](https://en.wikipedia.org/wiki/Lightweight_markup_language) with 
plain text formatting syntax  designed so that it can be converted to 
[HTML](https://en.wikipedia.org/wiki/HTML) and many other formats using a tool 
 by the same name. Markdown is often used to 
format [readme files](https://en.wikipedia.org/wiki/README), for writing 
 messages in online discussion forums, and to 
create [rich text](https://en.wikipedia.org/wiki/Formatted_text) using a 
 [plain text](https://en.wikipedia.org/wiki/Plain_text) 
[editor](https://en.wikipedia.org/wiki/Text_editor).

[markdown 으로 작성된 문서]

[markdownd 에 의해 생성된 문서]

위의 첫 번째 코드가 아래의 문서로 변환된 것을 볼 수 있다. 보기에는 복잡해 보이나, 알고 보면 매우 간단한 문법이다.  

   이러한 마크다운 언어 등을 이용한 편집 환경과 반대되는 개념으로는 마이크로소프트의 Word, 아래아 한글로 대표되는 위지윅 이 있으니 참고하시길.

왜 마크다운을 사용하는가?

마크다운 언어를 이용하여 얻을 수 있는 가장 큰 장점은 바로 문서를 작성할 때 마우스에 손이 가지 않아 작업 능률이 현저히 빨라진다는 것이다.

 시간 내어 익혀 놓으면 문서 작업 효율을 매우 향상 시킬 수 있다. 아래에서 공부하기에 좋은 자료를 소개하겠다.

사실 마크다운 문법에도 자잘한 차이가 있는 여러 파생종이 있지만 하나를 골라 배워 놓으면 나머지도 적응하기 쉽다. 배워서 남 주나?

참고하면 좋은 문서

Github 마크다운 Syntax

티스토리에 마크다운 적용하기

Visual studio code 를 markdown 에디터로 사용해 보자!

참고문헌 영문 위키