[5] 
[CITE@en[PostHTML · GitHub]], [TIME[2024-09-25T09:14:32.000Z]] <https://github.com/posthtml>


[1] 
[CITE@en[GitHub - posthtml/posthtml: PostHTML is a tool to transform HTML/XML with JS plugins]], [TIME[2024-09-25T08:19:15.000Z]] <https://github.com/posthtml/posthtml>

[2] 
[CITE@en[posthtml - HTML/XML processor]], [TIME[2024-09-25T08:20:14.000Z]] <https://posthtml.org/#/>


[3] >>1 の

> transform HTML/XML with JS plugins

だと意味がよくわかりませんが、要は「入力の [[HTMLもどき]]」を
「[[PostHTML]] [[プラグイン]]」の組み合わせを通して
「出力の [[HTML]]」
を得るようなソフトウェアらしいです。


[4] なぜか「入力の [[HTMLもどき]]」があたかも [[HTML]] であるかのように説明され、あたかも 
[[HTML]] であるかのように利用者は理解しているようですが、
[[プラグイン]]専用の独自の[[要素]]や[[属性]]が大量にあったり、
場合によっては [CODE[class]] [[属性値]]として出力されるものを[[要素名]]に使ったりできます
([[プラグイン]]とその呼び出し設定次第)。


[16] 
基本はサーバー側で実行される前提に見える。「入力の [[HTMLもどき]]」はクライアントには送られないのが基本、
のように見えるがどうだろう。


[6] [[PostCSS]] とは兄弟プロジェクトなのかな


[7] [CITE@en[GitHub - posthtml/posthtml-content: Apply functions to tags through custom attributes]], [TIME[2024-09-25T09:17:30.000Z]] <https://github.com/posthtml/posthtml-content>

[8] [CITE@en[GitHub - posthtml/posthtml-shiki: Highlight code blocks with PostHTML and Shiki]], [TIME[2024-09-25T09:18:48.000Z]] <https://github.com/posthtml/posthtml-shiki>

>
[PRE[
<shiki>
  <h1 class="text-xl">Hello</h1>
</shiki>
]PRE]


[10] [CITE@en[GitHub - posthtml/posthtml-import: Import HTML Plugin]], [TIME[2024-09-25T09:21:15.000Z]] <https://github.com/posthtml/posthtml-import>

>
[PRE[
<import src="file.html">
]PRE]

[15] [CITE@en[GitHub - posthtml/posthtml-include: Include HTML Plugin]], [TIME[2024-09-25T09:26:56.000Z]] <https://github.com/posthtml/posthtml-include>

>
[PRE[
    <include src="components/button.html" locals='{
        "text": "Button"
    }'></include>
]PRE]


[14] 
[CITE@en[GitHub - posthtml/posthtml-expressions: Use variables, JS-like expressions, and even markup-powered logic in your HTML.]], [TIME[2024-09-25T09:24:40.000Z]] <https://github.com/posthtml/posthtml-expressions>

>
[PRE[
<if condition="foo === 'bar'">
  <p>Foo really is bar! Revolutionary!</p>
</if>

<elseif condition="foo === 'wow'">
  <p>Foo is wow, oh man.</p>
</elseif>

<else>
  <p>Foo is probably just foo in the end.</p>
</else>
]PRE]

>
[PRE[
<when condition="foo === 'bar'">
  <p>Foo really is bar! Revolutionary!</p>
</when>

<elsewhen condition="foo === 'wow'">
  <p>Foo is wow, oh man.</p>
</elsewhen>

<otherwise>
  <p>Foo is probably just foo in the end.</p>
</otherwise>
]PRE]

>
[PRE[
<switch expression="foo">
  <case n="'bar'">
    <p>Foo really is bar! Revolutionary!</p>
  </case>
  <case n="'wow'">
    <p>Foo is wow, oh man.</p>
  </case>
  <default>
    <p>Foo is probably just foo in the end.</p>
  </default>
</switch>
]PRE]

