Colorful Moment/IT News

[Marp] Markdown으로 프레젠테이션 만들기 / Marp for VS Code

뒹굴거리는프로도 2023. 2. 16. 12:41
반응형

 


코드를 이용해서 프레젠테이션 화면을 만들 수 있는 툴을 발견했습니다. Marp라고 하는 건데요.

visual studio code 프로그램의 Market place를 통해 Marp 확장자를 설치해서 바로 사용할 수 있습니다.
화면을 바로 보시지요.

[영상-1, vs 코드에서 Marp 실행 방법]
[그림-1, 왼쪽 markdown으로 생성된 오른쪽 프레젠테이션 화면]

 

Marp 확장자를 설치한 후 빈 파일을 생성하고, 그 안에 아래의 코드를 넣어주면 즉시 발표 화면이 생성됩니다.

---
marp: true
---

# Your slide deck

Start writing!

 

Marp는 프레젠테이션 theme, 몇 번째 페이지인지 표시해 주는 기능 등도 제공한답니다.

[영상-2, markdown으로 프레젠테이션 작성]

 

아래는 marp 사이트에서 제공하는 markdown example인데요,
직접 복사 붙여넣기 하고 실행해 보셔도 좋을  듯합니다.

---
theme: gaia
_class: lead
paginate: true
backgroundColor: #fff
backgroundImage: url('https://marp.app/assets/hero-background.svg')
---

![bg left:40% 80%](https://marp.app/assets/marp.svg)

# **Marp**

Markdown Presentation Ecosystem

https://marp.app/

---

# How to write slides

Split pages by horizontal ruler (`---`). It's very simple! :satisfied:

```markdown
# Slide 1

foobar

---

# Slide 2

foobar
```

 

 

그리고 이렇게 만든 발표 자료는

 

vs 코드 우측 상단의 삼각형 2개 겹친 모양 버튼을 누른 뒤,
나오는 입력창에 "Export slide deck..."를 입력하여

  • HTML
  • PDF
  • PPTX (PowerPoint document)
  • PNG (First slide only)
  • JPEG (First slide only)

형식으로 내보낼 수 있다고해요.

[영상-3, 발표자료 export]

 

저는 html로 발표 자료를 생성할 수 있다는 것이 정말 좋은 것 같아요.

 


참고 사이트

https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode 

 

Marp for VS Code - Visual Studio Marketplace

Extension for Visual Studio Code - Create slide deck written in Marp Markdown on VS Code

marketplace.visualstudio.com

 

반응형