사용자 도구

사이트 도구


presentation:marp

Marp

예시

background 지정

background 이미지 예시

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

Markdown

중앙 정렬 (lead)

  • 첫 페이지를 중앙 정렬하고자 한다면 최상위 전역 설정으로 다음을 지정한다. 첫 페이지는 중앙 정렬, 나머지는 일반적인 페이지로 작동한다.
---
_class: lead
---
  • 특정 페이지를 lead로 지정하려면 페이지에 다음을 지정한다. 이 페이지는 중앙 정렬이 된다.
---
<!-- _class: 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

  • 실질적인 Marp markdown → HTML/PDF/PPT 변환도구
brew install marp-cli

--server

  • 특정 디렉토리의 md 파일들을 대상으로 프리젠테이션을 서빙하는 서버를 띄운다.
  • 변경사항이 자동 반영된다.
  • index.md 파일을 자동으로 기본 파일로 인식한다.
# 기본 8080 포트
marp --server <directory>
 
# 포트명시.
PORT=9999 marp --server <directory>

output

images

  • presentation 을 여러개의 이미지로 만든다. image 옵션은 단 한개의 이미지로 출력한다.
marp index.md --images png --output=presentation.png
  • 실제로는 presentation.001.png, … 형태로 파일이 생성된다.

vscode

image

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

github pages

참조

presentation/marp.txt · 마지막으로 수정됨: 2024/04/15 16:26 저자 kwon37xi