>
[PRE[
<clause expression="foo">
  <when n="'bar'">
    <p>Foo really is bar! Revolutionary!</p>
  </when>
  <when n="'wow'">
    <p>Foo is wow, oh man.</p>
  </when>
  <fallback>
    <p>Foo is probably just foo in the end.</p>
  </fallback>
</clause>
]PRE]

>
[PRE[
<each loop="item, index in array">
  <p>{{ index }}: {{ item }}</p>
</each>
]PRE]

>You can define custom tag names to use for creating loops:

>
[PRE[
<for loop="item in [1,2,3]">
  <p>{{ item }}</p>
</for>
]PRE]

>
[PRE[
<scope with="author">
  <include src="components/profile.html"></include>
</scope>
]PRE]

>You can define a custom tag name to use for creating scopes:

>
[PRE[
<context with="author">
  <include src="components/profile.html"></include>
</context>
]PRE]

>
[PRE[
<raw>
  <if condition="foo === 'bar'">
    <p>Output {{ foo }} as-is</p>
  </if>
</raw>
]PRE]

>You can customize the name of the tag:

>
[PRE[
<verbatim>
  <if condition="foo === 'bar'">
    <p>Output {{ foo }} as-is</p>
  </if>
</verbatim>
]PRE]

[9] [[SugarML]]



[11] [CITE@en[Home | Maizzle - Framework for Rapid Email Prototyping]], [TIME[2024-09-25T09:22:02.000Z]] <https://v3.maizzle.com/>

>[B[Bring Your Own HTML]]
>
No need to learn custom syntax or adapt your templates to it. Use your existing HTML, it'll just work.
>[B[Supercharged by PostHTML]]
>
>PostHTML gives your HTML superpowers, enabling you to write complex logic with simple, text editor-friendly markup. 

>
[PRE[
<extends src="src/layouts/main.html">
  <block name="template">
    <table class="w-600 sm:w-full">
      <tr>
        <td class="text-base text-gray-700">
          <h2>Article title</h2>
          <p>Lorem ipsum dolor sit amet</p>
        </td>
      </tr>
    </table>
  </block>
</extends>
]PRE]


[12] いや custom syntax だろw



[18] [CITE@en[GitHub - posthtml/posthtml-custom-elements: Custom Elements Plugin]], [TIME[2024-09-25T14:45:56.000Z]] <https://github.com/posthtml/posthtml-custom-elements>

[20] [CITE@en[GitHub - posthtml/posthtml-components: A PostHTML plugin for creating components with HTML-friendly syntax inspired by Laravel Blade. Slots, stack/push, props, custom tag and much more.]], [TIME[2024-09-25T14:51:53.000Z]] <https://github.com/posthtml/posthtml-components>

>This PostHTML plugin provides an HTML-friendly syntax for using components in your HTML templates. If you are familiar with Blade, React, Vue or similar, you will find the syntax to be familiar, as this plugin is inspired by them.

[21] >>20 HTML-friendly syntax は HTML でないと言っているようにも読めるが、その後の方ではやっぱり
HTML と言っている。



[13] [CITE@en[Templates | Maizzle - Framework for Rapid Email Prototyping]], [TIME[2024-09-25T09:23:16.000Z]] <https://v3.maizzle.com/docs/templates/>




