GutenbergでMarkDownが使えると聞いたので試してみる

Wordpressに搭載されたブロックエディタ「
Gutenbergエディタ 」では、MarkDown記法が使えるらしいということで試してみた。 サンプルとして WordPressテーマユニットテストデータ日本語版
マークアップ: HTML タグとフォーマット をMarkDown記法で書きなおして
Gutenberg の段落ブロックにコピペしてみる。 サンプルをHTMLブロックに張り付けた結果は以下のようです。
見出し

見出し壱

見出し弐

見出し参

見出し四

見出し五
見出し六

引用 (Blockquote)

一行の引用:
貪欲であれ、愚かであれ
引用元の参照のある複数行の引用:
集中という意味は集中しなくてはいけないことにイエスということだと、人は言います。しかし、それはまったく違います。そうではなく、そこにある何百ものいいアイディアにノーということなのです。慎重に選択しなくてはいけません。実際、私は成し遂げたことと同じように成し遂げられなかったことにも満足しています。革新というのは1000ものことにノーということなのです。 スティーブ・ジョブズ – 1997年 Apple 世界的開発者会議

テーブル

従業員 給与
ジェーン $¥1 スティーブ・ジョブズの必要な給与。
ジョン ¥10万 ブログのすべて。
ジェーン ¥1億 百聞は一見にしかず。だよね ? なのでトムは1000倍。
ジェーン ¥1000億 これみたいな髪?! もういいよね…

定義リスト

定義リストタイトル
これは定義リストです。
スタートアップ
スタートアップ会社もしくはスタートアップとは、反復可能でスケーラブルなビジネスモデルを追い求める会社もしくは一時的な組織です。
#dowork
ロブ・ダイデクと彼の個人的なボディーガードのクリストファー”ビッグ・ブラック”ボイキンスが作った言い回しで、”仕事しよう” が自己動機付けとして、友達を動機付けるために機能する。
ライブでやろう
ビル・オライリーが 説明 してもらいましょう。

非順序リスト(ネスト化)

  • リストアイテム1
    • リストアイテム1
      • リストアイテム1
      • リストアイテム2
      • リストアイテム3
      • リストアイテム4
    • リストアイテム2
    • リストアイテム3
    • リストアイテム4
  • リストアイテム2
  • リストアイテム3
  • リストアイテム4

順序リスト

  1. リストアイテム1
    1. リストアイテム1
      1. リストアイテム1
      2. リストアイテム2
      3. リストアイテム3
      4. リストアイテム4
    2. リストアイテム2
    3. リストアイテム3
    4. リストアイテム4
  2. リストアイテム2
  3. リストアイテム3
  4. リストアイテム4

HTML 要素タグテスト

他の HTML タグは FAQ をご覧ください。 住所タグ
以下は住所の例です。<address> タグを使用しています:
〒100-0000 東京都千代田区1-1-1 日本
anchor タグ (リンク)
これは <anchor> (もしくはリンクとも呼ばれます) の例です。 abbr タグ
この abbr は文章の中にある <abbr> タグの例です。 Acronym タグ (HTML5 では非推奨)
これは <acronym> タグを使用した TLA です。 Big タグ(HTML5 では非推奨)
このテストは大きな文字を表す <big> タグの例ですが、このタグは HTML5 ではサポートされていません。 Cite タグ
“Code is poetry.” —WordPress Code タグ
<code> タグはこのように使います: word-wrap: break-word; Delete タグ
<del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに <strike> を使ってください)。 Emphasize タグ
<em> タグは文章の強調に使われます。欧文では斜体になっていることがよくあります。 Insert タグ
<ins> タグは挿入されたコンテンツを意味します。 Keyboard タグ
このあまり知られていない <kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、<code> タグと同じようにスタイリングされます。 Preformatted タグ
<pre> タグは複数行のコードのスタイリングに使います。
.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Quote タグ
デベロッパーズ、デベロッパーズ, デベロッパーズ… –スティーブ・バルマー Strike タグ (HTML5 では非推奨)
このタグは打ち消し線を表しています。 Strong タグ
このタグは太字テキストを表しています。 Subscript タグ
Subscript タグ <sub> を使うと H2O のような表示の際に「2」が下付きになります。 Superscript タグ
Superscript タグ <sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。 Teletype タグ (HTML5 では非推奨)
<tt> はあまり使われないタグですが、テレタイプテキスト として通常 <code> タグのようにスタイル Variable タグ
変数や引数を表す variables タグです。
以下、見出しとMarkdownコードと結果。

