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

2021年07月10日(土) Markdown

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

段落(pタグ)

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

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

p.
p.

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

<p></p>
<p></p>

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

div. div

改行(brタグ)

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

br
br

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

<p>
br<br />
br<br />
</p>

引用

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

""

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

<p>
</p>

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

記号変換

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

元の文字 変換後
(数字) x (数字) (数字) × (数字)
(r) ®
(tm)
(c) ©

略語

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

CTR(Click Through Rate)

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

<p>
<abbr title="Click Through Rate">
<span class="caps">CTR</span>
</abbr>
</p>

大文字の単語

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

NOTE

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

<p>
<span class="caps">NOTE</span>
</p>

見出し

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

h1. 1
h2. 2

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

<h1>1</h1>
<h2>2</h2>

引用

印象(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

リスト

リストは次の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>

表・テーブル

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)文字% 文字
@文字@ 文字

リンク

"文字":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は次のようになります。

<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/

言語要素

言語要素である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が設定される

変換しない指定

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

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

notextile. **

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

HTMLの利用

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

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(ノートピーエム) は、ナレッジ共有に特化した社内版ウィキペディアです。検索に強く、情報を整理しやすいのが特徴です。3,000社以上に導入され、とくに『使いやすいさ・導入しやすさ』の点で高く評価されています。「ほしい情報を探すのが大変」「社内のナレッジ共有が上手くいっていない」とお悩みの方は、NotePMの無料トライアル をお試しください。

NotePMの資料請求はこちら