마크다운으로 슬라이드 만들기 Marp

Marp - Markdown Presentation Ecosystem

그동안 블로그를 작성하느라 마크 다운이 손에 익었는데, 정작 슬라이드 만들 때는 다른 도구들만 찾았습니다. 화려한 슬라이드가 아니라, 지식을 공유하려고 만드는 텍스트 위주의 슬라이드에는 이만한 툴이 없겠다 싶어 소개합니다.

기존 손에 익었던 마크다운 문법에 아래 요소를 추가하고 Marp로 문서 생성을 하는 것만으로 원하는 결과를 얻었습니다.

슬라이드를 위한 추가 문법

예시

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
size: 4K
---

# FRAN
Functional Reactive ANimation
lionhairdino@gmail.com
해도사 2024.3.11 발표용

---
<!-- _class: lead -->
- 우리가 늘상 보던 만화 영화 같은 것 보다는,
- 간단하게 원을 그리고, 수식에 따라 움직이는 걸 상상하면 된다.

---
## Reactive Programming
- Listner 목록을 가지고 있다가, 
  Event가 발생하면 목록에 있는 Listner에게 알린다. **Listner 모델**

- Listner가(혹은 제3자가) Event가 발생 했는지 계속 물어 본다. 
  샘플링 단위 시간마다 물어 본다. **Polling 모델**

![LocalImage](./image.png)

슬라이드를 위한 몇 가지 메타 정보를 헤드에 추가하고,

• ---를 써서 페이지 구분
• <!-- _class: lead -->를 써서 중앙 정렬

하는 정도만 알고 있으면, 세미나 발표용 자료로는 손색 없는 슬라이드를 만들 수 있습니다.
(물론 그림 삽입이나, 테마 변경으로 좀 더 그래피컬한 슬라이드도 만들 수 있습니다.)

편집

편집할 때는 마크다운 프리뷰를 이용하듯 아래 명령어로 슬라이드 프리뷰 워처를 띄어 놓고 작업합니다.

> marp -s . 

현재 폴더를 루트로 Marp를 실행합니다.
혹은 특정 파일을 watch하고 있다가, 수정되면 바로 html로 변환하도록 할 수도 있습니다.

> marp -w slide.md

위 명령은 slide.html 파일을 생성하며, firefox slide.html등으로 보고 있으면, 바로 반영되는 모습을 볼 수 있습니다.

Neovim 플러그인

Neovim으로 작업할 때는 간단히 marp.nvim 플러그인으로 Marp 서버를 현재 작업 디렉토리를 루트로 띄울 수 있습니다. 서버 시작, 정지만 하는 간단한 플러그인입니다.

pdf 생성

marp frp_pt.md -o frp.pdf

로컬 이미지를 썼다면,

marp frp_pt.md -o frp.pdf --allow-local-files

발표

특별히 다른 pdf뷰어를 쓰지 않고, 프리젠테이션 모드를 활용해서 markdown 파일을 발표에도 바로 쓸 수 있습니다. 경과 시간과 다음 슬라이드 자료를 보여 줍니다. markdown 파일을 수정하면 바로 반영되니, 라이브로 슬라이드를 수정하며 발표하는 것도 가능하겠습니다.