LoginSignup
17
16

More than 5 years have passed since last update.

@m-yamashita

開発時にMarkdownの表現とスタイルをまとめて一発でテストして確認できるスニペットを作ってみた。

Last updated at Posted at 2014-08-31

Markdownのスタイルチェックって面倒…

先ほど lodge の新しいバージョン v0.10.0 がリリースされました！

で、リリースにあたり手動で各機能の最終確認をしていたんですが、今回からCSSをBootstrap化した影響でMarkdownのスタイルも結構変わってしまっていたので、もう一度全てを目で見て確認する必要がありました。

そうはいっても、Markdownは結構様々な書式があり、ネスト等の条件下でそれらが正しく機能しているかや、スタイル崩れがないか等を確認するのは結構億劫です。どうしたものか…。

一括でMarkdownのテストができるMarkdownスニペットを作りました。

そこで、ひと通り考えうる限りのシチュエーションで正しくMarkdownが機能していて、CSSが上手く表現できているかをテストする為に、それらを全部まとめてチェックできるMarkdownスニペットを書いてみました。

ネストした時の見栄えや、長い文字列が来た時にどう処理されるか等、よくトラブルを起こすようなものをひと通り網羅してみたつもりです。
他に有効そうなテスト等があれば、是非是非コメントで教えてください！

作ってみた結果としては、確認作業と修正作業がかなり楽ちんになりましたし、何より安心できたのでやる価値はあったかなと思います。
といわけで、せっかくだから公開しておきたいと思います。

