차이

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

--- presentation:marp [2022/07/08 19:25]
kwon37xi
+++ presentation:marp [2025/07/24 15:02] (현재)
kwon37xi [Themes 테마]
@@ 줄 2: / 줄 2: @@
   * https://marp.app/
   * [[https://github.com/marp-team/marp|Marp Github]]
+  * [[https://github.com/marp-team/awesome-marp|marp-team/awesome-marp: A curated list of awesome things related to Marp]]
   * [[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 =====
@@ 줄 12: / 줄 30: @@
   * [[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]]
@@ 줄 33: / 줄 86: @@
 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]] 프리뷰 보면서 작성 가능.
@@ 줄 39: / 줄 103: @@
   * 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]]
+===== Themes 테마 =====
+  * https://rnd195.github.io/marp-community-themes/
+  * [[https://yoanbernabeu.github.io/MARP-Template-Library/docs/intro|How to use Themes | MARP Template Library]]
 ===== 참조 =====
   * [[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]]

권남

사용자 도구

사이트 도구

차이

문서 도구