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

こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。

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>

この記号は “ と ” です。

記号変換

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に戻ります。

脚注

リンクをフッターにまとめた脚注は [数字] と 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」

NotePM

NotePM（ノートピーエム） は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。

NotePMの特徴

マニュアル作成、バージョン管理、社外メンバー共有
強力な検索機能。PDFやExcelの中身も全文検索
社内FAQ・質問箱・社内ポータルとしても活用できる
銀行、大学も導入している高度なセキュリティ。安全に情報共有できる

URL: https://notepm.jp/

NotePMについて詳しく見る＞

段落（pタグ）

改行（brタグ）

引用

記号変換

略語

大文字の単語

見出し

引用

コード

リスト

脚注

表・テーブル

文字装飾

リンク

画像

言語要素

CSSとの連携

変換しない指定

HTMLの利用

preタグの利用

まとめ