marp for VS Code 커스텀 테마 적용

VS Code > marp extension > 사용자 정의 스타일을 적용하기 위한 방법을 설명합니다.

---

관련사이트 링크

marp for VS Code

• Visual Studio Marketplace
• github

---

설정 및 샘플

settings.json

{
    "markdown.marp.themes": [
        "./theme/custom.a4.css",
    ],
    "markdown.marp.enableHtml": true
}

위 설정은 VS Code UI 를 통해서도 할 수 있습니다.

• Extensions > Installed > Marp for VS Code > 설정아이콘(⚙)
  

./theme/custom.a4.css

/* @theme a4 */
@import 'default';
u {
    text-decoration: none;
    border-bottom: 1px solid #CCC;
}
h1, h2, h3, h4, h5, h6 {
    color: #24292f;
}
code {
    color: #922;
    background-color: #EEE;
}
section {
    width: 210mm;
    height: 297mm;
    font-size: 23px;
}
section.title {
    text-align: center;
}
section.title h6 {
    text-align: right;
    line-height: 1.0;
    margin-top: 10px;
    margin-bottom: 10px;
}

• css 파일 상단 주석란에 테마 이름을 반드시 지정해줘야 합니다.
• 지정된 테마 이름은 md 파일에서 그대로 사용됩니다.

sample.md

---
marp: true
theme: a4
paginate: true
---

<!-- _class: title -->

# 제목

###### 작성자
###### 작성일자

---

# 내용

- 내용내용