129
123

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-04-19

スクリーンショット 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で__MarkdownExtended__と__MonokaiExtended__をインストールします。
  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に対応したら誰か教えてください!!!

参考

129
123
4

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
129
123

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?