Markdown専用エディタTypora使いこなしのポイント

Typoraはブログ記事作成がスピードアップすると人気のMarkdown記法専用に作られたテキストエディタです。

今回の記事は使いこなしのポイントになりそうなところをピックアップして解説します。

Typoraの概要については前回の記事をご覧ください。

関連記事

Markdown専用エディタTyporaがかなりよい

WordPressの記事作成がスピードアップすると最近markdown記法が人気です。Markdownは基本的にどんなテキストエディタでも書くことができますが、Markdown対応エディタを使うとHT ...

続きを見る

Typora特集インデックス

 

入力はほぼMarkdownそのまま

Typoraへの入力は、ほぼMarkdown記法そのままです。

「ほぼ」というのは、表や数式の作成、コード入力などで独自のコマンドを利用できるからなのですが、Markdown記法どおりに入力すれば、ちゃんと表示してくれます。

なので、すでにMarkdown記法を知っている人にとっては、特に使い方を覚える必要はありません。

HTMLを入力したときの動作

ちなみにHTMLのソースコードを入力すると、ふつうにWebブラウザで見たときと同じようにレンダリングされます。

たとえば次のように入力すると・・・

次に改行キーを押した時点でレンダリングされて次のようになります。

つまり、TyporaはオーソドックスなHTMLと、それを簡略化したMarkdown記法のどちらでも入力可能ということです。

パースとプレビュー

Markdown記法で入力したテキストはその場でHTMLにパース（変換）されます。

そしてさらにHTMLとしてレンダリング（表示）されます。

HTMLを入力した場合は、パースがいらないのでそのままレンダリングです。

パース～レンダリングは瞬時にその場で行われます。

操作の手順的にいうと、Markdown記法で入力を開始すると、そのままカーソル位置にMarkdown記法のテキストが現れます。そして改行キーを押した瞬間にHTMLに変換・表示されます。

入力した画面にそのまま表示されるので、プレビュー画面への切り替えや再読込みなどはまったく必要ありません。

編集画面とプレビュー画面が同じなので、他のMarkdown対応エディタのように編集エリアとプレビューエリアを見比べるための視線移動がなく、編集作業に集中できるのがTyporaの利点です。

ただしすぐに変換されてしまうので、いちど入力が終わったものを編集するときは独自の作法が必要になります。

編集時の注意

このようにTyporaでの入力はMarkdown記法そのままなのですが、いちどHTMLにパースされててしまうとその後はタグによって扱い方が異なります。

簡単に分類すると次のふたつになります。

• Markdownに戻って編集できるもの

• 独自のコマンドで編集するもの

Markdownそのままに編集できるタグもありますが、Typora独自のコマンドで編集ものもかなりあります。

Markdown対応エディタとの違い

Markdown記法では、#や-、*などのありふれた記号を使って文書構造を記述します。

そこで特にMarkdown対応でない普通のテキストエディタでも、Markdown記法に基づいたテキストを書くことができます。Markdown対応か対応でないかは、Markdownを解釈してプレビュー表示できるかどうかの違いだけで、テキスト編集画面のほうは基本的に同じです。

それに対しTyporaでは画面に入力したテキストがいきなり変換されてしまうので、元々Markdown機能で入力したテキストは基本的に編集できなくなります。

ただし一部のコマンドについては、一時的に元のテキストに戻してから編集できるようになっています。

ここが他のエディタでのMarkdown編集とは異なる部分なので、しっかり押えておいてください。

ここでは特に使用頻度が高いタグの編集方法について解説します。

見出しの編集

Markdown記法では、#記号を1～6個並べてH1～H6の見出しを表現します。

いちど入力したらパースされてしまうので、その後#記号の数を編集することはできません。

その代わりに[段落]メニューあるいはキーボードショートカットを使って、見出しの階層を直接変更するよういになっています。

 

リンク

ハイパーテキストリンクは次のように記述します。