コード(コピペして先頭のスペース削除してください)

    # Heading level 1

    ## Heading level 2

    ### Heading level 3

    #### Heading level 4

    ##### Heading level 5

    ###### Heading level 6

    paragraph.
    Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

    paragraph.
    Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

    paragraph.
    Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.
    Dolor blanditiis `quod officia enim itaque` ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

    *emphasis by asterisk*
    _emphasis by underscore_
    **strong by asterisk**
    __strong by underscore__
    *You **can** combine them*

    `inline code` block.
    ~~struck-out~~ text.

    [lodge/lodge](https://github.com/lodge/lodge) is link.
    https://github.com/lodge/lodge is url.

    > block quote.
    > Sit et corporis atque impedit delectus excepturi natus tempora ipsa officia distinctio!
    > Asperiores quasi earum ad aut soluta aspernatur incidunt.
    > Distinctio sed nesciunt praesentium recusandae laboriosam libero? Incidunt praesentium animi.lorem

    ```ruby
    def test
      print 'code block with highlight'
    end
    ```

    ```ruby:syntax-highlight-test
    def test
      print 'code block with highlight'
    end
    ```

    table test foo bar| table test foo bar | table test foo bar | table test foo bar
    ---|:---|---:|:---:
    foo|bar|baz|qux

    paragraph

    table | test | foo | bar
    ---|---|---|---
    Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? |bar|Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium?|qux

    paragraph

    table | test | foo | bar
    ---|---|---|---
    foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo|bar|baz|foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo

    ![image](http://lorempixel.com/201/201/food/) ![image](http://lorempixel.com/202/202/food/)


    1. ordered list level 1.
        1. ordered list level 2.
            1. ordered list level 3.
                1. ordered list level 4.

                    # Heading level 1

                    ## Heading level 2

                    ### Heading level 3

                    #### Heading level 4

                    ##### Heading level 5

                    ###### Heading level 6

                    paragraph in nested list.
                    Adipisicing molestiae unde tempore enim culpa! Ipsum voluptates illo inventore aliquam molestiae adipisci sunt architecto quos ea corrupti. Inventore illo qui qui reiciendis magni molestiae. Aliquam ducimus temporibus ea rerum.

                    ```ruby:syntax-highlight-test
                    def test
                      print 'code block with highlight'
                    end
                    ```

                    > block quote.
                    > Sit et corporis atque impedit delectus excepturi natus tempora ipsa officia distinctio!
                    > Asperiores quasi earum ad aut soluta aspernatur incidunt.
                    > Distinctio sed nesciunt praesentium recusandae laboriosam libero? Incidunt praesentium animi.lorem

    1. Lorem voluptate iste repellendus iusto perferendis repudiandae.
    1. Amet officia nam fugiat placeat eveniet.



    - unordered list by hyphen.
        - level 2
            - level 3
                - level 4


    * unordered list by asterisk.
        * level 2
            * level 3
                * level 4

                    ![image](http://lorempixel.com/200/200/food/) image.

    # Long heading level 1 Adipisicing illum nihil expedita non fugit veniam delectus enim mollitia explicabo obcaecati. Minima vero facere excepturi voluptates a quis praesentium in accusamus saepe non. Nam molestiae provident explicabo reprehenderit aperiam?

    ## Long heading level 2 Elit modi distinctio neque rerum iure quisquam perferendis, sequi, facere. Modi quas quae nobis laborum debitis maxime doloribus! Iure possimus et vitae a similique ab tempora? Voluptatibus minus dolore dolor!

    ### Long heading level 3 Amet debitis eum illo fugit vel doloremque quibusdam in et, dolorum? Repellat eaque aut recusandae rem neque, ab! Explicabo provident id corrupti autem ut quia aliquid voluptatem. Quibusdam ab dicta.

    #### Long heading level 4 Ipsum tenetur sit eos voluptates quam excepturi dolores porro. Dignissimos iusto ratione repellendus fugit veniam magni. Delectus non sit elit sint illum ullam. Repellendus similique expedita aliquid veritatis eligendi. Quibusdam.

    ##### Long heading level 5 Adipisicing fuga sequi atque maxime numquam voluptate? Id consequatur natus quidem dicta officia officia aperiam perspiciatis ea? Esse expedita facere suscipit iste natus. Nobis laborum vero blanditiis molestias tenetur voluptatem!

    ###### Long heading level 6 Amet delectus qui debitis nulla magni? Aperiam provident odit illum ad inventore consequatur voluptas temporibus facilis ea delectus. Veritatis quibusdam consequuntur ratione eveniet atque vitae voluptas. Modi veritatis quas incidunt?


    ```
    long code line
    Amet hic ab quo eligendi ea quia recusandae ut! Maxime provident iusto sequi dolor ea nam consectetur? Sapiente vel recusandae optio quasi laborum unde amet earum earum perspiciatis repellat. Aspernatur. Consectetur illo aperiam natus cupiditate iusto deleniti? Odio vero illum quidem tempore amet, harum! Provident ea qui odio temporibus saepe assumenda voluptatibus non aspernatur. Reprehenderit veniam voluptate delectus quia eaque?

    aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
    ```

    `inline long code: Dolor assumenda elit exercitationem quisquam rerum. Excepturi itaque cupiditate id doloremque illum sunt? Qui dicta hic itaque quasi culpa hic. Similique aliquam nulla ducimus cupiditate eos architecto maiores? Sunt ipsa?`.

    `aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa`

実行結果

上記のコードを例えばそのままQiitaに投稿してみましょう。
以下のようになります。

========== ここから ==========

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Heading level 5
Heading level 6

paragraph.
Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

paragraph.
Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

paragraph.
Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.
Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? Perferendis facere nam dolores officiis enim porro voluptatibus. Quidem optio.

emphasis by asterisk
emphasis by underscore
strong by asterisk
strong by underscore
You **can* combine them*

inline code block.
struck-out text.

lodge/lodge is link.
https://github.com/lodge/lodge is url.

block quote.
Sit et corporis atque impedit delectus excepturi natus tempora ipsa officia distinctio!
Asperiores quasi earum ad aut soluta aspernatur incidunt.
Distinctio sed nesciunt praesentium recusandae laboriosam libero? Incidunt praesentium animi.lorem

def test
  print 'code block with highlight'
end
syntax-highlight-test
def test
  print 'code block with highlight'
end
table test foo bar table test foo bar table test foo bar table test foo bar
foo bar baz qux

paragraph

table test foo bar
Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? bar Dolor blanditiis quod officia enim itaque ad modi rem fuga, eos. Voluptas maiores ab quam temporibus consectetur dolore voluptas praesentium? qux

paragraph

table test foo bar
foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo bar baz foofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoofoo

image image

  1. ordered list level 1.

    1. ordered list level 2.

      1. ordered list level 3.

        1. ordered list level 4.

          Heading level 1

          Heading level 2

          Heading level 3

          Heading level 4

          Heading level 5
          Heading level 6

          paragraph in nested list.
          Adipisicing molestiae unde tempore enim culpa! Ipsum voluptates illo inventore aliquam molestiae adipisci sunt architecto quos ea corrupti. Inventore illo qui qui reiciendis magni molestiae. Aliquam ducimus temporibus ea rerum.

          syntax-highlight-test
          def test
  print 'code block with highlight'
end

          block quote.
          Sit et corporis atque impedit delectus excepturi natus tempora ipsa officia distinctio!
          Asperiores quasi earum ad aut soluta aspernatur incidunt.
          Distinctio sed nesciunt praesentium recusandae laboriosam libero? Incidunt praesentium animi.lorem

  2. Lorem voluptate iste repellendus iusto perferendis repudiandae.

  3. Amet officia nam fugiat placeat eveniet.

  • unordered list by hyphen.

    • level 2
      • level 3
        • level 4

  • unordered list by asterisk.

    • level 2

      • level 3

        • level 4

          image image.

Long heading level 1 Adipisicing illum nihil expedita non fugit veniam delectus enim mollitia explicabo obcaecati. Minima vero facere excepturi voluptates a quis praesentium in accusamus saepe non. Nam molestiae provident explicabo reprehenderit aperiam?

Long heading level 2 Elit modi distinctio neque rerum iure quisquam perferendis, sequi, facere. Modi quas quae nobis laborum debitis maxime doloribus! Iure possimus et vitae a similique ab tempora? Voluptatibus minus dolore dolor!

Long heading level 3 Amet debitis eum illo fugit vel doloremque quibusdam in et, dolorum? Repellat eaque aut recusandae rem neque, ab! Explicabo provident id corrupti autem ut quia aliquid voluptatem. Quibusdam ab dicta.

Long heading level 4 Ipsum tenetur sit eos voluptates quam excepturi dolores porro. Dignissimos iusto ratione repellendus fugit veniam magni. Delectus non sit elit sint illum ullam. Repellendus similique expedita aliquid veritatis eligendi. Quibusdam.

Long heading level 5 Adipisicing fuga sequi atque maxime numquam voluptate? Id consequatur natus quidem dicta officia officia aperiam perspiciatis ea? Esse expedita facere suscipit iste natus. Nobis laborum vero blanditiis molestias tenetur voluptatem!
Long heading level 6 Amet delectus qui debitis nulla magni? Aperiam provident odit illum ad inventore consequatur voluptas temporibus facilis ea delectus. Veritatis quibusdam consequuntur ratione eveniet atque vitae voluptas. Modi veritatis quas incidunt?
long code line
Amet hic ab quo eligendi ea quia recusandae ut! Maxime provident iusto sequi dolor ea nam consectetur? Sapiente vel recusandae optio quasi laborum unde amet earum earum perspiciatis repellat. Aspernatur. Consectetur illo aperiam natus cupiditate iusto deleniti? Odio vero illum quidem tempore amet, harum! Provident ea qui odio temporibus saepe assumenda voluptatibus non aspernatur. Reprehenderit veniam voluptate delectus quia eaque?

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

inline long code: Dolor assumenda elit exercitationem quisquam rerum. Excepturi itaque cupiditate id doloremque illum sunt? Qui dicta hic itaque quasi culpa hic. Similique aliquam nulla ducimus cupiditate eos architecto maiores? Sunt ipsa?.

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

========== ここまで ==========

いかがでしょう？ このスニペットをQiitaで見てみると、コードブロックのファイル名を入力する部分で、ファイル名に当たる部分にスペースが入った場合におかしくなってしまう事がわかりました。(ファイル名に空白を含む場合の書き方等がちゃんとあるのかもしれませんね。そもそもファイル名を入れられるというのがQiita独特な書き方のような気もします。) あまり一般的ではなさそうなので取り消し線。

最後に

Markdown最高！

あ、あともっと綺麗にコードブロックを含むMarkdownコードそのものをMarkdownに埋め込める方法知ってる方いらっしゃいましたら教えてください＞＜；

※画像表示のテスト部分については、lorempixel - placeholder images for every case 様の画像取得APIを利用させていただきました。

17
16
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
17
16