Pugを無印HTMLに変換する。

CodePenで参考にしたいHTMLがPugで、もう一つが無印なのでPugを無印に変換したい。

変換したいコードはこれだけで、たぶん簡単なんだろうけど、そもそもがわかってない。

pug.html

.m-container
  .m-body
    .m-base
      .m-tempo
  .m-stick

覚えるのはこれだけ！Pug(Jade)のよく使う9つの書き方 の以下のあたりなのかな。

クラス属性はドット（.）、ID属性はシャープ（#）で表す

ツールに頼る。
pug(jade)からhtmlまたはhtmlからpug(jade)へ変換する

html.html

<div class="m-container">
    <div class="m-body">
        <div class="m-base">
            <div class="m-tempo"></div>
        </div>
    </div>
    <div class="m-stick"></div>
</div>

無事CodePenで無印HTML側に移植して表示できた。