[Google](https://www.google.co.jp/)

すると次のように表示されます。

Google

これを編集するときは、"Google"の文字の上をマウスポインタでクリックすると、パースされていたテキストが一時的に元のMarkdown記法に戻ります。

このため、実際には編集の必要がない場合でも、URLが正しいかどうかちょっと確認するといった使い方もできます。

編集が終わってほかのところをクリックすると、またパースされた状態に戻ります。

強調

文字列の一部を強調する場合はアスタリスク(*)を使います。

*強調*のようにアスタリスク1個で前後を囲むとHTMLのen要素になり、**強調**のように前後を2個で囲むとHTMLの**strong**要素になります。

これらを編集するときも、ハイパーテキスト同様に該当する文字列上をマウスポインタでクリックすれば、一時的にパースが解除されて、Markdown表記が現れるのでそのまま編集できます。

リスト

HTMLのul要素にあたる番号なしリストを作るには、行の先頭にハイフン(-)、アスタリスク(*)、プラス(+)のどれかを入力してからさらに半角スペースを空けて文字を入力します。

リストの入力例

 - アイテム1
 - アイテム2
 - アイテム3
   - サブアイテム3-1
   - サブアイテム3-2
 - アイテム4

レンダリング結果

• アイテム1

• アイテム2

• アイテム3

  • サブアイテム3-1

  • サブアイテム3-2

• アイテム4

リストの編集

こうして作成したリストに対して、項目を追加するときは途中で改行、削除するときは【Delte】や【BackSpace】でいいんですが、リストの階層（ネスト）を変更しようとしても、強調やハイパーテキストリンクのように一時的にMarkdownに戻ることがないので、もはやハイフンやアスタリスクの修正ができません。

その場合は【Ctrl】キーとブラケットキーを使います。

【Ctrl】+【]】 階層を一段下げる（インデント）

【Ctrl】+【[】 階層を一段上げる（インデント解除）

番号付きリストの場合

番号付きリスト(Ordered List)でも操作は同様です。

ただし、階層が変わることでナンバリングは自動的に調整されます。

番号付きリストのサンプル

1. アイテムA

2. アイテムB

3. アイテムC

4. アイテムD

上の番号付きリストで3.をインデントすると次のようになります。

番号付きリストの修正例

1. アイテムA

2. アイテムB

   1. アイテムC

3. アイテムD

引用

引用は行頭に>記号を入れます。

むかしむかしあるところに

おじいさんとおばあさんがすんでいました

おじいさんがいいました

しぇけなべいべー

おばあさんがこたえました

なにゆうてんの

この>記号を連続入力すれば多重引用になります。

引用部分の編集は簡単で、引用記号のところで>記号を入力すれば多重引用がさらに深くなり、【BackSpace】キーを押せば多重引用のレベルが一段解除されます。

また行末で【Enter】キーを押せば空の行が追加されます。

直感的にわかりやすいので問題はないでしょう。

水平線

コンテンツの区切りなどに使う水平線（hr要素)は、ハイフンを3つ以上連続で入力します。

---

これで下のように水平線が引かれます。

水平線の削除も簡単で、マウスでクリックして反転状態になったところで【Delete】キーを押すか、挿入ポインタ（入力カーソル）が次の行頭にあるときなら【BackSpace】キーでまるごと削除できます。

ちなみにハイフンの数を変更することはできません（まったくムダですし）。

ソースコード

プログラミング言語やHTMLなどのソースコートを記述する方法はふたつあります。

1行だけのコード

