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
Title
``` .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 ``` --- # 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)]