2018-08-30

tobijibu

preタグの中でもPugテンプレートを使って表示する

この記事の手法では、改行やタグの表示等が不完全です。以下のページも併せてご確認ください。
preタグの中でもPugテンプレートを使って表示する2


Pugを使ってテンプレートを生成している時に、 pre > codeタグを使ってソースを入力したい場合があります。 例えばページ内の要素を一部分だけ切り取って紹介するといった場面です。

普通に考えると、
PugからHTMLを生成 → HTMLタグをエスケープ → pre > codeタグ内に貼り付け
といったことをするかもしれません。でも、とても面倒ですね。 Pugのフィルタ機能JSTransformerモジュールを使うととても楽になります。

例として以下のようなPugテンプレートがあったとします。 この内容をpre > codeタグに表記したいとしましょう。

ul
  li Item A
  li Item B
  li Item C

pre > codeタグに入れ込むならば以下のように指定します。 ↑のコードから↓のコードに変換するのを出来る限り簡単にするのが今回の目標です。

<pre>
  <code>
    &lt;ul&gt;
      &lt;li&gt;Item A&lt;/li&gt;
      &lt;li&gt;Item B&lt;/li&gt;
      &lt;li&gt;Item C&lt;/li&gt;
    &lt;/ul&gt;
  </code>
</pre>

モジュールを追加

まずは必要なモジュールを追加します。

$ npm install --save-dev jstransformer-pug jstransformer-escape-html

jstransformer-pugは、 PugテンプレートをHTMLに変換するモジュールです。
jstransformer-escape-htmlは、 HTMLをエスケープするモジュールです。

モジュールを使って出力

Pugにはフィルタという機能があります。 フィルタはPugテンプレート内で別の言語(MarkdownやSCSS等)を使うための機能です。 JSTransformerをフィルタとして使うことで、出力を制御することができます。

pre
  code
    :escape-html:pug(pretty=true)
      ul
        li Item A
        li Item B
        li Item C

フィルタは複数指定することが可能で、その場合は改行せずに1行で指定します。 後ろのフィルタから先に処理されるので、:pug(pretty=true)を処理した後に :escape-htmlが処理されます。 つまり、"PugテンプレートをHTML化して、そのHTMLをエスケープする"という処理になります。
以下のような構造だと考えると、後ろのフィルタから処理される意味が理解しやすいかもしれません。

pre
  code
    :escape-html
      :pug(pretty=true)
        ul
          li Item A
          li Item B
          li Item C

Pugはデフォルトでコンパイルするとminifiyされてしまいます。 通常のコンパイルではとても便利なのですが、pre > codeタグでは不便です。 フィルタには(option='')という形式でオプションを渡すことができます。 そこで(pretty=true)オプションを指定してprettyな状態でHTMLとして出力します。

これでPugテンプレートのままpre > codeタグ内に出力することが出来るようになりました。

HTML
<pre>
  <code>
    &lt;ul&gt;
      &lt;li&gt;Item A&lt;/li&gt;
      &lt;li&gt;Item B&lt;/li&gt;
      &lt;li&gt;Item C&lt;/li&gt;
    &lt;/ul&gt;
  </code>
</pre>
出力イメージ
<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

JSTransformerモジュールはとても多くの種類があります。 元の文章を変更せずにPugテンプレート上で使いたいという場合は、一度JSTransformerを探してみると発見があるかもしれません。