HTML化

• 概要
• 平文
• 段落
• 横断的要素
  • ナビゲーションリンク
  • 総目次
• メタ要素
  • タイトル
  • サブタイトル
  • 付帯情報
  • 目次
  • 註記
• ブロック要素
  • 見出し
  • 箇条書き
  • 手順
  • 用語説明
  • 画像
  • 案内
  • 注意
  • コラム
  • 引用、引用元
  • コード
  • 変換済
  • 行範囲
• インライン要素
  • 註
  • リンク
  • 参照
  • 注目
  • 重要
  • 補足
  • 特記
  • 訂正
  • 上付き
  • 下付き
  • 縦中横
  • 傍点
  • ルビ
  • 範囲

概要

　yakumo記法から bltxt文書へ変換された後、HTML5へ変換するサンプルとして変換資材 thtmlが用意されています。
　詳細は resources/io/github/longfish801/yakumo 配下にある変換資材の各ファイルのコメントなどを参照してください。

　デフォルトのテンプレート default.htmlは変換対象と変換結果が一対一であることを前提としています。一対一にしない場合はテンプレートの記述を見直してください。

平文

　HTML文法上の特殊文字をそのまま使うことができます。
　以下のbltxt文書があったとします。

　もし、あのとき"あれ"があったなら。
　極上の<カレー>になっていたかもしれない。

　以下のHTMLに変換します。特殊文字を実体参照に置き換えます。

<p>　もし、あのとき&quot;あれ&quot;があったなら。<br/>
　極上の&lt;カレー&gt;になっていたかもしれない。</p>

段落

　bltxt文書の性質上、連続する行をひとつの段落とみなします。
　空行が段落区切りとなります。空行が複数あってもひとつの空行と同じ扱いになります。
　以下のbltxt文書があったとします。

　おいしいカレーを作るには隠し味が大切です。
　隠し味にもいろいろなものがあります。


　一般家庭で良く使われる隠し味を試してみましょう。

　以下のHTMLに変換します。
　改行は brタグを挿入します。段落は pタグで囲みます。

<p>　おいしいカレーを作るには隠し味が大切です。<br/>
　隠し味にもいろいろなものがあります。</p>

<p>　一般家庭で良く使われる隠し味を試してみましょう。</p>

　以下の行範囲タグ内では brタグのみ挿入（pタグなし）します。

• 見出し
• （箇条書きの）項目
• （用語説明の）用語
• （用語説明の）説明
• 画像
• （引用の）引用元

　以下の行範囲タグ内では改行コードのみ（brタグ、pタグなし）です。

• コード
• 変換済

　上記以外では brタグ、pタグを挿入します。

横断的要素

　複数の変換対象から横断的に生成する要素です。

ナビゲーションリンク

　他のページへのナビゲーションリンクを生成します。
　ページの順番は、変換スクリプトで変換結果キーを設定した順番です。

• 変換結果キーが "index"のとき
  • 上位コンテンツへのリンク
  • 次のページ（先頭ページ）へのリンク
  • 前のページ（最終ページ）へのリンク
• 変換結果キーが "index"以外のとき
  • 目次ページ(index.html)へのリンク
  • 次のページへのリンク
  • 前のページへのリンク

　たとえば変換結果キーの順番が [ "some1", "some2", "some3" ]で、現在の変換結果キーが "some2"のときには以下のリンクを出力します。

<a href="some1.html"><i class="bi bi-arrow-left-circle"></i></a>
<a href="index.html#tocAll"><i class="bi bi-arrow-up-circle"></i></a>
<a href="some3.html"><i class="bi bi-arrow-right-circle"></i></a>

総目次

　たとえば目次ページ（index.html）に各ページおよび各ページ内の見出しへのリンクを生成したいときに使用します。

　変換対象キー "some"に以下のタイトル、見出しが記述されていたとします。

【＃タイトル】カレーを食べよう
【＝見出し：1】おいしいカレーの作り方
【＝見出し：2】材料の準備
【＝見出し：3】牛の飼い方

　以下の HTMLを生成します。