見出し

#  見出し壱
## 見出し弐
### 見出し参
#### 見出し四
##### 見出し五
###### 見出し六

見出し壱

見出し弐

見出し参

見出し四

見出し五
見出し六

引用 (Blockquote)

一行の引用:

> 貪欲であれ、愚かであれ
貪欲であれ、愚かであれ

引用元の参照のある複数行の引用:

>集中という意味は集中しなくてはいけないことにイエスということだと、人は言います。しかし、それはまったく違います。そうではなく、そこにある何百ものいいアイディアにノーということなのです。慎重に選択しなくてはいけません。実際、私は成し遂げたことと同じように成し遂げられなかったことにも満足しています。革新というのは1000ものことにノーということなのです。  
<cite>スティーブ・ジョブズ – 1997年 Apple 世界的開発者会議</cite>
集中という意味は集中しなくてはいけないことにイエスということだと、人は言います。しかし、それはまったく違います。そうではなく、そこにある何百ものいいアイディアにノーということなのです。慎重に選択しなくてはいけません。実際、私は成し遂げたことと同じように成し遂げられなかったことにも満足しています。革新というのは1000ものことにノーということなのです。
スティーブ・ジョブズ – 1997年 Apple 世界的開発者会議

テーブル

|従業員|    給与| |
|:-|:-|:-|
|ジェーン|$¥1|スティーブ・ジョブズの必要な給与。|
|ジョン|¥10万|ブログのすべて。|
|ジェーン|¥1億|百聞は一見にしかず。だよね ? なのでトムは1000倍。|
|ジェーン|¥1000億|これみたいな髪?! もういいよね…|
|従業員| 給与| |
|:-|:-|:-|
|ジェーン |$¥1 |スティーブ・ジョブズの必要な給与。|
|ジョン |¥10万| ブログのすべて。|
|ジェーン| ¥1億| 百聞は一見にしかず。だよね ? なのでトムは1000倍。|
|ジェーン |¥1000億| これみたいな髪?! もういいよね…|

定義リスト

