Sublime Text 3 の参考書（実践編）Wiki

to achieve your goal ! 〜目的別の設定を解説〜

ユーザ用ツール

サイト用ツール

現在位置: Sublime Text3とは » 目的別 Sublime Textの設定 » マークダウンエディタとして使う方法

コンテンツメニュー

コンテンツメニュー

Sublime Text とは

how-to:markdown

マークダウンエディタとして使う方法

Sublime Text3 をマークダウンエディタとして快適に使用する方法を記載します。

目次

はじめに

Sublime Text の導入をご参照いただき、

を完了しておきましょう。

こんなことができます

  • マークダウン記法をシンタックスハイライト表示できる
  • シンタックスハイライト表示指定で記載したコードをハイライト
  • 半角スペースを可視化することで改行したことがわかる
  • リアルタイムにプレビューで確認しながら編集できる

:img:markdown-previewer-demo.gif

  • 面倒くさい表の作成もTabキーで簡単に作成できる

:img:table-editor-demo.gif

Sublime Text を Markdown Editor として使用するための設定

プラグイン（Plugin）

導入するプラグインは以下のとおりです。

  • Monokai Extended（マークダウンのシンタックスハイライト表示）
  • Markdown Extended（挿入したコードのシンタックスハイライト表示）
  • Trailing Space（半角スペースの可視化）
  • OmniMarkup Previewer（リアルタイムプレビュー）
  • Table Editor（表作成の簡易化）

マークダウン記法をシンタックスハイライト表示しよう

:img:markdown-extend-demo.gif
マークダウン記法をシンタックスハイライト表示できるようにします。 使用するプラグインはMonokai Extendedです。

Monokai Extended のインストール

  1. コマンドパレットを開きます。ショートカットは（mac :cmd+shift+p, win/linux : ctrl+shift+p)です。
  2. package installというように入力し、PackageControl: Install Packageを呼び出します。
  3. Monokai Extendedと入力し、Monokai Extendedをインストールします。

カラースキーム（Color Scheme） を Monokai Extended に設定

カラースキーム（Color Scheme）を Monokai Extended に設定します。

  • Preferences→Color Scheme→Monokai Extendedから以下のどれかに設定する。
    • Monokai Extended Bright
    • Monokai Extended Light
    • Monokai Extended

もし上記の設定でシンタックスハイライト表示されない場合は、開いているファイルに対してシンタックスの設定をマークダウンにしてください。

シンタックスの設定

  1. コマンドパレットを開きます。
  2. syntax markdownというように入力し、Set syntax: Markdownを選択します。

以上で設定は完了です。
見やすくなりました。

シンタックスハイライト表示指定で記載したコードをハイライトしよう

:img:markdown-extended-demo.gif
シンタックスハイライト表示指定（例：```javascript code ```）で記載したコードをハイライト表示できるようにします。 使用するプラグインはMarkdown Extendedです。

Markdown Extended のインストール

  1. コマンドパレットを開きます。ショートカットは（mac :cmd+shift+p, win/linux : ctrl+shift+p)です。
  2. package installというように入力し、PackageControl: Install Packageを呼び出します。
  3. Markdown Extendedと入力し、Markdown Extendedをインストールします。

シンタックスを Markdown Extended に設定

ファイルのシンタックス設定を Markdown Extended に設定します。

  1. コマンドパレットを開きます。
  2. syntax markdown extというように入力し、Set Syntax: Markdown Extendedを選択します。

以上で挿入したコードがシンタックスハイライトされるようになります。

半角スペースやタブを可視化して改行がわかるようにしよう

:img:trailing-space-demo.gif

マークダウンは半角スペース２個で改行となるため、半角スペースに色をつけることができればわかりやすいです。

それを実現してくれるプラグインがTrailing Spaceです。

Trailing Space のインストール

  1. コマンドパレットを開きます。ショートカットは（mac :cmd+shift+p, win/linux : ctrl+shift+p)です。
  2. package installというように入力し、PackageControl: Install Packageを呼び出します。
  3. Trailing Spaceと入力し、Trailing Spaceをインストールします。

以上で行末の半角スペースとタブに色がつくようになったと思います。

Trailing Space が有効にならない場合

上記のようにTrailing Spaceをインストールしても、行末の半角スペースやタブに色がつかない場合、Trailing Space を再インストールすると良いかもしれません。

  1. コマンドパレットを開きます。
  2. package removeというように入力し、PackageControl: Remove Packageを選択します。
  3. trailingspacesというように入力し、TrailingSpacesを選択します。
  4. コマンドパレットを開きます。
  5. browse packagesと入力し、Preferences: Browse Packagesを選択します。
  6. Sublime Text 3 の Packages フォルダが開きますので、Packages/User/trailing_spaces.sublime-settingsを削除します。
  7. コマンドパレットを開きます。
  8. package installというように入力し、PackageControl: Install Packageを呼び出します。
  9. Trailing Spaceと入力し、Trailing Spaceをインストールします。

ちなみに、「Packages/User/trailing_spaces.sublime-settingsを削除」の手順なしで、Trailing Spaceを再インストールしたら、うまくTrailing Spaceが有効になりませんでした。
ご参考になれば幸いです。

