-
-
Save marocchino/3712073 to your computer and use it in GitHub Desktop.
gist slide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
!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