<li class="nav-item toc-h1"><a href="some.html" class="nav-link">カレーを食べよう</a></li>
<li class="nav-item toc-h2"><a href="some.html#id2_1" class="nav-link">おいしいカレーの作り方</a></li>
<li class="nav-item toc-h3"><a href="some.html#id3_2" class="nav-link">材料の準備</a></li>
<li class="nav-item toc-h4"><a href="some.html#id4_3" class="nav-link">牛の飼い方</a></li>

メタ要素

タイトル

　タイトルは、含意タグで指定します。
　省略可能です。

【＃タイトル】円周率について

　以下のHTMLに変換します。
　タイトルの指定がないときはデフォルトで「（無題）」とします。

<h1>円周率について</h1>

サブタイトル

　サブタイトルは、含意タグで指定します。
　省略可能です。

【＃サブタイトル】著名な語呂合わせ

　以下のHTMLに変換します。

<li>著名な語呂合わせ</li>

付帯情報

　付帯情報として公開日、著者名を含意タグで指定します。
　省略可能です。

【＃公開日】2022.02.03
【＃著者名】山田太郎

　以下のHTMLに変換します。

<li>公開日 2022.02.03</li>
<li>山田太郎</li>

目次

　見出しから目次を生成します。
　以下のbltxt文書があったとします。

【＝見出し：1】おいしいカレーの作り方
【＝見出し：2】材料の準備
【＝見出し：3】牛の飼い方

　以下のHTMLに変換します。

<li class="nav-item ps-0"><a href="#id2_1" class="nav-link">おいしいカレーの作り方</a></li>
<li class="nav-item ps-1"><a href="#id3_2" class="nav-link">材料の準備</a></li>
<li class="nav-item ps-2"><a href="#id4_3" class="nav-link">牛の飼い方</a></li>

註記

　註は文中タグで、註記は含意範囲タグで記述します。
　一番目の属性に、紐付けのため共通する文字列を指定してください。
　以下のbltxt文書があったとします。

　XML【註：XML】をHTML【註：HTML】に変換します。

【＊註記：XML】
　eXtensible Markup Languageの略です。
【註記＊】
【＊註記：HTML】
　Hyper Text Markup Languageの略です。
【註記＊】

　以下のHTMLに変換します。

<dt><a name="t1" href="#f1">[*1]</a></dt>
<dd>　eXtensible Markup Languageの略です。</dd>
<dt><a name="t2" href="#f2">[*2]</a></dt>
<dd>　Hyper Text Markup Languageの略です。</dd>

ブロック要素

見出し

　行タグで見出しを表現できます。
　属性にレベルを半角数字 1～5で指定してください。

【＝見出し：1】おいしいカレーの作り方
【＝見出し：2】材料の準備
【＝見出し：3】牛の飼い方

