🧰 ユーティリティ上級

動的タグ名の HTML 整形

Liquid 変数を使用した動的な HTML タグ名（h1～h6、カスタム要素など）をコンパイル時に正しく整形する。Prettier プラグイン向けのテストケースで、複合タグ名の折り返しルールを検証する。

用途

見出しレベルをシーン別に変動させる場合や、Web Components のようなカスタム要素名を Liquid で組み立てるときの整形ルール確認用。Prettier による自動フォーマット時に複合タグが正しく単一行に保たれるかを保証する。

設置場所

このスニペット自体はテストファイルのため、Prettier プラグインの開発・検証時に prettier-plugin-liquid のテストスイートに組み込む。実装側は theme.liquid や section 内で `<h{{ level }}></h{{ level }}>` のように動的タグ名を使う場合の参考になる。

注意点

このファイルはテストケースであり、本番テーマコードではない。実装時に動的タグ名を使う場合、`header_number | round` のようにフィルタを適用するなら出力値が有効な HTML タグ名になることを確認する（h1～h6 の場合なら 1～6 の整数値に変換される前提）。Prettier 設定で printWidth が 1 の場合でもコンパウンド要素名は折り返さない仕様に依存するため、テーマ側の prettier.config.js 設定がプラグインと整合していることを確認する。

タグ:liquid-parserprettierhtml-formattingdynamic-markupcode-quality

コード

15 行 / liquid

It should pretty print html element compound tag names
<h{{ header_number }}></h{{ header_number }}>
<{{ header_type }}-header></{{ header_type }}-header>

It should print compound names on a single line, even if long
printWidth: 1
<h{{ header_number | round }}></h{{ header_number | round }}>

It should print compound names with attributes as it would
printWidth: 1
<h{{ header_number | round }}
  attr="value"
  disabled
></h{{ header_number | round }}>

出典・ライセンス

Source:: Shopify/theme-tools/packages/prettier-plugin-liquid/src/test/html-compound-names/fixed.liquid
Repository:: https://github.com/Shopify/theme-tools
License:: MIT

このコードは Shopify 著作の MIT ライセンスソースです。原本の著作権は Shopify が保有します。日本語訳は ALSEL によるものです。

動的タグ名の HTML 整形

コード

出典・ライセンス

関連項目

コメント後の空白フォーマット

Liquidコメントのフォーマット

セクション呼び出しの改行制御

Prettier フォーマッタの HTML リスト整形テスト

Vue.js属性のLiquid整形

sections タグのフォーマット