Sublime Text 3 – markmon でマークダウン

やりたいこと

  • markmon を使って Sublime Text3 でマークダウン
  • マークダウンのリアルタイムプレビュー
  • マークダウンのシンタックスハイライト
  • マークダウンのプレビュー表示を自分好みに
  • マークダウンから HTML へ変換(予定)
  • マークダウンから PDF へ変換(予定)
  • マークダウンから ワードファイル(.docx) へ変換(予定)

環境

  • Mac OSX Yosemite
  • Sublime Text3

準備

  • node.js のインストール
  • pandoc のインストール
  • (npm の)markmon のインストール
  • (Sublime Text3 のパッケージの)markmon のインストール

4つのインストールが必要だけどスムーズに行けば 1分もかからない。

markmon は npm の markmon と Sublime Text3 のパッケージの markmon と名前が同じなのでややこしい。

(1) node .js のインストール

参考:Node.jp 日本ユーザーグループ

(2) pandoc(パーサー) のインストール

参考:Pandoc ユーザーズガイド 日本語版

(3) npm markmon のインストール

(4) Sublime Text3 – markmon のインストール

  1. Cmp + Shift + P でパッケージコントロール開く
  2. Package Control : Install Package を選択(リターン)
  3. Markmon を検索 & 選択(リターン)でインストール

使い方

  • マークダウンで記述したファイルの拡張子を .md で保存
  • Cmd + Ctrl + m でブラウザが起動してプレビュー表示

シンタックスハイライト

パッケージをインストールするだけなので簡単。

  • Markdown Extended のインストール
  1. Cmd + Shift + p でパッケージコントロール開く
  2. Package Control : Install package を選択(リターン)
  3. Markdown Extended を検索 & 選択(リターン)でインストール
  4. SublimeText3 の再起動
  5. 右下のファイル種別から Markdown Extended を選択する

参考:npm – markmon

プレビューの表示を自分好みに

  • markmon の CSS を修正する

markmon のインストールされている場所は、npm -g(グローバル)でインストールした場合の node_modules の場所が分かれば良いので、

で調べる。node_modules の中の markmon があればビンゴ。 私の場合(Mac)では、以下のディレクトリに CSS があった。

その中の style.scss をお好みで修正。
.content のフォントサイズや pre タグなんかをいじると良いかも。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">