Textile記法の書き方（軽量マークアップ言語）

2024年11月13日（水） Markdown

 

Markdownが開発者の間では有名ですが、他にも記法は存在します。今回はその中の一つ、Textileの書き方を紹介します。内容はPromptworks Guide to Textile | Promptworks | Philadelphiaに沿ったものとなっていますが、Texitleの変換エンジンによっては利用できない記法があるかも知れませんのでご注意ください。

Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」

NotePMを無料で試してみる

 

段落（pタグ）

段落（pタグ）を使った文章を書く場合には改行を空けます。

これは段落です。

 

これも段落です。






p. を行頭に書くことでも表現できます。





p. これは段落です。


 

p. これも段落です。








このどちらも次のようなHTMLになります。





<p>これは段落です。</p>


 

<p>これも段落です。</p>








divタグにしたい場合には div. を使います。





div. これはdivタグで囲まれます。








Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




改行（brタグ）


改行（brタグ）にしたい場合には、行間を空けなければbrタグになります。





これはbrで改行されます。


これはbrで改行されます。








これは次のようなHTMLになります。





<p>


これはbrで改行されます。<br />


これはbrで改行されます。<br />


</p>








引用


ダブルクオート " を使うと、 “ になります。





“引用文です“








この文章が次のようになります。





<p>


“引用文です”


</p>








この記号は &#8220; と &#8221; です。

Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




記号変換


Textileでは次のような文字変換ルールがあります。





元の文字
変換後






—
—




…
…




(数字) x (数字)
(数字) × (数字)




(r)
®




(tm)
™




(c)
©






略語


略語を示すabbrタグを使う場合には 文字(説明) とします。





CTR(Click Through Rate)








HTMLは次のようになります。





<p>


<abbr title=“Click Through Rate”>


<span class=“caps”>CTR</span>


</abbr>


</p>








Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




大文字の単語


大文字で書かれた英単語はspanタグで囲まれます。





NOTE








HTMLは次のようになります。





<p>


<span class=“caps”>NOTE</span>


</p>








見出し


見出しは h1. から h6. まで利用できます。





h1. 見出し1


h2. 見出し2








HTMLは次のようになります。





<h1>見出し1</h1>


<h2>見出し2</h2>








Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを詳しく見る




引用


印象（Block quotations）は bq. を使います。





bq. 引用文








HTMLは次のようになります。





<blockquote>


<p>


 引用文


</p>


</blockquote>








さらに bq.(URL) とすることで cite 要素にURLが入力されます。





bq.https://notepm.jp/ 引用文








HTMLは次のようになります。





<blockquote cite=“https://notepm.jp/”>


<p>


 引用文


</p>


</blockquote>








コード


コードは bc. を使います。





bc. # Output “I love Ruby”


say = “I love Ruby”


puts say








HTMLは次のようになります。





<pre>


<code>


 # Output “I love Ruby”


 say = “I love Ruby”


 puts say


</code>


</pre>








コード中に空の行を含む場合には bc.. を使います。この場合、次に p. のような指定があるまでコード行と見なされます。





bc.. # Output “I love Ruby”


say = “I love Ruby”


puts say


 

# Output “I *LOVE* RUBY”


say[‘love’] = “*love*”


puts say.upcase


 

p. ここはTextileに戻ります。








Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを詳しく見る




リスト


リストは次の3パターンが用意されています。

    

  • *
    
・ のリスト
    • 

  • #
    
数字のリスト
    • 



* や # の個数によってリストの深さを設定できます。





* リスト1


** リスト1-1


*** リスト1-1-1


** リスト1-2


* リスト2


** リスト2-1








この他、定義リスト（dl/dt/dd）も利用できます。

    

  • コーヒー := ホット
    • 

  • 紅茶 := ホット&アイス
    • 



HTMLは次のようになります。





<dl>


<dt>コーヒー</dt>


<dd>ホット</dd>


<dt>紅茶</dt>


<dd>ホット&amp;アイス</dd>


</dl>








脚注


リンクをフッターにまとめた脚注は [数字] と fn(数字). "タイトル":URL の組み合わせで定義します。





42.7% of all statistics are made up on the spot.[1]


 

fn1. “Dr. Katz”:http://en.wikiquote.org/wiki/Steven_Wright








HTMLは次のようになります。





<p>


 42.7% of all statistics are made up on the spot.<sup


class=“footnote”


id=“fnr1”




><a href=“#fn1”>1</a></sup



>

</p>


<p class=“footnote” id=“fn1”>


<a href=“#fnr1”><sup>1</sup></a>


<a href=“http://en.wikiquote.org/wiki/Steven_Wright”>Dr. Katz</a>


</p>










Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




表・テーブル


Textileにおけるテーブルは |_. でヘッダー、 | でセルを区切ります。





|_. 見出し1 |_. 見出し2 |_. 見出し3 |


| 列1 | 列2 | 列3 |








HTMLは次のようになります。





<table>


<tr>


<th>見出し1</th>


<th>見出し2</th>


<th>見出し3</th>


</tr>


 

<tr>


<td>列1</td>


<td>列2</td>


<td>列3</td>