ファイル保存時に行末のスペースやタブが削除されないようにしよう

人によっては、Preferences.sublime-settingsに
“trim_trailing_white_space_on_save”: trueを追記し、
保存時に行末の不要なスペースやタブを一括削除できるように設定していると思います。

しかし、マークダウン記法で半角スペース２個を使って意図的に改行した時に、このスペースが保存時に自動削除されると困ります。

そこで、Markdownの場合のみこの機能を無効に設定します。

Markdown Extended.sublime-settings に設定する

- Preferences → Settings - More → Syntax Specific - Userを選択します。 - 開いたファイル（例えば、シンタックスがMarkdown ExtendedならMarkdown Extended.sublime-settings）に“trim_trailing_white_space_on_save”: falseを追記します。

以上で設定は完了です。

保存時に、文末の半角スペースとタブが削除されないようになりました。

リアルタイムにプレビューが見れるようにしよう

編集しながらマークダウンで出力されるページを確認できるように設定します。
使用するプラグインはOmniMarkup Previewerです。

OmniMarkup Previewer を使用する理由は、保存しなくてもリアルタイムにプレビュー画面に反映されるからです。

OmniMarkup Previewer のインストール

  1. コマンドパレットを開きます。ショートカットは（mac :cmd+shift+p, win/linux : ctrl+shift+p)です。
  2. package installというように入力し、PackageControl: Install Packageを呼び出します。
  3. OmniMarkup Previewerと入力し、OmniMarkup Previewerをインストールします。

設定はこれだけです！

マークダウンテキストの作成

さっそく試してみましょう。

  • まず、.md拡張子のファイルを作ります。
  • マークダウン記法で文章を記載し保存します。

OmniMarkup Previewer の起動

では、起動してみましょう。
起動方法は以下のいずれかです。

  • ショートカットキーを入力
    1. （mac : cmd+alt+o, Win/Linux : ctrl+alt+o）を入力
  • コマンドパレットから呼び出し
    1. コマンドパレットを起動（mac :cmd+shift+p, win/linux : ctrl+shift+p)
    2. omni browserというように入力し、OmniMarkupPreviewer: Preview Current Markup in Browserを選択

次は、OmniMarkupPreviewerを起動したままテキストを修正してみましょう。

修正したファイルを保存しなくても、リアルタイムに修正結果をOmniMarkupPreviewerで確認することができます！

テーブル（表）を簡単に作成できるようにしよう

マークダウン記法でテーブルを作成するのはなかなか面倒です。

そこで、テーブル作成を補助してくれるプラグイン Table Editor を導入しましょう。

Table Editor のインストール

  1. コマンドパレットを開きます。ショートカットは（mac :cmd+shift+p, win/linux : ctrl+shift+p)です。
  2. package installというように入力し、PackageControl: Install Packageを呼び出します。
  3. Table Editorと入力し、Table Editorをインストールします。

Table Editor の設定

Table Editor を有効にする
  1. コマンドパレットを開きます。
  2. table editor enableというように入力し、以下のいずれかを選択します。
    • Table Editor: Enable for current syntax（今開いているファイルのシンタックスに対してTable Editorを有効に設定）
    • Table Editor: Enable for current view（今開いているファイルにのみTable Editorを有効に設定）
Table Editor のシンタックスを指定する

set table sytax

  1. コマンドパレットを開きます。
  2. set table sytaxというように入力し、マークダウン記法に合わせてを選択します。
    • Simple
    • EmacsOrgMode
    • Pandoc(Grid Tables, Pipe Tables)
    • Multi Markdown(support colspan in alpha status)
    • reStructuredText
    • Textile(support colspan and rowspan in alpha status)

設定は以上です。

Table Editor の使い方

表の作成

以下のように入力します。 

|||
|-

カーソルを|-の後ろに置き、Tabキーを入力します。 

|   |   |
|---|---|
|   |   |

このように展開されます。

セルの移動

セルの移動は以下です。

  • Tabキー
  • alt + 矢印キー
CSV からテーブルを作成

以下の様なCSVデータの場合、 

,col1,col2,col3
row1,value1,value2,value3
row2,値1,値2,値3
row3,"文字列
文字列","文字列
文字列","文字列
文字列"

CSVデータを選択状態で、ctrl + k → |を押すと、 

|      | col1         | col2         | col3         |
| row1 | value1       | value2       | value3       |
| row2 | 値1          | 値2          | 値3          |
| row3 | 文字列文字列 | 文字列文字列 | 文字列文字列 |

と変換されます。

詳しい使い方は

その他の詳しい使い方は以下をご参照ください。 https://github.com/vkocubinsky/SublimeTableEditor

おわりに

以上がSublime Textをマークダウンで使用するための設定です。

参考

以下のサイトを参考にさせていただきました。

ありがとうございます。

how-to/markdown.txt · 最終更新: 2015/02/16 16:17 (外部編集)

ページ用ツール

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki
Copyright(c) Sublime Text 3 の参考書（実践編） 2015 All Rights Reserved.