====== Marp ======
  * https://marp.app/
  * [[https://github.com/marp-team/marp|Marp Github]]
  * [[markup:markdown|MarkDown]] 기반 프리젠테이션 툴. code 작성없이 순수 markdown 으로만 가능하다.
  * [[https://gist.github.com/johnloy/27dd124ad40e210e91c70dd1c24ac8c8|List of markdown presentation tools]]

===== 예시 =====
  * [[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 이미지 예시 ====

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

===== Markdown =====
  * [[https://marpit.marp.app/markdown|Marpit Markdown]]
  * [[https://commonmark.org/|CommonMark]]
  * [[https://commonmark.org/help/|Markdown Reference]]

==== 중앙 정렬 (lead) ====
  * 첫 페이지를 중앙 정렬하고자 한다면 최상위 전역 설정으로 다음을 지정한다. 첫 페이지는 중앙 정렬, 나머지는 일반적인 페이지로 작동한다.
<code>
---
_class: lead
---
</code>
  * 특정 페이지를 ''lead''로 지정하려면 페이지에 다음을 지정한다. 이 페이지는 중앙 정렬이 된다.
<code>
---
<!-- _class: lead -->

# 페이지 헤딩
</code>
==== style override ====
  * 테마와 css 를 정할 수 있다.
<code>
---
theme: base-theme
style: |
  section {
    background-color: #ccc;
  }
---
</code>
==== 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 변환도구
<code sh>
brew install marp-cli
</code>

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

<code sh>
# 기본 8080 포트
marp --server <directory>

# 포트명시.
PORT=9999 marp --server <directory>
</code>

==== output ====
=== images ===
  * presentation 을 여러개의 이미지로 만든다. ''image'' 옵션은 단 한개의 이미지로 출력한다.

<code sh>
marp index.md --images png --output=presentation.png
</code>
  * 실제로는 ''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]]
  * [[https://blog.jetbrains.com/dotnet/2024/10/01/markdown-powered-slides-in-jetbrains-ides/|Markdown-Powered Slides in JetBrains IDEs | The .NET Tools Blog]]