[FIG(data)[ [60] [[HTML要素概説]]

:[F[要素名]]:[CODE[*]]
:日付:[TIME[2015]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものでは任意の[[要素名]]を[[著者]]が使えるようだ。[SEE[>>19]]
[SRC[POSTHTML]]
:出典:
[REFS[

-
[17] 
[DFN[POSTHTML]]:
[CITE@en[GitHub - posthtml/posthtml: PostHTML is a tool to transform HTML/XML with JS plugins]], 
[TIME(.seen)[2024-09-25T14:38:44.000Z]] <https://github.com/posthtml/posthtml>
-
[DFN[POSTHTML:CE]]:
[CITE@en[GitHub - posthtml/posthtml-custom-elements: Custom Elements Plugin]], [TIME(.seen)[2024-09-25T14:45:56.000Z]] <https://github.com/posthtml/posthtml-custom-elements>
-
[DFN[POSTHTML:WC]]:
[CITE@en[GitHub - posthtml/posthtml-web-component: Server Side Web Component Render.]], [TIME(.seen)[2024-09-25T15:18:05.000Z]] <https://github.com/posthtml/posthtml-web-component>

]REFS]
:注釈:
-
[DFN[PostHTML]]
プラグインと称する [[JavaScript]] コードの組み合わせによって [[HTML]]
を生成するソフトウェア。
本書では公式に提供されているプラグインも含めて指す。
[[平成時代]]末期頃に開発が始まり、[[令和時代]]に入った現在も開発が続いている。
入力にはプラグインの動作を指定する独自の[[要素]]や[[属性]]も含まれるが、
単に [[HTML]] と呼ばれている。
-
[19] 
Custom Elements や Web Components に対応すると称するプラグインでは任意の要素名や属性名が使える。
[SRC[POSTHTML:CE]]
[SRC[POSTHTML:WC]]
その他のプラグインも独自の要素名や属性名を使っている。
また、設定により要素名や属性名をカスタマイズできるとしている。
本書では公式に提供されているプラグインの要素名と別名としての利用例が明示されている要素名を採録対象とし、
それ以外は対象外とする。


]FIG]


[FIG(data)[ [60] [[HTML要素概説]]

:[F[要素名]]:[CODE[yield]]
:[F[要素名]]:[CODE[push]]
:[F[要素名]]:[CODE[stack]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:COMPONENTS]]:
[CITE@en[GitHub - posthtml/posthtml-components: A PostHTML plugin for creating components with HTML-friendly syntax inspired by Laravel Blade. Slots, stack/push, props, custom tag and much more.]], 
[TIME(.seen)[2024-09-25T14:57:01.000Z]] <https://github.com/posthtml/posthtml-components>

]REFS]

]FIG]

[FIG(data)[ [44] [[HTML要素概説]]

:[F[要素名]]:[CODE[fill:*]]
:[F[要素名]]:[CODE[slot:*]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものが
[CODE(HTML)[fill:]]
や
[CODE(HTML)[slot:]]
から始まる任意の[[要素名]]を使う。
このままの[[要素名]]ではない。
:出典:
[REFS[

-
[CITE@en[GitHub - posthtml/posthtml-components: A PostHTML plugin for creating components with HTML-friendly syntax inspired by Laravel Blade. Slots, stack/push, props, custom tag and much more.]], 
[TIME(.seen)[2024-09-25T14:57:01.000Z]] <https://github.com/posthtml/posthtml-components>

]REFS]
:参照:[CODE[fill:*]]
:参照:[CODE[slot:*]]

]FIG]



[FIG(data)[ [45] [[HTML要素概説]]

:[F[要素名]]:[CODE[include]]
:日付:[TIME[2015-09-27]]
:説明:
[TIME[2015-09-27]]以来、
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:INCLUDE1]]:
[CITE@en[Release v1.0.0]], 
[DATA(.author)[[[voischev]]]], 
[TIME(.published)[2015-09-27 06:53:36 +09:00]], [TIME[2024-09-26T14:41:15.000Z]] <https://github.com/posthtml/posthtml-include/commit/42ca3de0637c554ef1569b83d85edaec5d0b6ad2>

]REFS]

]FIG]



- [43] [CITE@en[GitHub - posthtml/posthtml-include: Include HTML Plugin]], [TIME[2024-09-26T14:41:31.000Z]] <https://github.com/posthtml/posthtml-include>
--[42] [CITE@en[Release v1.0.0]], [[voischev]], [TIME[2015-09-27 06:53:36 +09:00]], [TIME[2024-09-26T14:41:15.000Z]] <https://github.com/posthtml/posthtml-include/commit/42ca3de0637c554ef1569b83d85edaec5d0b6ad2>


