Remark: Web Presentation Tool

class: center, middle, inverse

# Remarkjs

### 김태완, [taewanme@gmail.com](http://taewan.kim)
### Mar, 20, 2016
???
- 2016년 3월 20일 스터디 발표 자료

---
template: default
.task[Remark: Web Presentation Tool]
# Remark 소개
----
### Remark 란?
- 브라우저에서 실행되는 간편한 Markdown 기반 슬라이드쇼 툴
- 표준 웹 기반 기술: HTML, CSS
- 오픈소스 프로제트: https://github.com/gnab/remark

### Features
- Markdown 포멧에 기반한 확장성
- Presenter 모드 지원
- 다수의 언어에 대한 Syntax Highlighting 기능 제공
- 스마트 폰 및 ipad에 대한 터치 스크린 지원

.author[Taewan Kim/taewanme@gmail.com]
.source[[http://taewan.kim/blog/2016/03/22/remarkjs/](http://taewan.kim/blog/2016/03/22/remarkjs/)]
---

# Remark 시작하기
----
Remark는 HTML에 3 부분에 대한 설정이 완료됩니다.

- CSS 설정
- markdown 기술을 위한 textarea (id=source)
- 자바스크립트 파일 설정과 자바스크립트 객체 생성

.author[Taewan Kim/taewanme@gmail.com]
.source[feedback:[http://taewan.kim/blog/2016/03/22/remarkjs/](http://taewan.kim/blog/2016/03/22/remarkjs/)]
---
# Remark 설정: 1/3
----
다음과 같이 css를 설정합니다.

```html
<!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;
      }
    </style>
  </head>
  <body>
```
.author[Taewan Kim/taewanme@gmail.com]
.source[feedback:[http://taewan.kim/blog/2016/03/22/remarkjs/](http://taewan.kim/blog/2016/03/22/remarkjs/)]
---
# Remark 설정: 2/3
id가 "source"인 textarea에 markdown을 입력합니다.

![](/images/remarkjs/markdown.png)
.image-50[![](/images/remarkjs/markdown.png)]

.author[Taewan Kim/taewanme@gmail.com]
.source[feedback:[http://taewan.kim/blog/2016/03/22/remarkjs/](http://taewan.kim/blog/2016/03/22/remarkjs/)]

---
# Remark 설정: 3/3
----
markdown을 설정하는 textarea 엘리먼트 아래에 remark를 위한 자바스크립트 위치를 설정하고 자바스크립트 블록에서 remark 객체를 생성합니다.

```html
    <script src="https://gnab.github.io/remark/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>
```
---
# Table

| Tables   |      Are      |  Cool |
|----------|:-------------:|------:|
| col 1 is |  left-aligned | $1600 |
| col 2 is |    centered   |   $12 |
| col 3 is | right-aligned |    $1 |

## demo

First Header  | Second Header
------------- | -------------
Content Cell  | Content Cell
Content Cell  | Content Cell

http://jsfiddle.net/3gPGU/

.author[Taewan Kim/taewanme@gmail.com]
.source[feedback:[http://taewan.kim/blog/2016/03/22/remarkjs/](http://taewan.kim/blog/2016/03/22/remarkjs/)]

---
# event
--

- merong

- 웃기죠?

.image-50[![](/images/remarkjs/markdown.png)]