</tr>


</table>








セル内での配置指定は次のように行います。





|=. センタリング |


|>. 右寄せ |


|<. 左寄せ |








さらにセルの結合も指定できます。





|\2. 横に2列 |


| 列1 | 列2 |












|/2. 縦に2行 | 行1 |


| 行2 |








背景色の指定はスタイルシートのように記述します。





{background:#f00}. | 列1-1 | 列1-2 | 列1-3 |


| 列2-1 | 列2-2 | 列2-3 |








文字装飾


太字や斜体などを利用する場合には、次の表を参考にしてください。





Textile
内容






*文字*
strongタグ




_文字_
emタグ




**文字**
bタグ




__文字__
iタグ




??文字??
citeタグ




-文字-
delタグ




+文字+
insタグ




~文字~
subタグ




^文字^
supタグ






この他タグの挿入もできます。





Textile
内容






%(myclass)文字%
文字




@文字@
文字






Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




リンク


"文字":URL という形式でリンクになります。





“NotePM – テレワーク時代のナレッジ共有ツール (社内wiki)”:https://notepm.jp/








HTMLは次のようになります。





<a href=“https://notepm.jp/”>NotePM – テレワーク時代のナレッジ共有ツール (社内wiki)</a>








ブラケット [] で囲む書き方もあります。





This is a link to a [“Wikipedia article about Textile”:http://en.wikipedia.org/wiki/Textile_(markup_language)].


 

[redcloth]http://redcloth.org








aタグにクラスを付ける場合には (クラス名) を最初に付けます。





“(my-class). NotePM – テレワーク時代のナレッジ共有ツール (社内wiki)”:https://notepm.jp/








HTMLは次のようになります。





<a class=“my-class” href=“https://notepm.jp/”>NotePM – テレワーク時代のナレッジ共有ツール (社内wiki)</a>








画像


画像は !URL(タイトルとalt)! という形式になります。





!https://notepm.jp/assets/img/logo_h_on.svg(NotePMのロゴ)!








HTMLは次のようになります。





div class="ace_line"><img src="https://notepm.jp/assets/img/logo_h_on.svg" alt="NotePMのロゴ" title="NotePMのロゴ" />








さらに画像をリンクにする場合には :URL を追加します。





!https://notepm.jp/assets/img/logo_h_on.svg(NotePMのロゴ)!https://notepm.jp/








Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




言語要素


言語要素であるlangを使う場合には [言語] を使います。





p[ja]. ここに本文








HTMLは次のようになります。





<p lang=“ja”>


ここに本文


</p>








CSSとの連携


クラス名を追加する場合には タグ(クラス名). 文章 という書き方をします。





p(my-class). ここに本文








HTMLは次のようになります。





<p class=“my-class”>


ここに本文


</p>








IDは #ID名 で指定できます。





p(my-class#myId). ここに本文








HTMLは次のようになります。





<p class=“my-class” id=“myId”>


ここに本文


</p>








スタイルを詳細に設定する場合には {} 内でスタイル設定を記述します。





p{color:blue;letter-spacing:.5em}. ここに本文








HTMLは次のようになります。





<p style=“color:blue;letter-spacing:.5em”>


ここに本文


</p>








テキストの右寄せ、左寄せなどは次のように指定します。





書き方
意味
例






<
左寄せ
p<. 左寄せ




>
右寄せ
p>. 右寄せ




=
中央寄せ
p=. 中央寄せ




<>
均等割り付け
p<>. 均等割り付け






インデントは次のように指定します。括弧の数でemの数が変わります。





書き方
意味
例






(
padding-left
p(. padding-left: 1emが追加される




((
padding-left
p(. padding-left: 2emが追加される




)
padding-right
p). padding-right: 1emが追加される




))
padding-right
p)). padding-right: 2emが追加される




()
padding-left & padding-right
p(). padding-leftとpadding-rightに1emが設定される




(())
padding-left & padding-right
p(()). padding-leftとpadding-rightに2emが設定される






Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを無料で試してみる




変換しない指定


<notextile></notextile> を使ってTextile記法を適用しない部分を指定できます。

以下のように notextile. を行頭で利用することで指定もできます。





notextile. 変換しない本文 *装飾*








notextile.. を使うと、次に p. のような記述がある部分までTextileの適用外になります。

HTMLの利用


Textileの中では基本的に自由にHTMLを記述できます。

Markdownで簡単にドキュメントを作成・管理できるツール「NotePM」



NotePMを詳しく見る




preタグの利用


preタグは pre. で利用できます。コードブロックに似ていますが、codeタグが使われない点が異なります。





pre. Text in a pre block


is displayed in a fixed-width








改行を含む場合には pre.. を使います。この場合も他と同じく次に p. のような記述があるまでpreタグの内容として適用されます。





pre.. All monospaced


 

Even the blank lines








まとめ


Textileは記法が豊富で、かつHTMLでの表現を考慮したクラスやスタイル指定もできるようになっています。記法としてはシンプルなので、書き方はすぐに覚えられそうです。Markdownと比べるとテーブルなどの表現が詳細に行える印象です。

NotePM