[FIG(data)[ [22] [[HTML要素概説]]

:[F[要素名]]:[CODE[extends]]
:[F[要素名]]:[CODE[block]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:EXTENDS]]:
[CITE@en[GitHub - posthtml/posthtml-extend: Template extending (Jade-like)]], 
[TIME(.seen)[2024-09-26T13:02:40.000Z]] <https://github.com/posthtml/posthtml-extend>

]REFS]

]FIG]

[FIG(data)[ [40] [[HTML要素概説]]

:[F[要素名]]:[CODE[if]]
:[F[要素名]]:[CODE[elseif]]
:[F[要素名]]:[CODE[else]]
:[F[要素名]]:[CODE[when]]
:[F[要素名]]:[CODE[elsewhen]]
:[F[要素名]]:[CODE[otherwise]]
:[F[要素名]]:[CODE[switch]]
:[F[要素名]]:[CODE[case]]
:[F[要素名]]:[CODE[default]]
:[F[要素名]]:[CODE[each]]
:[F[要素名]]:[CODE[scope]]
:[F[要素名]]:[CODE[raw]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:EXP]]:
[CITE@en[GitHub - posthtml/posthtml-expressions: Use variables, JS-like expressions, and even markup-powered logic in your HTML.]], [TIME(.seen)[2024-09-26T14:36:43.000Z]] <https://github.com/posthtml/posthtml-expressions>

]REFS]

]FIG]

[FIG(data)[ [41] [[HTML要素概説]]

:[F[要素名]]:[CODE[clause]]
:[F[要素名]]:[CODE[fallback]]
:[F[要素名]]:[CODE[for]]
:[F[要素名]]:[CODE[context]]
:[F[要素名]]:[CODE[verbatim]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにおける別名例にある。
[SRC[POSTHTML:EXP]]

]FIG]


[FIG(data)[ [37] [[HTML要素概説]]

:[F[要素名]]:[CODE[shiki]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:SHIKI]]:
[CITE@en[GitHub - posthtml/posthtml-shiki: Highlight code blocks with PostHTML and Shiki]], [TIME(.seen)[2024-09-26T14:24:39.000Z]] <https://github.com/posthtml/posthtml-shiki>

]REFS]

]FIG]


[FIG(data)[ [39] [[HTML要素概説]]

:[F[要素名]]:[CODE[highlight]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにおける [CODE[shiki]] の別名例にある。
[SRC[POSTHTML:SHIKI]]

]FIG]


[FIG(data)[ [36] [[HTML要素概説]]

:[F[要素名]]:[CODE[markdown]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:MD]]:
[CITE@en[GitHub - posthtml/posthtml-md2html: Render markdown inside html elements.]], [TIME(.seen)[2024-09-26T14:21:19.000Z]] <https://github.com/posthtml/posthtml-md2html>
-
[DFN[POSTHTML:MARKDOWNIT]]:
[CITE@en[GitHub - posthtml/posthtml-markdownit: A PostHTML plugin to transform Markdown using markdown-it]], [TIME(.seen)[2024-09-26T14:22:08.000Z]] <https://github.com/posthtml/posthtml-markdownit>
-
[DFN[POSTHTML:INCLUDEMD]]:
[CITE@en[GitHub - posthtml/posthtml-include-md: Include markdown plugin for PostHTML]], [TIME(.seen)[2024-09-26T14:26:48.000Z]] <https://github.com/posthtml/posthtml-include-md>

]REFS]

]FIG]


