====== Marp ======
* https://marp.app/
* [[https://github.com/marp-team/marp|Marp Github]]
* [[markup:markdown|MarkDown]] 기반 프리젠테이션 툴. code 작성없이 순수 markdown 으로만 가능하다.
===== 예시 =====
* [[https://github.com/yhatt/marp-cli-example|yhatt/marp-cli-example: The good starter for using Marp via Marp CLI, by the author of Marp]]
===== background 지정 =====
* 최상위 directive 에서 background image 지정시
* ''backgroundImage'' : [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-image|background-image]] CSS 스타일 지정
* ''backgroundPosition'' : [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-position|background-position]] CSS 스타일 지정
* ''backgroundSize'' : [[https://developer.mozilla.org/en-US/docs/Web/CSS/background-size|background-size]] CSS 스타일 지정
==== background 이미지 예시 ====
backgroundImage: url('https://path/to/image.png')
backgroundSize: 15%
# 오른쪽 하단에 두되 살짝씩 마진을 둔다.
backgroundPosition: bottom 10px right 10px
===== Markdown =====
* [[https://marpit.marp.app/markdown|Marpit Markdown]]
* [[https://commonmark.org/|CommonMark]]
* [[https://commonmark.org/help/|Markdown Reference]]
==== 중앙 정렬 (lead) ====
* 첫 페이지를 중앙 정렬하고자 한다면 최상위 전역 설정으로 다음을 지정한다. 첫 페이지는 중앙 정렬, 나머지는 일반적인 페이지로 작동한다.
---
_class: lead
---
* 특정 페이지를 ''lead''로 지정하려면 페이지에 다음을 지정한다. 이 페이지는 중앙 정렬이 된다.
---
# 페이지 헤딩
==== style override ====
* 테마와 css 를 정할 수 있다.
---
theme: base-theme
style: |
section {
background-color: #ccc;
}
---
==== Fragmented List ====
* bullet 리스트 : ''-'', ''+'' 로 시작하면 리스트를 한 번에 보여주고 ''*''로 시작하면 리스트를 한개 한개씩 차례로 보여준다.
* 숫자 리스트 : ''1., 2. ..'' 형태는 숫자 리스트를 한 번에 보여주고 ''1) 2) ...'' 형태는 한개 한개씩 차례로 보여준다.
==== 노트 ====
* HTML 주석('''') 안에 일반적으로 내용을 적으면 해당 페이지에 대한 노트로 작동한다. 본인만 볼 수 있고 청중에게는 안보이는 노트.
==== HTML ====
* Markdown 내에 HTML을 활성화 할 수 있다. 하지만 이것은 보안 이슈가 발생할 수 있으므로 주의한다.
* VSCode : **Settings -> Marp for VSCode -> Enable HTML** 활성화. ''trusted directory''에서만 활성화됨.
* Marp CLI : ''%%--html%%'' 옵션 지정
===== marp-cli =====
* [[https://github.com/marp-team/marp-cli|Marp CLI]]
* 실질적인 Marp markdown -> HTML/PDF/PPT 변환도구
brew install marp-cli
==== --server ====
* 특정 디렉토리의 ''md'' 파일들을 대상으로 프리젠테이션을 서빙하는 서버를 띄운다.
* 변경사항이 자동 반영된다.
* ''index.md'' 파일을 자동으로 기본 파일로 인식한다.
# 기본 8080 포트
marp --server
# 포트명시.
PORT=9999 marp --server
==== output ====
=== images ===
* presentation 을 여러개의 이미지로 만든다. ''image'' 옵션은 단 한개의 이미지로 출력한다.
marp index.md --images png --output=presentation.png
* 실제로는 ''presentation.001.png'', ... 형태로 파일이 생성된다.
===== vscode =====
* [[https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode|Marp for VS Code]] [[:visual_studio_code|Visual Studio Code / VSCode]] 프리뷰 보면서 작성 가능.
===== image =====
* chromium 으로 변환할 때 ''%%--%%allow-local-files'' 옵션을 줘야만 로컬 파일 이미지를 정확히 변환 가능하다.
===== github pages =====
* [[https://github.com/ralexander-phi/marp-to-pages/|marp-to-pages]]
* [[https://yhatt.github.io/marp-cli-example/|marp-cli-example]]
* [[https://github.com/yhatt/marp-cli-example/blob/master/.github/workflows/github-pages.yml|marp github pages example]]
===== 참조 =====
* [[https://www.youtube.com/watch?v=OmKtuBXNjac|MARP - Make Presentations with Markdown in VSCode | Can it replace PowerPoint? | Better Data Science - YouTube]]