마크다운과 Visual Studio Code
- Visual Studio Code는 마크다운을 지원한다. 편집 화면에서 마크다운으로 글을 쓰고 preview 화면에서 서식이 적용된 문서를 확인할 수 있다.
- Visual Studio Code는 편집 화면과 preview 화면을 커스터마이징 할 수 있다. 편집 화면과 preview 화면이 분리된 방식이라 완벽한 WYSIWYG는 아니지만, 커스터마이징으로 본인 취향에 맞는 마크다운 편집기/뷰어를 만들 수 있다. (WYSIWYG = What You See Is What You Get)
- 티스토리는 마크다운을 지원하기 때문에 마크다운으로 작성한 서식 있는 글을 티스토리로 옮길 수 있다. 티스토리 글쓰기에서 마크다운 모드로 전환 시 일부 기능을 지원하지 않는다는 메시지가 표시되는데 마크다운 기본 문법은 대부분 지원하는 듯하다.
- Visual Studio Code의 Extensions(Marketplace)에는 많은 마크다운 확장 프로그램이 있다.
마크다운 확장 프로그램(例)
- Table Formatter : 표를 보기 좋게 정렬해 줌. (D2Coding 같은 고정폭 글꼴 필수)
- Excel to Markdown table : 엑셀의 표를 복사&붙여넣기 가능
Visual Studio Code 커스터마이징
Visual Studio Code에는 15개의 테마가 있다. 밝은 계열을 좋아하면 라이트 테마, 어두운 계열을 좋아하면 다크 테마로 변경할 수 있다. 눈에 팍팍 들어오는 고대비 테마도 있다.
Extensions(Marketplace)에서 "theme"로 검색하면 더 많은 테마를 설치할 수 있으며 테마 자체도 변경할 수도 있다.
커스터마이징 순서
1. 테마 선택/설치
2. 편집 화면 커스터마이징 - settings.json 수정
3. preview 화면 커스터마이징 - CSS 파일 생성과 링크
테마 선택/설치
테마 ex)
- Visual Studio Light : 기본 테마로 조금씩 바꾸면서 사용 중인 테마.
- Atom One Dark Theme : 다크 테마
- Spectral Glow : 단색 테마
테마 적용 방법
1. F1 키 또는 단축키 Ctrl + Shift + P를 입력해 Command Palette로 진입
2. theme을 입력
3. 목록 중에 "Preferences:Color Theme"을 선택
4. 상하 이동키로 테마 선택 및 미리 보기
5. 엔터키 또는 클릭으로 테마 적용
편집 화면 커스터마이징
settings.json을 수정해 편집 화면(테마)을 커스터마이징 한다. 커스터마이징 방법은 Visual Studio Code 홈페이지 API/References 페이지에 기술돼 있다.
Visual Studio Code > API/References
https://code.visualstudio.com/api/references/theme-color
settings.json 파일 여는 방법
1. 왼쪽 하단의 톱니바퀴 아이콘을 클릭해 Settings 화면으로 이동한다. 단축키는 Ctrl + ,
2. Settings 화면의 오른쪽 상단의 왼쪽 아이콘(Open Settings(JSON)) 클릭
▼ settings.json(例)
{
"editor.tokenColorCustomizations": {
"[Atom One Dark]": { //테마 이름
"textMateRules": [
{
"scope": ["markup.quote.markdown",
"punctuation.definition.list.begin.markdown",
"punctuation.definition.quote.begin.markdown" //변경할 곳의 이름. 이름은 찾는 방법은 아래 에 기술.
],
"settings": {
"foreground": "#5C6370", //글자 색. ※ background 색 지정은 제한됨.
"fontStyle": "bold", //굵은 글자. 보통 글자는 "" 입력.
}
}
]
},
},
"markdown.preview.typographer": true,
"workbench.colorCustomizations": { //변경 항목은 위의 API/References 참조
"editor.selectionBackground": "#135564",
"editor.selectionHighlightBackground": "#135564"
},
"editor.fontFamily": "D2Coding, Consolas, 'Malgun Gothic', monospace",
"editor.fontSize": 15,
"workbench.colorTheme": "Atom One Dark",
"markdown.styles": [
"Dev\\Makrdown\\markdown_style_likenew.css" //Prevew 화면의 커스터마이징 파일. 경로 찾는 방법은 아래의 "preview 화면의 커스터마이징" 참조.
]
}변경할 곳의 이름(Scope) 찾는 방법
1. 편집 화면(마크다운 문서 작성 화면)으로 이동
2. F1 키 또는 단축키 Ctrl + Shift + P를 입력해 Command Palette로 진입
3. "inspect"를 입력해 Developer: Inspect Editor Tokens and Scopes를 선택
4. 수정하고자 하는 곳으로 커서를 옮기고 왼쪽 마우스 클릭.
5. 팝업 화면에서 textmate scopes 참조.
preview 화면의 커스터마이징
Preview 화면을 디자인한 CSS 파일을 작성하고 Visual Studio Code에게 CSS 파일의 경로를 알려준다.
CSS 파일 경로 알려주기
1. CSS 파일을 Visual Studio Code로 불러온다.
2. 화면 상단의 CSS 파일명에서 오른쪽 마우스를 클릭
3. 팝업 메뉴에서 Copy Relative Path 클릭
4. 단축키 Ctrl + , 를 입력한 후 검색란에 style을 입력
또는 Settings > Extensions > Markdown > Markdown:Styles
5. Markdown:Styles의 "Add Item" 클릭
6. Ctrl + V로 복사한 상대 경로 붙여넣기.
7. 오른쪽 상단의 아이콘 Open Preview to the Side 클릭으로 미리 보기 확인
마크다운 연습장
첨부 파일 "markdown_ex.md"는 자주 사용하는 마크다운 문법과 티스토리에서 지원하는 마크다운 문법을 Markdown Guide의 "Basic Syntax"와 "Extended Syntax"에서 발췌했다.
티스토리 글 쓰기
Visual Studio Code에서 작성한 마크다운 문서를 복사한 후 티스토리 글쓰기 화면(마크다운 모드)에 붙여넣기 하면 단락(h1~h6)(#~######)과 단락 사이에 (공백) 간격이 없는 문서로 복사된다. 단락과 단락 사이에 간격을 넣으려면 단락 위에 를 입력하면 된다. 는 티스토리로 옮겨질 때 빈 줄(<p data-ke-size="size16"> </p>)로 치환된다.
아래의 일괄 치환 방법은 h3(###)과 h4(####)만을 사용하는 조건에 해당한다.
Visual Studio Code의 편집 화면에서 단락 마다 를 입력하면 가독성이 떨어지므로 티스토리 글쓰기 화면(마크다운 모드)에 붙여넣기 전에 일괄 치환해 넣으면 가독성을 살리면서 작업의 효율성이 좋을 듯싶다.
일괄 치환 방법
1. Visual Studio Code 편집 화면에서 단축키 Ctrl + H 입력
2. ①과 ②에 치환 대상과 치환할 문자를 입력
3. ③ 정규 표현을 체크
4. ④ 모두 변환을 클릭
5. 글 전체를 복사한 후 티스토리 글쓰기 화면(마크다운 모드)에 붙여넣기
6. Visual Studio Code의 편집 화면에서 Ctrl + Z(되돌리기)를 한 후 저장