차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- presentation:marp [2019/07/17 00:25]
kwon37xi
+++ presentation:marp [2024/04/15 16:26] (현재)
kwon37xi
@@ 줄 1: / 줄 1: @@
 ====== Marp ======
-  * https://github.com/marp-team/marp
   * https://marp.app/
-  * [[markup:markdown|MarkDown]] 기반 프리젠테이션 툴
+  * [[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 이미지 예시 ====
+<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]]

권남

사용자 도구

사이트 도구

차이

문서 도구