1行だけの短いコードの場合、バッククォート(`)で前後を括ります。

｀string｀

ここでは説明のためにバッククォートを全角文字にしていますが、実際には半角を使用します。

このような1行だけのコードはインライン要素になるので、文の途中にstringのように挿入することもできます。

編集は簡単で、コード上をクリックすると一時的にパースが解除されてMarkdown状態に戻ります。

複数行にわたるブロックコード

数行にわたる長いコードの場合、行頭に4個以上の半角スペースを入力すると自動的にブロックが作られます。

HTMLによるコードの例

<div class="topics">
    <h2>コーナー見出し</h2>
    <h3 class="headline">記事見出し</h3>
    <p class="headcopy">コピー</p>
    <p class="body">本文</p>
</div>

コード内の編集

コード内の編集は、ふつうのテキスト編集と同じでまったく問題ありません。

ブロックコードの解除

コードのブロックをやめてふつうのテキストに戻すこともできます。

この場合、コードのブロック内をクリックするか、矢印キーを使って挿入ポインタをコードブロック内にいどうしておいてから、[段落]メニューで[コードブロックを解除]を実行します。

するとコードが解除されるのですが、HTMLの場合その瞬間にレンダリングされてしまうので、もともとキー入力したコードそのものにはなりません。ここは要注意点です。

ちなみにHTMLとしてレンダリングされたブロックをクリックすると、一時的にレンダリングが解除されるのでHTMLソースを編集することができます。

また、コードブロックの作成開始をMarkdownの記号（半角スペース4つ）ではなく、メニューコマンドからもできます。[段落]メニューで[コードブロック]を選択してください。

ちなみに、最初のほうで紹介したHTMLを直接入力してレンダリングした場合でも、この例と同じようにレンダリングされた結果をクリックすると一時的にHTMLに戻ってコードを編集できます。

ソースコードモードでの編集

実はTyporaには、入力とプレビューが一体化した通常モードのほかに、Markdownで書いたテキストそのものを編集・表示するモードがあります。

このモードではMarkdownで使用する#や*などの記号がそのまま編集できるので、ここまで説明してきたタグごとの操作の違いを気にする必要はありません。

Markdownに慣れたユーザーであればこちらのモードの方が使いやすいかもしれません。

モードの切り替えは[表示]メニューの[ソースコードモード]で行います。

【Ctrl】キー+【/】キーでの切り替えもできます。

作成した記事を公開する

Typoraで作成した記事はコピー＆ペーストでWordPressやその他のブログサービスに貼り付けて公開できます。

私の場合、WordPressのクラシックエディタでビジュアルモードの画面に直接貼り付けて、問題なく利用できています。

WordPressへのコピー＆ペースト

1. Typora上の記事を【Ctrl】+【A】ですべて選択

2. 【Ctrl】+【C】で記事をクリップボードにコピー

3. WordPressの記事投稿画面でビジュアルエディタを開く

4. 【Ctrl】+【V】で記事をペースト

あとはWordPressの投稿画面で[公開]をクリックすればOKです。

WordPRess以外へのコピー＆ペースト

WordPress以外のブログサービスへのペーストは試していませんが、上の手順でダメだった場合も次の手順ならうまく行く可能性がありますので試してみてください。

1. Typora上の記事を【Ctrl】+【A】ですべて選択

2. [編集]-[HTMLとしてコピー]を実行

3. ブログの記事投稿画面でテキスト編集モードにする

4. 【Ctrl】+【V】で記事をペースト

Markdown用プラグインは不要

このようにコピー＆ペーストで記事を公開できるのは、Typoraで作成した記事がその場でHTML化されるからです（実は不正確かつ不明確なのですがそれは後ほど）。

たとえMarkdown対応でも、テキストエディタで書いた記事そのまま貼り付けただけではきちんと表示されません。それにはまずWordPress側にMarkdown用のプラグインがインストールされている必要があるからです。

でもTyporaで作った記事なら、Markdown用プラグインなしでもちゃんと表示できます。

処理速度の関係でWordPressにあまりたくさんプラグインをいれたくない人にはいいかもしれません。

コピー＆ペーストの謎

ところでこの件にはひとつ重大な謎があります。

実はTyporaで書いた記事がなぜWordPressにHTMLとしてコピー＆ペーストされるのか、実は私もよくわかっていないのです。

ここまで書いてきて本当に申し訳ないんですが、どうしてそうなるのかわかりません。

少し詳しく説明します。

すでに書いたとおり、WordPress上で書いた記事を普通にコピーして、WordPress（クラシックエディタのビジュアルモード）にペーストすると、ちゃんとHTML化したものが貼り付けられます。

ところが、同じそのデータをWordPressのクラシックエディタのテキストモードに貼り付けると、なんとMarkdown記法で書いたそのままなんです。

ほかのテキストエディタに貼り付けても同じなので、当然クリップボードにコピーした記事の中身はMarkdownで書かれていることになります。

なのに、なぜかWordPress（のクラシックエディタのビジュアルモード）に貼り付けるときだけHTMLになってしまうのか意味がわかりません。

なんらかのエラーなのでしょうか？　不思議な現象ですがともかく助かっていることだけは確かです。

WordPressとの連携で注意すべきこと

謎の現象ではありますが、とりあえず動くのだからありがたく使わせていただくとして、ここから先はTyporaとWordPressとの連携や、WordPress上でさらに編集するとき注意すべきことを紹介します。

表示スタイルの再現はテーマしだい

TyporaはWordPressとは直接関係はない独立したソフトなので、WordPressの表示そのままをTyporaで見ながらの編集はできません（これは他のMarkdown対応エディタでも同じです）。

もし表示を完全に同じにしたかったら、WordPressで使っているテーマから書式設定部分を抜き出してきて、それを元にTypora用のテーマ（要はスタイルシート）を作る必要があります。

その点、WordPressにMarkdown対応エディタを組み込んでしまえば、最終的に公開したときの仕上がりとまったく同じ表示で記事作成ができます。

表示を同じにするのが難しいというところは、Typoraの弱点といっていいかもしれません。

ただし、私個人としてMarkdown記法に求めるのは、見出しや本文（段落）、リストなどの構造が書きやすくなることであって、レイアウトや装飾については重視していません。

Typora用にわざわざカスタムテーマを作ることはないでしょうが、もしやるとしたらWordPressのテーマについてもレイアウトをカスタマイズして、その上でTyporaと統一するところまで徹底したいと思います。

Markdownでは編集できない

WordPressにペーストした記事は（なぜか）HTML化されていますから、そのあとはもうMarkdown記法での編集ができません。

公開直前になって突然見出しの階層を変えたくなったり、ハイパーテキストリンクや強調を追加したくなったら、そのときはWordPressのエディタの作法に従って編集することになります。

せっかく記事作成の効率アップをめざしてTyporaを使ったのに、最後にWordPressで編集するとなると効率は一気に落ちてしまいます。

WordPressへペーストしたあとは記事はまったく触らなくていいというくらいに、編集作業はTypora上で完全に終わらせておくのが理想です。

アフィリエイト系ブロガーだと、会話風の吹き出しをいれたりランキングを作ったりすればTyporaだけで完全に終わりとはいかないでしょうが、それ以外の普通のブロガーならTyporaで完結するような使い方をめざしてもいいと思います。

Markdown記法はシンプルな道具をめざしているので華美な装飾はできませんが、逆にじっくり読ませるタイプのコンテンツにはシンプルかつミニマルな美しさがあり、読みやすさは充分かと思います。

ソースはやや複雑

HTMLとしてペーストしているから致し方ないんですが、純粋にMarkdownで書かれた記事に比べるとソースコードはやや複雑になります。

実際にテキストモードで確認してみると、終了タグが追加されているのは当然として、ほかにClass名なども書き加えられているので、可読性はどうしても落ちてしまいます。

WordPressにプラグインを入れた上で純粋なMarkdown記法を使うのか、それともプラグインは使わない代わりにやや複雑なHTMLのソースで記述するのか、どちらを好むかということになるでしょうか。

Typora使いこなしのポイント - まとめ

以上、実際にTyporaで記事を作るに当たって押えておきたいポイントをまとめてみました。

簡単にいうとTyporaは「Markdownをより使いやすくするために、Markdownの本質的な部分を敢えて捨てた」ようなところがあると思います。

より使いやすくというのはMarkdown記法を丸暗記していなくてもメニューコマンドから操作できるという点です。

敢えて捨てたというのは、Markdown本来の使い方であった#や*などの記号を直接編集することができないところがあったり、わざわざHTMLに変換してペーストしているといった点です。

見かけのわかりやすさをとる代わりに中身はちょっと複雑化しているといっていいかもしれません。

この割り切りのおかげで、Markdown記法にもテキストエディタにも不慣れな初心者ブロガーにとっては、すごく使いやすいものになっていると思います。

その一方で、Markdownが本来めざしているであろうシンプルでミニマルなツールという姿勢を支持してきた中級以上のユーザーにとってはなんか違うなぁという印象を与えているんじゃないかという気もします。

これはもちろん私の勝手な危惧なので実際はそんなことはないのかもしれませんが・・・

ともかく、文書構造が明快、装飾もシンプルでミニマルなブログ記事作成をめざしている方にはかなりお薦めなツールだと思います。

この記事を参考にTyporaを使いこなしていただければ幸いです。

その他のTypora記事はこちらから