Help us understand the problem. What is going on with this article?

SublimeText3+MarkdownでPDF文書やスライドを作る

More than 5 years have passed since last update.

スクリーンショット 2014-04-19 15.23.10.png

SublimeTextはとっても便利で見た目も最高です。
簡単に書けるMarkdownで学校のレポートやスライドが作れたらもっと嬉しいですね。
バージョンを2から3に上げたのでMarkdownを書く環境も整えてみました。

インストールしたものと出来ること

  • MarkdownExtended: シンタックスハイライトで見た目を良い感じにします
  • MonokaiExtended: MarkdownExtendedと合わせて見た目を良い感じに
  • MarkdownPreview: ブラウザでプレビューします
  • Pandoc: MarkdownやTexやWordを相互に変換してくれるヤバイ級ツールのpandocとsublimetextを連携させてpdfを作ります
  • Evernote: MarkdownをHTML出力したものをEvernoteに保存します

シンタックスハイライト

  1. まずPackage ControllでMarkdownExtendedMonokaiExtendedをインストールします。
  2. .mdファイルを開いてメニューバーのView->Syntax->MarkdownExtendedを選択します。そうすると新しく開いた全ての.mdファイルにこのシンタックスハイライトが適用されます。
  3. 次にメニューバーのSublimeText->Preferences->Color Scheme->Monokai Extended->Monokai Extended Brightを選択しましょう。 無印のMonokai Extendedでもハイライトは有効になりますが背景色がデフォルトと違うものになってしまいます。

プレビュー

完成図
スクリーンショット 2014-04-19 15.37.27.png

  1. Package ControllでMarkdownPreviewをインストールしましょう。
  2. UserのKey Bindingsに下のキーバインドを登録するとAlt+mでブラウザからプレビューできるようになります。 キーバインドはお好みで。
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser"} }

ちなみに私は下のキーバインドを登録してShift+Enterで空白2つと改行を挿入する小技を使えるようにしています。
行末に空白2つを挿入するのが絶妙に面倒くさいのでこうしておくと少しだけ嬉しくなりますね。

{ "keys": ["shift+enter"], "command": "insert_snippet", "args": {"contents": "  \n"}}

PDF文章

完成図
完成図
ブラウザでプレビューしたのものをPDFとして保存するのも良いのですが、紙に印刷して人に見せるとなると図や文章がページをまたいでぶつ切りになってしまうのはちょっと嫌ですね。
というわけでMarkdownをTexに変換してPDF化出来るようにしましょう。
(TeX環境が入っていることは前提とします)

pandocというドキュメント変換ツールを使うのでまずはそれをインストールしましょう。
pandocはここからダウンロードできます。
このソフトウェアはHaskellで開発されているのでcabalを使ってインストールする方法もあります。
しかしcabalは基本的に厄介の種でしか無いので熟練のHaskellプログラマ以外は手を出してはいけません。(嘘)
普通にビルドされたものをインストールしたほうが簡単です。

pandocで日本語のテキストを変換する場合いつくか問題が発生しますがそれは以下のサイトが参考になります。
PandocでMarkdownからPDFへ変換
ラシウラ

それではSublimeTextの方をいじっていきましょう。
1. Package Controllから Pandoc をインストールします。名前が被っていてややこしいですがこれはSublimeTextのプラグインのPandocです。
2. それがインストールできたら次に設定ファイルを編集します。メニューバーのSublime Text->Preferences->Package Settings->PandocのDefaultとUserの両方のファイルを開いて、
Userファイルの方にDefaultの内容をコピペして下さい。
3. "pandoc-path": null"pandoc-path": "/usr/local/bin/pandoc"に変更し、"PDF": ~~の内容を以下のように変更して下さい。
私はデフォルトのスタイルが気に入らないので自作のヘッダファイルを追加しています。

"PDF": {
    "scope": {
      "text.html": "html",
      "text.html.markdown": "markdown"
    },
    "pandoc-arguments": [
      "-t", "pdf",
      "--latex-engine=/usr/texbin/xelatex",
      "-H", "/Users/Cubic/.pandoc_header.tex" // ヘッダファイル(無くてもいい)
      // ヘッダファイルを無くすときは-Hオプションの方も消すようにして下さい
    ]
},

マークダウンファイルを開いてCtrl+Shift+pでPandocを実行してフォーマットを選択すればPDFファイルが出来上がります。

Evernote

完成図
完成図
書いたものは Evernote にバックアップしておきましょう。

  1. Package ControlからEvernoteをインストールすれば終わりの簡単な作業です。
  2. Ctrl+Shift+pでコマンドパレットを開いてsendevernoteとでも検索して実行するとMarkdownがHTMLに変換された後Evernoteに保存されます。
  3. 初回のみEvernoteの公式ページに飛ばされます。
  4. 承認->Get Tokenで出てきたTokenをSublimeTextのステータスバーの上に出てくるエリアに貼り付けましょう。
  5. ノートのタイトルなどを設定して終了です。

スライド

これを紹介しようと思ったのですがSublimeText3には対応していませんでした!
すみません!うちの猫の画像あげるので許してください!!!
IMG_1700.jpg

まとめ

SublimeTextでMarkdownを書くと色々出来てすごい(小並感)
あとsublimetext-markdown-slideshowがSublimeText3に対応したら誰か教えてください!!!

参考

karszawa
Super Ultra Hyper Miracle Romantic Web Engineer
https://karszawa.dev
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away