Gutenbergでマークダウン記法を使って執筆速度をアップしよう
マークダウン記法を使うと、HTMLを簡単に高速入力できます。teratailや Qiitaなどのサイトで使えるので、hatenaもよく使います。 このマークダウンにWordPressのブロックエディターGutenbergが対応していたことをつい最近知りました。
ただし、完全に対応しているようではないので、Gutenbergでどのマークダウン記法が使えるのか、どのように使えばいいのかについて調べてみました。
マークダウン記法とは
マークダウン記法は 文書を記述するための軽量マークアップ言語のひとつです。 HTMLの面倒なタグを打つ必要なしに簡単に記述した文章からHTMLを生成できます。
例えば## 見出し2と入力すれば<h2>見出し2</h2>というHTMLが生成されます。
HTMLタグを入力するのと比べてタイプ量が削減できますし、返還前のテキストでも可読性が高いように設計されてますので、慣れると非常に高速に入力できるようになります。
マークダウンの使い方としては、 Gutenberg上で直接マークダウン記法で入力していく方法と、使い慣れたテキストエディターでマークダウンで入力して、それを Gutenberg にコピペする方法があります。
Gutenberg上で入力できるマークダウン
段落
改行 (Enter)入力 で段落ブロックが挿入されます。段落内で改行したい場合は、Shift+Enter 入力になります。
段落ブロックはHTMLの<p>...<p> タグ、改行は<br>タグになります。
見出し
Gutenbergの デフォルト ブロックの段落ブロックの文頭に下記のテキストを入力すると見出しブロックに変換されます。変換されたらそのまま見出しを入力できます。
| ブロックに入力 | 変換されるブロック | HTML |
|---|---|---|
## (#2個と半角スペース) | H2ブロック | <h2>...</h2> |
### (#2個と半角スペース) | H3ブロック | <h3>...</h3> |
### (#2個と半角スペース) | H4ブロック | <h4>...</h4> |
H2～H6 まで対応してます。H1 と H7 以下は変換できません。
引用
空ブロックあるいは段落ブロックの文頭に > を入力すると引用ブロックに変換されます。
| ブロックに入力 | 変換されるブロック | HTML |
|---|---|---|
> (>と半角スペース) | 引用ブロック | <blockquote>...<blockquote> |
リスト
*(アスタリスク)または - (マイナス)と半角スペースでリストブロックに変換されます。
リストブロックに変換された後は、改行すると次のリストになります。ネストさせるには、改行の後に半角スペース入力で子リストになります。さらに改行+半角スペースで孫リストとなります。子リストから改行+バックスペースで親リストに戻ります。
| ブロックに入力 | 変換されるブロック | HTML |
|---|---|---|
* または- (*または-と半角スペース) | リストブロック | <ul><li>...</li></ul> |
- リスト1
- リスト2
- リスト2-1
- 孫リスト2-1-1
- リスト2-1
番号付きリスト
1.と入力して半角スペースで番号付きリストに変換されます。同様に、 リストブロックに変換された後は、改行すると次の番号付きリスト(2. ・・)になります。ネストさせるには、改行の後に半角スペース入力で子リストになります。
| ブロックに入力 | 変換されるブロック | HTML |
|---|---|---|
1. (1.と半角スペース) | 番号付きリストブロック | <ol><li>...</li></ol> |
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
- 番号付きリスト
水平線
水平線は---（ハイフン3つ）を入力して Enterキーで水変遷ブロックに変換されます。
ソースコード
``` バッククォート(Shift+@で入力) ３つのあとEnterキーでソースコードブロックに変換されます。HTMLやCSS、その他のブログラムのソースコードを入力するときに使用します。（等幅フォントでスペースによるインデントも反映されます。）WordPressの場合は下記のようなHTMLになります。
<pre class="wp-block-code"><code> ソースコード </code></pre>Luxeritasの場合はシンタックスハイライターが標準装備されてますので、ソースコードブロックはブロックの左上のボタンでシンタックスハイライターブロックに変換できます。
このブログではソースコードをシンタックスハイライター表示することが多いので助かります。
変換できないブロックはショートカットキーで
hatenaが調べた限りではマークダウン記法で変換できるブロックは以上です。
テーブルブロックとかテーマ独自のブロックとかを、マウスではなくキーボードから変換したい場合は、ショートカットキーを使うといいでしょう。
半角スラッシュ/＋ブロック名またはその一部を入力するとブロックのリストがボップアップするので、上下ボタンで選択して、Enterキーで選択したブロックに変換されます。
ブロック内テキストの書式設定
行内ソースコード以外はマークダウン未対応
行内のテキストの書式設定は自動変換されません。例えばマークダウン書式では **太字** は太字だがブロック内に入力してもそのまま。他に *斜体* ~~取り消し線~~ なども同様に変換されません。
ただし、ソースコード(等幅フォント表示)だけは、バッククォート(Shift+@で入力)で囲むと自動変換されます。（なぜ、これだけ？）
`aaa bbb www iii`と入力すると 等幅フォント表示 になります。段落内でコードを挿入したい場合に使います。
書式設定のショートカットキー
書式設定をキーボードだけでしたい場合は、やはりショートカットキーを使います。
Ctrl+B | 選択したテキストを太字にする。 |
ctrl+I | 選択したテキストを斜体にする。 |
Ctrl+U | 選択したテキストに下線を付ける。 |
Ctrl+K | 選択したテキストをリンクに変換する。 |
Ctrl+Shift+K | リンクを削除する。 |
Shift+Alt+D | 選択したテキストに取り消し線を追加する。 |
Shift+Alt+X | 選択したテキストを等幅フォントで表示する。 |
テキストエディターで記述してコピペする方法
ふだんからマークダウン記法を使用していて、使い慣れたテキストエディターがあるのなら、そこでマークダウン記法で入力して、WordPressのGutenbergにコピー＆ペーストするという方法もあります。ペーストした瞬間に各ブロックに変換されて、書式設定も反映されます。
ほとんどのブロック要素に対応していて、直接記述する場合には対応していないテーブルも変換されます。 Gutenbergのテーブルブロックはヘッダー(th要素)を指定できないが、マークダウン記法で記述した場合は、ヘッダー付きのテーブルになるのもポイントが高いです。( GutenbergではHTMLに変換してからthに変換するという面倒なことをしていました。）
また、テキストの書式設定のマークダウンも、太字、斜体、下線、リンク、などほとんど適切に変換されます。
例えば、テキストエディターで下記のように記述して、すべてコピーして Gutenberg に貼り付けるときれいに変換されます。
## 見出し1
本文 本文 本文
### 見出し2
本文 本文 本文 本文 本文 本文
> 引用 引用 引用 引用 引用 引用
- リスト - リスト - リスト
1. 番号付きリスト 1. 番号付きリスト 1. 番号付きリスト
本文**太字**本文*斜体*本文
### テーブル
| A列 | B列 | C列 |D列|E列| |-----|:---:|-----|--:|---| | あ | い | う |え |お | | か | き | く |け |こ | | さ | し | す |せ |そ |
上記の記述例をみてもらえれば分かると思いますが、すっきりしていて読みやすく、かつ最低限の文章構造は把握できます。ツールバーとか余分なものは表示されないので、執筆に集中できます。執筆速度も確実にアップします。
マークダウンに対応したエディターなら、より読みやすくハイライトされて、かつプレビュー画面を表示させることも可能なものもあります。おすすめのマークダウン対応のエディタは次に機会に詳しく紹介したいと思います。
まとめ
WordPressのブロックエディターGutenbergで、マークダウン記法とショートカットキーを使って、マウスを極力使わずタイピングだけで高速に記事執筆する方法を紹介しました。
また、外部エディターでマークダウン記法で記述して、それを Gutenbergにコピペする方法もあることを紹介しました。
特に後者の方法は、文章中心のブログの場合、余計な要素が目に入らないので、記事内容に集中できるのお勧めです。