　以下のHTMLに変換します。
　タイトルを h1とする関係上、レベル1が h2、レベル2が h3……となります。
　目次からページ内リンクで移動できるよう、aタグを挿入します。
　name属性は、bltxt文書を XML化したときの snum属性を利用します。
　また行末に、ヘッダ(#header)へ戻るためのリンクを付与します。

<h2><a name="id2_1"></a>おいしいカレーの作り方 <div class="float-end fs-6"><a href="#header"><i class="bi bi-chevron-double-up"></i></a></div></h2>
<h3><a name="id3_2"></a>材料の準備 <div class="float-end fs-6"><a href="#header"><i class="bi bi-chevron-double-up"></i></a></div></h3>
<h4><a name="id4_3"></a>牛の飼い方 <div class="float-end fs-6"><a href="#header"><i class="bi bi-chevron-double-up"></i></a></div></h4>

　二番目の属性に見出しの別名を指定することができます。省略可です。
　これはページ内リンクに用います。
　詳細は 参照 を参照してください。

【＝見出し：1：ごちさま】ごちそうさまでした

箇条書き

　行範囲タグで箇条書きを表現できます。

【－箇条書き】
【－項目】
じゃがいも
【項目－】
【－項目】
ニンジン
【項目－】
【－項目】
玉ねぎ
【－箇条書き】
【－項目】
刻むときは注意。
涙がでます。
【項目－】
【箇条書き－】
【項目－】
【－項目】
カレー粉
【－箇条書き】
【－項目】
ジャワカレー
【項目－】
【－項目】
バーモンドカレー
【項目－】
【箇条書き－】
【項目－】
【箇条書き－】

　以下のHTMLに変換します。

<ul>
<li>じゃがいも</li>
<li>ニンジン</li>
<li>玉ねぎ
	<ul>
	<li>刻むときは注意。<br/>
	涙がでます。</li>
	</ul></li>
<li>カレー粉
	<ul>
	<li>ジャワカレー</li>
	<li>バーモンドカレー</li>
	</ul></li>
</ul>

手順

　行範囲タグで手順を表現できます。

【－手順】
【＝項目】まずマスクをつけます。
【－項目】
手をよく洗ってください。
指と指の間や爪の隙間もね。
【項目－】
【＝項目】それでは、いただきます！
【手順－】

　以下のHTMLに変換します。

<ol>
<li>まずマスクをつけます。</li>
<li>手をよく洗ってください。<br/>
指と指の間や爪の隙間もね。</li>
<li>それでは、いただきます！</li>
</ol>

用語説明

　行範囲タグ、行タグで用語説明を表現できます。

【－用語説明】
【＝用語】甘口
【＝説明】いちばん辛みが穏やか。子供向け。
【＝用語】中辛
【＝説明】中くらいの辛さ。一般的。
【＝用語】大辛
【＝説明】とても辛い。マニアック。
【用語説明－】

　以下のHTMLに変換します。

<dl>
<dt>甘口</dt>
<dd>いちばん辛みが穏やか。子供向け。</dd>
<dt>中辛</dt>
<dd>中くらいの辛さ。一般的。</dd>
<dt>大辛</dt>
<dd>とても辛い。マニアック。</dd>
</dl>

画像

　行タグで画像を表現できます。
　属性に画像の説明、画像ファイルへのパスを指定してください。

【＝画像：猫ちゃん：cutecat.png】

　画像にキャプションを付与することもできます。

【＝画像：猫ちゃん：cutecat.png】猫ちゃん、可愛い～

　以下のHTMLに変換します。

<figure class="text-center">
<a href="cutecat.png"><img src="cutecat.png" class="img-fluid" alt="猫ちゃん"></a>
<figcaption>猫ちゃん、可愛い～</figcaption>
</figure>

案内

　行範囲タグで案内を表現できます。

【－案内】
　日本人の四割は血液型がＯ型です。
【案内－】

　以下のHTMLに変換します。
　asideタグを生成します。

<aside class="panel panel-primary">
<p>　日本人の四割は血液型がＯ型です。</p>
</aside>

　第一属性に小見出しを指定することもできます。

【－案内：８月３１日はなんの日？】
　８月３１日は野菜の日です。
　野菜を食べましょう。
【案内－】

　以下のHTMLに変換します。

<aside class="alert alert-success" role="alert">
<header class="alert-heading text-center"><i class="bi bi-info-circle-fill"></i> ８月３１日はなんの日？</header>
<p>　８月３１日は野菜の日です。<br/>
　野菜を食べましょう。</p>
</aside>

注意

　行範囲タグで注意喚起のための案内を表現できます。
　第一属性に小見出しを指定することもできます。

【－注意：中火とは】
　中火とは、フライパンの底に炎の先端がちょうど届くくらいの状態を指します。
【注意－】

　以下のHTMLに変換します。
　asideタグ（class属性値は"attention"）を生成します。

<aside class="alert alert-danger" role="alert">
<header class="alert-heading text-center"><i class="bi bi-exclamation-triangle-fill"></i> 中火とは</header>
<p>　中火とは、フライパンの底に炎の先端がちょうど届くくらいの状態を指します。</p>
</aside>

コラム

　行範囲タグでコードを表現できます。

【－コラム】
　飲むヨーグルトは美味しい。
　飲まないヨーグルトは味がしない。
【コラム－】

　以下のHTMLに変換します。
　スタイルシートと組み合わせることで期待する表示ができます。

<div class="column">
<p>　飲むヨーグルトは美味しい。<br/>
　飲まないヨーグルトは味がしない。</p>
</div>

引用、引用元

　行範囲タグで引用を表現できます。
　必要に応じて行タグで引用元を記述できます。

【－引用】
　山路を登りながら、こう考えた。
　智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。
【＝引用元】夏目漱石『草枕』
【引用－】

　以下のHTMLに変換します。

<figure>
<blockquote class="blockquote p-3">
<p>　山路を登りながら、こう考えた。<br/>
　智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。とかくに人の世は住みにくい。</p>
</blockquote>
<figcaption class="blockquote-footer text-end">
<cite>夏目漱石『草枕』</cite>
</figcaption>
</figure>

コード

　行範囲タグでコードを表現できます。

【－コード】
println "Hello, World!";
println "This is sample code of how to hello to all of the world, which is executed " + Date().format("yyyy-MM-dd'T'HH:mm:ss.SSSZ");
【コード－】

　以下のHTMLに変換します。
　preタグを生成します。

<pre class="code px-3"><code>println &quot;Hello, World!&quot;;
println &quot;This is sample code of how to hello to all of the world, which is executed &quot; + Date().format(&quot;yyyy-MM-dd'T'HH:mm:ss.SSSZ&quot;);</code></pre>

変換済

　yakumo記法が対応していない変換対象について、変換後の内容を記述します。
　属性には形式名を記述してください。HTMLならば "html"です。

【－変換済：html】
<table>
<tr><th>好きなおかず</th><th>好きなごはん</th></tr>
<tr><td>カレー</td><td>ライス</td></tr>
</table>
【変換済－】

　以下のように、なにも加工せずにそのまま出力します。
　なお、形式が一致しない場合はなにも出力しません。

<table>
<tr><th>好きなおかず</th><th>好きなごはん</th></tr>
<tr><td>カレー</td><td>ライス</td></tr>
</table>

行範囲

　特殊な表示をしたい行の範囲を表します。
　属性には範囲の種類を指定してください。

【－行範囲：big】
　宵越しのカレーは美味しい。
【行範囲－】

　以下のHTMLに変換します。
　スタイルシートと組み合わせることで期待する表示ができます。
　class属性の値には属性に指定した値が使われます。

<div class="big">
<p>　宵越しのカレーは美味しい。</p>
</div>

インライン要素

註

　註は文中タグで記述してください。
　一番目の属性に、紐付けのため共通する文字列を指定してください。
　註に対する註記の書き方については 註記 を参照してください。

　XML【註：XML】をHTML【註：HTML】に変換します。

　以下のHTMLに変換します。

<p>　XML<sup><a id="f1" href="#t1">*1</a></sup>をHTML<sup><a id="f2" href="#t2">*2</a></sup>に変換します。</p>

リンク

　以下のbltxt文書があったとします。

　詳しくは【｜リンク：https://www.google.com/】ネット検索【リンク｜】してください。
　【｜リンク：https://www.google.com/】https://www.google.com/【リンク｜】でネット検索できます。

　以下のHTMLに変換します。

<p>　詳しくは<a href="https://www.google.com/">ネット検索</a>してください。<br/>
　<a href="https://www.google.com/">https://www.google.com/</a>でネット検索できます。</p>

参照

　見出しへのリンクを作成できます。

　タグ内にリンク先としたい見出しの文字列を記述してください。
　この場合は属性は不要です。

　もしくは一番目の属性にリンク先を指定します。
　以下の三種類を指定できます。

• 全角シャープ（＃）＋見出し文字列あるいは別名
  • 同じ変換対象上の見出しにリンクします。
• 変換結果キー
  • 他の変換結果にリンクします。
• 変換結果キー＋全角シャープ（＃）＋見出し文字列あるいは別名
  • 他の変換結果上の見出しにリンクします。

　以下のbltxt文書があったとします。

【＝見出し：1】おいしいカレーの作り方
　もう満腹ですか？ それでは【｜参照：＃ごちさま】さようなら【参照｜】。

【＝見出し：1：ごちさま】ごちそうさまでした
　詳細は【｜参照】おいしいカレーの作り方【参照｜】を参照してください。

　以下のHTMLに変換します。

<h2><a name="id2_1"></a>おいしいカレーの作り方 <div class="float-end fs-6"><a href="#header"><i class="bi bi-chevron-double-up"></i></a></div></h2>

<p>　もう満腹ですか？ それでは<a href="#id2_2">さようなら</a>。</p>

<h2><a name="id2_2"></a>ごちそうさまでした <div class="float-end fs-6"><a href="#header"><i class="bi bi-chevron-double-up"></i></a></div></h2>

<p>　詳細は<a href="#id2_1">おいしいカレーの作り方</a>を参照してください。</p>

　変換対象キーは変換資材 thmlの clmapでファイル名などに置き換えます。デフォルトでは変換対象キーの後ろに拡張子htmlを付与した文字列となります。
　変換対象と変換結果が一対一ではない場合はクロージャパス /thtml.crosscut#filename上のクロージャを上書きしてください。

注目

　以下のbltxt文書があったとします。

　危ない！ それは【｜注目】自爆スイッチ【注目｜】だ！

　以下のHTMLに変換します。
　ブラウザでの表示は .attentionセレクタの定義に依存します。

<p>　危ない！ それは<span class="attention">自爆スイッチ</span>だ！</p>

重要

　以下のbltxt文書があったとします。

　間違えて【｜重要】自爆スイッチ【重要｜】を押さないでください。

　以下のHTMLに変換します。
　一般的なブラウザでは太字で表示されます。

<p>　間違えて<strong>自爆スイッチ</strong>を押さないでください。</p>

補足

　以下のbltxt文書があったとします。

　もちろん本当【｜補足】かもしれない【補足｜】ですよ。

　以下のHTMLに変換します。
　一般的なブラウザでは小さめの文字で表示されます。

<p>　もちろん本当<small>かもしれない</small>ですよ。</p>

特記

　以下のbltxt文書があったとします。

　まあ、真実は【｜特記】in the bush【特記｜】ですが。

　以下のHTMLに変換します。
　一般的なブラウザでは斜体で表示されます。

<p>　まあ、真実は<i>in the bush</i>ですが。</p>

訂正

　以下のbltxt文書があったとします。

　富士山の標高は【｜訂正】３７７７メートル【訂正｜】３７７６メートルです。

　以下のHTMLに変換します。
　一般的なブラウザでは打消し線で表示されます。

<p>　富士山の標高は<s>３７７７メートル</s>３７７６メートルです。</p>

上付き

　以下のbltxt文書があったとします。

　まあね、大人【｜上付き】2【上付き｜】があるんですよ。

　以下のHTMLに変換します。
　一般的なブラウザでは上付き文字で表示されます。

<p>　まあね、大人<sup>2</sup>があるんですよ。</p>

下付き

　以下のbltxt文書があったとします。

　人生にはH【｜下付き】2【下付き｜】Oが不可欠だ。

　以下のHTMLに変換します。
　一般的なブラウザでは下付き文字で表示されます。

<p>　人生にはH<sub>2</sub>Oが不可欠だ。</p>

縦中横

　以下のbltxt文書があったとします。

　シェイクスピア全集の第【｜縦中横】10【縦中横｜】巻に記述されています。

　HTML5は縦書きや縦中横には対応していないため、HTMLタグへの変換はしません。

<p>　シェイクスピア全集の第10巻に記述されています。</p>

傍点

　以下のbltxt文書があったとします。

　まだ【｜傍点】午前三時【傍点｜】じゃないか。

　以下のHTMLに変換します。
　ブラウザでの表示は .dotセレクタの定義に依存します。

<p>　まだ<span class="dot">午前三時</span>じゃないか。</p>

ルビ

　以下のbltxt文書があったとします。

　【｜ルビ：すいとう】出納【ルビ｜】係は言った。

　以下のHTMLに変換します。
　一般的なブラウザではルビとして表示されます。

<p>　<ruby>出納<rp>［</rp><rt>すいとう</rt><rp>］</rp></ruby>係は言った。</p>

範囲

　行内で特殊な表示をしたい範囲を表します。
　属性には範囲の種類を指定してください。

　今夜は【｜範囲：small】チキンカレー【範囲｜】よ。

　以下のHTMLに変換します。
　スタイルシートと組み合わせることで期待する表示ができます。
　属性に指定した値は class属性に使われます。

<p>　今夜は<span class="small">チキンカレー</span>よ。</p>