스터디나 모임에서 간단하게 발표할 일이 있으면 보통 마크다운으로 정리한 문서를 보면서 진행을 했는데 아무래도 PT형식이 가독성에 도움이 될 것 같아 찾아보던 중 마크다운 포맷으로 PT를 만드는 툴을 발견했다.

Remark

깃허브 링크 : https://github.com/gnab/remark
샘플 : https://remarkjs.com/#1

쉬운 이해를 위해 간단한 예제 코드를 보자.

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

    # 슬라이드 제목1  
    첫번째 슬라이드입니다.  
    ---
    # 슬라이드 제목2
    두번째 슬라이드입니다.

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

첫 예제 치고는 긴 편이지만 우선 이부분만 주목하면 된다.

<textarea id="source">

  # Slide 1  
  첫번째 슬라이드입니다.  
  This is first slide.
  ---
  # Slide 2
  두번째 슬라이드입니다.
  This is second slide.

</textarea>

<textarea id="source"> 태그 안에 Remark 형식에 맞는 마크다운을 작성하고 html을 실행해 보면 다음과 같은 PT를 간단하게 얻을 수 있다.


당연히 마크다운의 헤더, 목록, 코드블럭 등을 사용할 수 있고 약간의 CSS만 사용하면 레이아웃도 나눌 수 있다.(Remark에서 공식적으로 지원하는 방법이 있는지는 아직 확인하지 못했다. 레이아웃을 나누는 방법은 다른 글에서 설명한다.)

기본적인 사용법

그럼 다시 간단한 사용법을 알아보자

1. 슬라이드 나누기

슬라이드는 --- 을 기준으로 나누어 진다. <hr />이 아님에 유의하자.

# Slide 1
첫번째 슬라이드

---

# Slide 2
두번째 슬라이드

2. 정렬

class 프로퍼티를 사용해 해당 슬라이드의 정렬 방법을 지정할 수 있다. 기본적으로 제공하는 클래스는 left, center, right, top, middle, bottom 이 있다.

class: center

# Aligned Slide
이 슬라이드는 수평으로 중앙 정렬됩니다.

---
class: center, middle

# Aligned Slide
이 슬라이드는 수직, 수평으로 중앙 정렬됩니다.

3. 작성중...