mattak's blog

人生を1ミリ進める

reveal.jsをつかう

サーバーたてる

macのlocalhostでsymlinkがきかない。。 そもそもapachの設定ファイルはどこだったのか？

/etc/apache2/users/myname.conf

Optionsはシンボリックリンクたどるようになっている。。なぜだ。。

...

Dropboxのフォルダーの権限が700だったorz

$ chmod 755 ~/Dropbox

reveal.jsをうごかす

https://github.com/hakimel/reveal.js/blob/master/plugin/markdown/example.html を参考につくる。。

$ mkdir css
$ cd css
$ curl -O https://raw.github.com/hakimel/reveal.js/master/css/reveal.min.css
$ curl -O https://raw.github.com/hakimel/reveal.js/master/css/theme/default.css
$ cd -
$ mkdir js
$ cd js
$ curl -O http://code.jquery.com/jquery-2.0.1.min.js
$ curl -O https://raw.github.com/hakimel/reveal.js/master/lib/js/head.min.js
$ curl -O https://raw.github.com/hakimel/reveal.js/master/js/reveal.js
$ curl -O https://raw.github.com/hakimel/reveal.js/master/plugin/markdown/marked.js
$ curl -O https://raw.github.com/hakimel/reveal.js/master/plugin/markdown/markdown.js

html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">

    <title>title</title>

    <link rel="stylesheet" href="./css/reveal.min.css">
    <link rel="stylesheet" href="./css/default.css">
    <script src="./js/jquery-2.0.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function(){
            var now = new Date();
            var time = now.getTime();
            $("section.refresh_slide").attr("data-markdown", "index.md?t="+time);
            Reveal.initialize({
                controls: true,
                progress: true,
                history: true,
                center: true,

                theme: Reveal.getQueryHash().theme,
                transition: Reveal.getQueryHash().transition || 'default',

                dependencies: [
                    { src: 'js/marked.js', condition: function() { return document.querySelector('[data-markdown]'); } },
                    { src: 'js/markdown.js', condition: function() { return document.querySelector('[data-markdown]'); } },
                ]
            });
        });
    </script>
</head>

<body>
    <div class="reveal">
        <div class="slides">
            <section class="refresh_slide" data-markdown="index.md" data-separator="^\n---\n$">
            </section>
        </div>
    </div>

    <script src="./js/head.min.js"></script>
    <script src="./js/reveal.js"></script>
</body>
</html>

index.md

# section1

hello world!!

---

# section2

+ item1
+ item2

---

# section3

...

ローカルのfile:///で表示すると

f:id:mattaclj:20130525075527p:plain

みたいにlocalのindex.mdを表示できない。。

テキストリソースって、htmlでローカルでもアクセスできるんだろうか。。 なんかハックすればできそうな気がする。。。

今回はめんどうなので、DropboxのPublicにいれておいた。