logictktの落書き帳

記事の内容が古くなっている事があります。記事作成日にご注意ください。

SublimeText 3でMarkdownな文章をSlideshowする

目標

Pandocとreveal.jsを使い、Markdown書式で書かれているファイルをスライドショーさせる。 ついでにEvernoteにバックアップさせる。

使うもの

sublime text

Pandoc

reveal.js

Evernote

準備

Pandocを入れる

brew install pandoc

reveal.jsを落としてくる

githubから最新のリリースを落としてくる。 保存場所はどこでもいい。

僕は~/.pandoc/reveal.jsになるように保存してます。

SublimeTextにPandoc入れる

Package Control で pandoc で出てきます。

sublimeの設定

// Preferences → PackageSettings → Pandoc → Setting - User
{
  "default": {
    "pandoc-path": null,
    "transformations": {
      "revealjs": {
        "scope": {
          "text.html": "html",
          "text.html.markdown": "markdown_github",
        },
        "pandoc-arguments": [
          "-t", "revealjs", "-s", "--slide-level=1", "--self-contained", "-V", "revealjs-url:/Users/ユーザー名/.pandoc/reveal.js", "-o", "/Users/ユーザー名/Desktop/output.html"
        ]
      },
      "revealjs-2": {
        "scope": {
          "text.html": "html",
          "text.html.markdown": "markdown_github",
        },
        "pandoc-arguments": [
          "-t", "revealjs", "-s", "--slide-level=2", "--self-contained", "-V", "revealjs-url:/Users/ユーザー名/.pandoc/reveal.js", "-o", "/Users/ユーザー名/Desktop/output.html"
        ]
      }
    },
    "pandoc-format-file": ["docx", "epub", "pdf", "odt", "beamer"]
  }
}

デスクトップにoutput.htmlで出力されるようにしてます。

ファイル作成

適当にMarkdown書式で書く。
書き方によってスライドショーの構成が変わるが、いまいち仕様がわからない。。。

書き出す

sublimeでコマンドパレットで「pandoc」
選択候補はどちらでもいいです。
slide-levelを変えていますが、詳しくは上記のサイト見てください。
(よくわかってません)

ブラウザで見る

htmlファイルなので、ブラウザで見れます。

ショートカット

  • esc : 一覧
  • 矢印 : 移動
  • Enter : 一覧時に詳細表示
  • . : フェードアウト

などなど、他にもあります。

PDF

スライドをサイトにアップする時用にPDFで保存できます。

  • URLに?print-pdfをつける。
  • 印刷からPDFで保存

Evernoteに保存

SublimeTextにEvernote入れる

Package Control で everonte で出てきます。

初期設定

Command Palette > Evernote: Reconfigure
Evernoteが開くので DeveloperToken を作って設定してください。
Sublimeの下の方にしれっと入力欄がいます。

保存

Command Palette > Evernote: Send to Evernote
Sublimeの下の方にしれっと入力欄がいるので、タイトルなどを設定して保存します。

キーバインド

勝手に設定されないらしいんで、自分で設定してください。


おまけ

SublimeのおすすめMarkdown用Package

Evernoteの設定

{
  "code_friendly": true,
  "code_highlighting_style": "github",
  "enable_table_editor": true,
  "inline_css": {
        "pre": "color: #000000; font-family: monospace,monospace; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #cccccc; border-radius: 3px; overflow: auto; padding: 6px 10px; margin: 20px 0;",
        "code": "color: black; font-family: monospace,monospace; font-size: 0.9em; margin: 20px 0;",
        "inline-code": "color: #000000; font-family: monospace,monospace; padding: 0.1em 0.2em; margin: 0.1em; font-size: 85%; background-color: #F5F5F5; border-radius: 3px; border: 1px solid #cccccc;",
        "h1": "margin-bottom: 1em; margin-top: 1.2em;",
        "h2": "margin-bottom: 1em; margin-top: 1.2em;",
        "h3": "margin-bottom: 1em; margin-top: 1.2em;",
        "h4": "margin-bottom: 1em; margin-top: 1.2em;",
        "h5": "margin-bottom: 1em; margin-top: 1.2em;",
        "footnotes": "border-top: 1px solid #9AB39B; font-size: 80%;",
        "hr": "color: #ccc; height: 5px; background-color: #ccc; margin: 60px 10px; border: none;",
        "sup": "color:#6D6D6D;font-size:1ex",
        "blockquote": "border-left: .5ex solid #BFBFBF; margin-left: 0px; padding-left: 1em; margin-top: 1.4285em; margin-bottom: 1.4285em;",
  },
  "notes_order": "updated",
  "sort_notebooks": true,
  "md_syntax": "Markdown Extended.tmLanguage"
}

// evernote
{ "keys": ["ctrl+n", "ctrl+s"], "command": "send_to_evernote" },
{ "keys": ["ctrl+n", "ctrl+o"], "command": "open_evernote_note" },
{ "keys": ["ctrl+n", "ctrl+u"], "command": "save_evernote_note" },

あとがき

普段からメモをSublimeTextでMarkdownで書いて保存していたんですが、電車内などでPCが開けない時にメモを見たい時があり、SublimeEvernoteに保存する方法を調べました。

開発時に書いたコードの書き方や、ポエム的なメモをそのままスライドにしたら社内LT出来るんじゃないか。
と思いMarkdownからスライドを作る方法を調べました。

QiitaやGitpatchなどなど様々なネットサービスがありますが、メモをネットに上げる気にもなれず、、、
このような手順に落ち着きました。

Pandoc、reveal.js共に仕様がわかっておらず中途半端な記事ですが、ココまで来るのにネットに情報が少なかったので、このレベルで記事を上げることにしました。

終わり