[FIG(data)[ [38] [[HTML要素概説]]

:[F[要素名]]:[CODE[md]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
[SRC[POSTHTML:MD]]
[SRC[POSTHTML:MARKDOWNIT]]

]FIG]


[FIG(data)[ [30] [[HTML要素概説]]

:[F[要素名]]:[CODE[spaceless]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
既存の[[雛形言語]]複数からの借用である。[SEE[>>35]]
:出典:
[REFS[

-
[DFN[POSTHTML:SPACELESS]]:
[CITE@en[GitHub - posthtml/posthtml-spaceless: Spaceless tag to remove whitespace between HTML tags]], [TIME(.seen)[2024-09-26T14:17:27.000Z]] <https://github.com/posthtml/posthtml-spaceless>

]REFS]
:注釈:
- [35] 
借用元の[[雛形言語]]は [[HTML]] ではないし、 [[SGML]] 系の構文でもない。

]FIG]

- [32] [CITE@en[Built-in template tags and filters | Django documentation | Django]], [TIME[2024-09-26T14:18:21.000Z]] <https://docs.djangoproject.com/en/dev/ref/templates/builtins/#spaceless>
- [33] [CITE[Swig » Documentation » Tags]], [TIME[2024-09-26T14:18:38.000Z]], [TIME[2020-09-10T04:39:03.344Z]] <https://web.archive.org/web/20200910043854/https://voorhoede.github.io/swig/docs/tags/#spaceless>
- [34] [CITE@en[Twig - The flexible, fast, and secure template engine for PHP]], [[Sensio Labs]], [TIME[2024-09-26T14:19:07.000Z]], [TIME[2011-10-03T03:33:44.801Z]] <https://web.archive.org/web/20111003033337/http://twig.sensiolabs.org/doc/tags/spaceless.html>



[FIG(data)[ [29] [[HTML要素概説]]

:[F[要素名]]:[CODE[mixin]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:MIXIN]]:
[CITE@en[GitHub - posthtml/posthtml-mixins: 📮 Mixins allow you to create reusable blocks of code.]], [TIME(.seen)[2024-09-26T14:16:32.000Z]] <https://github.com/posthtml/posthtml-mixins>

]REFS]

]FIG]


[FIG(data)[ [28] [[HTML要素概説]]

:[F[要素名]]:[CODE[import]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:IMPORT]]:
[CITE@en[GitHub - posthtml/posthtml-import: Import HTML Plugin]], 
[TIME(.seen)[2024-09-26T14:15:45.000Z]] <https://github.com/posthtml/posthtml-import>

]REFS]

]FIG]



[FIG(data)[ [26] [[HTML要素概説]]

:[F[要素名]]:[CODE[fetch]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:FETCH]]:
[CITE@en[GitHub - posthtml/posthtml-fetch: PostHTML plugin for fetching and displaying remote content.]], [TIME(.seen)[2024-09-26T13:57:17.000Z]] <https://github.com/posthtml/posthtml-fetch>

]REFS]

]FIG]


[FIG(data)[ [27] [[HTML要素概説]]

:[F[要素名]]:[CODE[get]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにおける [CODE[fetch]] の別名例にある。
[SRC[POSTHTML:MSO]]

]FIG]




[FIG(data)[ [23] [[HTML要素概説]]

:[F[要素名]]:[CODE[outlook]]
:[F[要素名]]:[CODE[not-outlook]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
:出典:
[REFS[

-
[DFN[POSTHTML:MSO]]:
[CITE@en[GitHub - posthtml/posthtml-mso: Makes writing Outlook conditionals in HTML emails easy.]], 
[TIME(.seen)[2024-09-26T13:08:48.000Z]] <https://github.com/posthtml/posthtml-mso>

]REFS]

]FIG]

[FIG(data)[ [25] [[HTML要素概説]]

:[F[要素名]]:[CODE[mso]]
:[F[要素名]]:[CODE[not-mso]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにおける
[CODE[outlook]], [CODE[not-outlook]]
の別名例に
[CODE[mso]], [CODE[not-mso]] 
がある。
[SRC[POSTHTML:MSO]]

]FIG]



[FIG(data)[ [24] [[HTML要素概説]]

:[F[要素名]]:[CODE[module]]
:[F[要素名]]:[CODE[content]]
:日付:[TIME[2024]]
:説明:
[[PostHTML]]
が
[[HTML]]
と称するものにある。
同名の他の提案とは異なる。
:出典:
[REFS[

-
[DFN[POSTHTML:MODULES]]:
[CITE@en[GitHub - posthtml/posthtml-modules: Modules Plugin]], 
[TIME(.seen)[2024-09-26T13:06:07.000Z]] <https://github.com/posthtml/posthtml-modules>

]REFS]

]FIG]

[31] 関連:
[[unifiedjs]]