<dl>
<dt>定義リストタイトル</dt><dd>これは定義リストです。</dd>
<dt>スタートアップ</dt><dd>スタートアップ会社もしくはスタートアップとは、反復可能でスケーラブルなビジネスモデルを追い求める会社もしくは一時的な組織です。</dd>
<dt>#dowork</dt><dd>ロブ・ダイデクと彼の個人的なボディーガードのクリストファー"ビッグ・ブラック"ボイキンスが作った言い回しで、"仕事しよう" が自己動機付けとして、友達を動機付けるために機能する。</dd>
<dt>ライブでやろう</dt><dd>ビル・オライリーが
[説明](https://www.youtube.com/watch?v=O_HyZ5aW76c "We'll Do It Live") してもらいましょう。</dd></dl>
定義リストタイトルこれは定義リストです。 スタートアップスタートアップ会社もしくはスタートアップとは、反復可能でスケーラブルなビジネスモデルを追い求める会社もしくは一時的な組織です。 #doworkロブ・ダイデクと彼の個人的なボディーガードのクリストファー”ビッグ・ブラック”ボイキンスが作った言い回しで、”仕事しよう” が自己動機付けとして、友達を動機付けるために機能する。 ライブでやろうビル・オライリーが 説明 してもらいましょう。

非順序リスト(ネスト化)

- リストアイテム1
- リストアイテム1
- リストアイテム1
    - リストアイテム2
        - リストアイテム3
            - リストアイテム4
    - リストアイテム2
        - リストアイテム3
            - リストアイテム4
    - リストアイテム2
        - リストアイテム3
            - リストアイテム4
  • リストアイテム1
  • リストアイテム1
  • リストアイテム1
    • リストアイテム2
      • リストアイテム3
        • リストアイテム4
    • リストアイテム2
      • リストアイテム3
        • リストアイテム4
    • リストアイテム2
      • リストアイテム3
        • リストアイテム4

順序リスト

1. リストアイテム1
1. リストアイテム1
1. リストアイテム1
    1. リストアイテム2
        1. リストアイテム3
            1. リストアイテム4
    1. リストアイテム2
        1. リストアイテム3
            1. リストアイテム4
    1. リストアイテム2
        1. リストアイテム3
            1. リストアイテム4
  1. リストアイテム1
  2. リストアイテム1
  3. リストアイテム1
    1. リストアイテム2
      1. リストアイテム3
        1. リストアイテム4
    2. リストアイテム2
      1. リストアイテム3
        1. リストアイテム4
    3. リストアイテム2
      1. リストアイテム3
        1. リストアイテム4

HTML 要素タグテスト

他の HTML タグは FAQ をご覧ください。

住所タグ

以下は住所の例です。\<address> タグを使用しています
<address>〒100-0000 東京都千代田区1-1-1 日本</address>
〒100-0000 東京都千代田区1-1-1 日本

anchor タグ (リンク)

これは [\<anchor\>](http://example.com/) (もしくはリンクとも呼ばれます) の例です。
これは \ (もしくはリンクとも呼ばれます) の例です。

abbr タグ

この <abbr title="abbreviation">abbr</abbr> は文章の中にある \<abbr\> タグの例です。
この abbr は文章の中にある \<abbr> タグの例です。

cronym タグ (HTML5 では非推奨)

これは \<acronym\> タグを使用した<acronym title="three-letter acronym">TLA</acronym> です。
これは \<acronym> タグを使用したTLA です。

Big タグ(HTML5 では非推奨)

このテストは<big>大きな</big>文字を表す \<big\> タグの例ですが、このタグは HTML5 ではサポートされていません。
このテストは大きな文字を表す \<big> タグの例ですが、このタグは HTML5 ではサポートされていません。

Cite タグ

“Code is poetry.” —<cite>WordPress</cite>
“Code is poetry.” —WordPress

Code タグ

\<code\> タグはこのように使います: ``word-wrap: break-word;``
\<code> タグはこのように使います: word-wrap: break-word;

Delete タグ

\<del\> タグは~~打ち消し線~~などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに \<strike\> を使ってください)。
\<del> タグは打ち消し線などで表現されますが、このタグは HTML5 ではサポートされていません (代わりに \<strike> を使ってください)。

Emphasize タグ

\<em\> タグは *文章の強調* に使われます。欧文では斜体になっていることがよくあります。
\<em> タグは 文章の強調 に使われます。欧文では斜体になっていることがよくあります。

Insert タグ

\<ins\> タグは<ins>挿入されたコンテンツ</ins>を意味します。
\<ins> タグは挿入されたコンテンツを意味します。

Keyboard タグ

このあまり知られていない \<kbd\> タグは <kbd>Ctrl</kbd> のようにキーボードテキストをエミュレートします。通常、\<code\> タグと同じようにスタイリングされます。
このあまり知られていない \<kbd> タグは Ctrl のようにキーボードテキストをエミュレートします。通常、\<code> タグと同じようにスタイリングされます。

Preformatted タグ


\<pre> タグは複数行のコードのスタイリングに使います。
    ```
    .post-title {
        margin: 0 0 5px;
        font-weight: bold;
        font-size: 38px;
        line-height: 1.2;
        and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
    }
    ```
.post-title {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 38px;
    line-height: 1.2;
    and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}

Quote タグ

<q>デベロッパーズ、デベロッパーズ, デベロッパーズ...</q>–スティーブ・バルマー
デベロッパーズ、デベロッパーズ, デベロッパーズ…–スティーブ・バルマー

Strike タグ (HTML5 では非推奨)

このタグは~~打ち消し線~~を表しています。
このタグは打ち消し線を表しています。

Strong タグ

このタグは**太字テキスト**を表しています。
このタグは太字テキストを表しています。

Subscript タグ

Subscript タグ \<sub\> を使うと H<sub>2</sub>O のような表示の際に「2」が下付きになります。
Subscript タグ \<sub> を使うと H2O のような表示の際に「2」が下付きになります。

Superscript タグ

Superscript タグ \<sup\> を使うと E = MC<sup>2</sup> のような表示の際に「2」が上付きになります。
Superscript タグ \<sup> を使うと E = MC2 のような表示の際に「2」が上付きになります。

Teletype タグ (HTML5 では非推奨)

\<tt\> はあまり使われないタグですが、<tt>テレタイプテキスト</tt> として通常 \<code\> タグのようにスタイル
\<tt> はあまり使われないタグですが、テレタイプテキスト として通常 \<code> タグのようにスタイル

Variable タグ

変数や引数を表す<var>variables</var>タグです。
変数や引数を表すvariablesタグです。
普通に使う記法、見出しやリストに関しては使えそう。
tableのMarkdown記法が機能しないのと、定義リストのHTML記法が機能しないのは残念だけど、¶ブロックでそこそこHTML記法が使えるものがあるというのは面白い。
タイトルとURLをコピーしました