うれしい

markdownでかける
webで見れる
githubで管理できる
MathJaxでlatexの数式が使える
- markdownとMathJaxの組み合わせで起こりがちの_などのエスケープ問題を回避できる。

使うもの

Remark.js
- github
- jsをurlで読み込めるので、ネットにつながる環境ならすごく便利。
git, github
MathJax

サンプル

Presentation

導入手順

ローカルに適当にディレクトリ(slidesとする)を作る。
slidesディレクトリにindex.htmlを作り、同じディレクトリにcontents.mdを配置する。
index.htmlをブラウザで開けばOKスライドが見れる。 index.html

<DOCTYPE html>
<html>
<head><title>Presentation</title></head>
<body>
  <script src="https://remarkjs.com/downloads/remark-latest.min.js" type="text/javascript"></script>
  <script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML&delayStartupUntil=configured" type="text/javascript"></script>
</script>
  <script type="text/javascript">
    var slideshow = remark.create({
      sourceUrl: "contents.md"
    });

    // Setup MathJax
    MathJax.Hub.Config({
      tex2jax: {
        skipTags: ['script', 'noscript', 'style', 'textarea', 'pre']
      }
    });
    MathJax.Hub.Queue(function() {
      $(MathJax.Hub.getAllJax()).map(function(index, elem) {
        return(elem.SourceElement());
      }).parent().addClass('has-jax');
    });
    MathJax.Hub.Configured();
  </script>
</body>
</html>

contents.md

# slide 1 
- 1ページ目
---

# slide 2
- 2ページ目

$$
x = a_{1} + b^{2}
$$
## フーリエ変換
$$
  F(u) = \int\_{-\infty}^{\infty} f(x)\mathrm{e}^{-j2\pi ux}dx
$$

## 2次元のフーリエ変換
$$
  F(u,v) = \int\_{-\infty}^{\infty} \int\_{-\infty}^{\infty} f(x,y)\mathrm{e}^{-j2\pi (ux + vy )}dxdy
$$

ここまでで、ローカルでスライドが見れる環境ができる。次は、github pagesを作って、github上でスライドが見れるようにする。

　4. slides上でgitレポジトリを作り、全部コミット。

git init
git add .
git commit -m 'Initial commit.'

　5. githubにレポジトリを作り、slidesのレポジトリをpushする。

git remote add https://github.com/username/repository_namae/
git push origin master

　6. gh-pagesを使う為、gh-pagesブランチを作って、githubにpushする。

git checkout -b gh-pages
git push origin gh-pages

　7. https://username.github.io/repository_nameにアクセスするとレポジトリトップのindex.htmlのファイルが表示される。

uploadしたデータが反映されるまで10分ほどかかるみたいなので気長にまつ。
usernameはgithubのユーザ名
reposiotry_nameはレポジトリの名前

キー操作

j 次のスライド
k 前のスライド
c スライドのclone
- スライドを clone すると、元のスライドでページ移動した際、clone 先のスライドも同期して移動する。
f フルスクリーン
p プレゼンモード
h ヘルプの表示

補足

contents.mdでは、普通にmarkdown中にmathjaxを書けばOK。具体的には、$$で数式を囲む。
mathjaxのURLにdelayStartupUntil=configuredオプションを含めると、markdownで問題になる_のエスケープなどが不要になるので便利。

個人的には、スライドごとにレポジトリを作る気分にあんまりならないので、下記のように1つのレポジトリをまとめている。特に工夫はないが、レポジトリのトップのcontents.mdはレポジトリ内のスライドへのリンクテーブルになっている個人的に便利。

サンプル

githubにレポジトリを作る。
レポジトリのトップに、index.htmlとcontetns.mdを置く。contents.mdはサブディレクトリへのリンク。

# link
* [directory_name](http://user_name.github.io/repository_name/directory_name/)
  * sample

　3. レポジトリにスライドごとにディレクトリを作り、各ディレクトリにindex.htmlとcontents.mdを作る。

参考

markdown + remark.js + gh-pages でプレゼン資料を公開する