Skip to content

Instantly share code, notes, and snippets.

@marocchino

marocchino/gist-slide

Forked from xuwei-k/gist-slide
Created September 13, 2012 05:25
Show Gist options
  • Save marocchino/3712073 to your computer and use it in GitHub Desktop.
Save marocchino/3712073 to your computer and use it in GitHub Desktop.
Download ZIP
gist slide
Raw
gist-slide
!SLIDE
# 간단히 멋진 슬라이드를 만들수 있는 사이트를 만들었어!
!SLIDE
이런걸 했어↓
[Picture Show를 써보았어요.（ ＾ω＾） ](http://d.hatena.ne.jp/xuwei/20110903/1315044919)
!SLIDE
<!-- http://twitter.com/#!/xuwei_k/status/109939435134652416 --> <style type='text/css'>.bbpBox109939435134652416 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109939435134652416'><p class='bbpTweet'>github의gh-pages편리하당<a href="http://t.co/Ltx4Ylf" rel="nofollow">http://t.co/Ltx4Ylf</a> 이제 슬라이드 전부 picture show 로 만들어서 출력 결과를 github 에 두도록 해볼까?(｀・ω・´) <a href="http://t.co/J6TyZbQ" rel="nofollow">http://t.co/J6TyZbQ</a><span class='timestamp'><a title='Sat Sep 03 10:42:58 +0000 2011' href='http://twitter.com/#!/xuwei_k/status/109939435134652416'>less than a minute ago</a> via web <a href='http://twitter.com/intent/favorite?tweet_id=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109939435134652416'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
하지만 conscript도 넣어야하고, 공개할때 github에 커밋도 해야하고...
[picture-show-introduction의 github의 리포지터리](https://github.com/xuwei-k/slides/tree/gh-pages/picture-show-introduction)
!SLIDE
좀더 간단히 안될까?
!SLIDE
* Picture Show는Scala로
* markdown에서html을 만드는건 그렇게 시간 걸리는 작업은 아님.
!SLIDE
<!-- https://twitter.com/#!/xuwei_k/status/109971732554719232 --> <style type='text/css'>.bbpBox109971732554719232 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109971732554719232'><p class='bbpTweet'>picture show 를 GAE 로 움직이게 해버리면 되지않나?
이용하는 사람은, 브라우저에서 gist를 편집해서 GAE서버에서 gist의url을 지정하기만 하면, 슬라이드를 표시하게 한다던가.
그 다음은 markdown의 파일만 다운로드하면 생성된 html이 나오니까<span class='timestamp'><a title='Sat Sep 03 12:51:18 +0000 2011' href='https://twitter.com/#!/xuwei_k/status/109971732554719232'>less than a minute ago</a> via <a href="http://twitter.com/#!/download/ipad" rel="nofollow">Twitter for iPad</a> <a href='http://twitter.com/intent/favorite?tweet_id=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109971732554719232'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
혼자서 업돼있는 모양↓
<!-- https://twitter.com/#!/xuwei_k/status/109972078656106496 --> <style type='text/css'>.bbpBox109972078656106496 {background:url(http://a1.twimg.com/images/themes/theme4/bg.gif) #0099B9;padding:20px;} p.bbpTweet{background:#fff;padding:10px 12px 10px 12px;margin:0;min-height:48px;color:#000;font-size:18px !important;line-height:22px;-moz-border-radius:5px;-webkit-border-radius:5px} p.bbpTweet span.metadata{display:block;width:100%;clear:both;margin-top:8px;padding-top:12px;height:40px;border-top:1px solid #fff;border-top:1px solid #e6e6e6} p.bbpTweet span.metadata span.author{line-height:19px} p.bbpTweet span.metadata span.author img{float:left;margin:0 7px 0 0px;width:38px;height:38px} p.bbpTweet a:hover{text-decoration:underline}p.bbpTweet span.timestamp{font-size:12px;display:block}</style> <div class='bbpBox109972078656106496'><p class='bbpTweet'>*･゜ﾟ･*:.｡..｡.:*･'(*ﾟ▽ﾟ*)'･*:.｡. .｡.:*･゜ﾟ･*<span class='timestamp'><a title='Sat Sep 03 12:52:41 +0000 2011' href='https://twitter.com/#!/xuwei_k/status/109972078656106496'>less than a minute ago</a> via <a href="http://twitter.com/#!/download/ipad" rel="nofollow">Twitter for iPad</a> <a href='http://twitter.com/intent/favorite?tweet_id=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/favorite.png' /> Favorite</a> <a href='http://twitter.com/intent/retweet?tweet_id=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/retweet.png' /> Retweet</a> <a href='http://twitter.com/intent/tweet?in_reply_to=109972078656106496'><img src='http://si0.twimg.com/images/dev/cms/intents/icons/reply.png' /> Reply</a></span><span class='metadata'><span class='author'><a href='http://twitter.com/xuwei_k'><img src='http://a2.twimg.com/profile_images/1279071923/xuwei_normal.gif' /></a><strong><a href='http://twitter.com/xuwei_k'>Kenji Yoshida</a></strong><br/>xuwei_k</span></span></p></div> <!-- end of tweet -->
!SLIDE
즉시 구현해봄(｀・ω・´)
!SLIDE
그 결과가 이 슬라이드다!
[https://gist.github.com/3712073](https://gist.github.com/gists/3712073)
!SLIDE
1 gist를 만듬
!SLIDE
2 밑의 url로 접근
```
http://gist-slide.appspot.com/ "gist의id" / "그 gist안쪽의 파일명"
```
!SLIDE
그것뿐!
＼(^o^)／
!SLIDE
신택스 하일라이트도 된다능!
```scala
class Hoge{
def hello = "hello"
}
```
!SLIDE
소스는 공개해두었습니다. 기본적으로
[Picture Show](https://github.com/softprops/picture-show)
의 필요한 부분만 사용했기 때문에 거의 아무것도 하지 않았습니다.
gist의 API를 부르는 정도만 했나?
[https://github.com/xuwei-k/gist-slide](https://github.com/xuwei-k/gist-slide)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment