Marp

• https://marp.app/
• Marp Github
• MarkDown 기반 프리젠테이션 툴. code 작성없이 순수 markdown 으로만 가능하다.

• yhatt/marp-cli-example: The good starter for using Marp via Marp CLI, by the author of Marp

• 최상위 directive 에서 background image 지정시
• backgroundImage : background-image CSS 스타일 지정
• backgroundPosition : background-position CSS 스타일 지정
• backgroundSize : background-size CSS 스타일 지정

backgroundImage: url('https://path/to/image.png')
backgroundSize: 15%
# 오른쪽 하단에 두되 살짝씩 마진을 둔다.
backgroundPosition: bottom 10px right 10px

• Marpit Markdown
• CommonMark
• Markdown Reference

• 첫 페이지를 중앙 정렬하고자 한다면 최상위 전역 설정으로 다음을 지정한다. 첫 페이지는 중앙 정렬, 나머지는 일반적인 페이지로 작동한다.

---
_class: lead
---

• 특정 페이지를 lead로 지정하려면 페이지에 다음을 지정한다. 이 페이지는 중앙 정렬이 된다.

---
<!-- _class: lead -->

# 페이지 헤딩

• 테마와 css 를 정할 수 있다.

---
theme: base-theme
style: |
  section {
    background-color: #ccc;
  }
---

• bullet 리스트 : -, + 로 시작하면 리스트를 한 번에 보여주고 *로 시작하면 리스트를 한개 한개씩 차례로 보여준다.
• 숫자 리스트 : 1., 2. .. 형태는 숫자 리스트를 한 번에 보여주고 1) 2) … 형태는 한개 한개씩 차례로 보여준다.

• HTML 주석(<!– … –>) 안에 일반적으로 내용을 적으면 해당 페이지에 대한 노트로 작동한다. 본인만 볼 수 있고 청중에게는 안보이는 노트.

• Markdown 내에 HTML을 활성화 할 수 있다. 하지만 이것은 보안 이슈가 발생할 수 있으므로 주의한다.
• VSCode : Settings → Marp for VSCode → Enable HTML 활성화. trusted directory에서만 활성화됨.
• Marp CLI : --html 옵션 지정

• Marp CLI
• 실질적인 Marp markdown → HTML/PDF/PPT 변환도구

brew install marp-cli

• 특정 디렉토리의 md 파일들을 대상으로 프리젠테이션을 서빙하는 서버를 띄운다.
• 변경사항이 자동 반영된다.
• index.md 파일을 자동으로 기본 파일로 인식한다.

# 기본 8080 포트
marp --server <directory>
 
# 포트명시.
PORT=9999 marp --server <directory>

• presentation 을 여러개의 이미지로 만든다. image 옵션은 단 한개의 이미지로 출력한다.

marp index.md --images png --output=presentation.png

• 실제로는 presentation.001.png, … 형태로 파일이 생성된다.

• Marp for VS Code Visual Studio Code / VSCode 프리뷰 보면서 작성 가능.

• chromium 으로 변환할 때 --allow-local-files 옵션을 줘야만 로컬 파일 이미지를 정확히 변환 가능하다.

• marp-to-pages
• marp-cli-example
• marp github pages example

• MARP - Make Presentations with Markdown in VSCode | Can it replace PowerPoint? | Better Data Science - YouTube