読者です 読者をやめる 読者になる 読者になる

数式が使える最強のプレゼンテーション環境

Git

うれしい

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

使うもの

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

サンプル

導入手順

  1. ローカルに適当にディレクトリ(slidesとする)を作る。
  2. slidesディレクトリにindex.htmlを作り、同じディレクトリにcontents.mdを配置する。
  3. index.htmlをブラウザで開けばOKスライドが見れる。 index.html
<DOCTYPE html>
<html>
<head><title>Presentation</title></head>
<body>
  <script src="http://gnab.github.io/remark/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 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分ほどかかるみたいなので気長にまつ。
  • usernamegithubのユーザ名
  • reposiotry_nameレポジトリの名前

キー操作

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

補足

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

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

サンプル

  1. githubレポジトリを作る。
  2. レポジトリのトップに、index.htmlcontetns.mdを置く。contents.mdはサブディレクトリへのリンク。
# link
* [directory_name](http://user_name.github.io/repository_name/directory_name/)
  * sample

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

参考

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