![](https://wp.notepm.jp/wp-content/uploads/2021/07/textile.png)
社内のナレッジ共有・マニュアル作成を成功させるツール「NotePM」→今すぐ無料で試してみる
こんにちは。マニュアル作成・ナレッジ共有ツール「NotePM」ブログ編集局です。
Markdownが開発者の間では有名ですが、他にも記法は存在します。今回はその中の一つ、Textileの書き方を紹介します。内容はPromptworks Guide to Textile | Promptworks | Philadelphiaに沿ったものとなっていますが、Texitleの変換エンジンによっては利用できない記法があるかも知れませんのでご注意ください。
目次
段落(pタグ)
段落(pタグ)を使った文章を書く場合には改行を空けます。
これは段落です。これも段落です。
p.
を行頭に書くことでも表現できます。
p. これは段落です。p. これも段落です。
このどちらも次のようなHTMLになります。
これは段落です。これも段落です。
divタグにしたい場合には div.
を使います。
div. これはdivタグで囲まれます。
改行(brタグ)
改行(brタグ)にしたい場合には、行間を空けなければbrタグになります。
これはbrで改行されます。これはbrで改行されます。
これは次のようなHTMLになります。
これはbrで改行されます。これはbrで改行されます。
引用
ダブルクオート "
を使うと、 “
になります。
"引用文です"
この文章が次のようになります。
“引用文です”
この記号は “
と ”
です。
記号変換
Textileでは次のような文字変換ルールがあります。
元の文字 | 変換後 |
---|---|
— | — |
… | … |
(数字) x (数字) | (数字) × (数字) |
(r) | ® |
(tm) | ™ |
(c) | © |
略語
略語を示すabbrタグを使う場合には 文字(説明)
とします。
CTR(Click Through Rate)
HTMLは次のようになります。
title="Click Through Rate"class="caps"CTR
大文字の単語
大文字で書かれた英単語はspanタグで囲まれます。
NOTE
HTMLは次のようになります。
class="caps"NOTE
見出し
見出しは h1.
から h6.
まで利用できます。
h1. 見出し1h2. 見出し2
HTMLは次のようになります。
見出し1見出し2
引用
印象(Block quotations)は bq. を使います。
bq. 引用文
HTMLは次のようになります。
引用文
さらに bq.(URL)
とすることで cite
要素にURLが入力されます。
bq.https://notepm.jp/ 引用文
HTMLは次のようになります。
cite="https://notepm.jp/"引用文
コード
コードは bc.
を使います。
bc. # Output "I love Ruby"say = "I love Ruby"puts say
HTMLは次のようになります。
# Output "I love Ruby"say = "I love Ruby"puts say
コード中に空の行を含む場合には bc..
を使います。この場合、次に p.
のような指定があるまでコード行と見なされます。
bc.. # Output "I love Ruby"say = "I love Ruby"puts say# Output "I *LOVE* RUBY"say['love'] = "*love*"puts say.upcasep. ここはTextileに戻ります。
リスト
リストは次の3パターンが用意されています。
*
・
のリスト#
数字のリスト
*
や #
の個数によってリストの深さを設定できます。
* リスト1** リスト1-1*** リスト1-1-1** リスト1-2* リスト2** リスト2-1
この他、定義リスト(dl/dt/dd)も利用できます。
- コーヒー := ホット
- 紅茶 := ホット&アイス
HTMLは次のようになります。
コーヒーホット紅茶ホット&アイス
脚注
リンクをフッターにまとめた脚注は [数字]
と 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は次のようになります。
42.7% of all statistics are made up on the spot.class="footnote"id="fnr1"href="#fn1"1class="footnote" id="fn1"href="#fnr1"1href="http://en.wikiquote.org/wiki/Steven_Wright"Dr. Katz
表・テーブル
Textileにおけるテーブルは |_.
でヘッダー、 |
でセルを区切ります。
|_. 見出し1 |_. 見出し2 |_. 見出し3 || 列1 | 列2 | 列3 |
HTMLは次のようになります。
見出し1見出し2見出し3列1列2列3
セル内での配置指定は次のように行います。
|=. センタリング ||>. 右寄せ ||<. 左寄せ |
さらにセルの結合も指定できます。
|\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は次のようになります。
href="https://notepm.jp/"NotePM - テレワーク時代のナレッジ共有ツール (社内wiki)
ブラケット []
で囲む書き方もあります。
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は次のようになります。
class="my-class" href="https://notepm.jp/"NotePM - テレワーク時代のナレッジ共有ツール (社内wiki)
画像
画像は !URL(タイトルとalt)!
という形式になります。
!https://notepm.jp/assets/img/logo_h_on.svg(NotePMのロゴ)!
HTMLは次のようになります。
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は次のようになります。
lang="ja"ここに本文
CSSとの連携
クラス名を追加する場合には タグ(クラス名). 文章
という書き方をします。
p(my-class). ここに本文
HTMLは次のようになります。
class="my-class"ここに本文
IDは #ID名
で指定できます。
p(my-class#myId). ここに本文
HTMLは次のようになります。
class="my-class" id="myId"ここに本文
スタイルを詳細に設定する場合には {}
内でスタイル設定を記述します。
p{color:blue;letter-spacing:.5em}. ここに本文
HTMLは次のようになります。
style="color:blue;letter-spacing:.5em"ここに本文
テキストの右寄せ、左寄せなどは次のように指定します。
書き方 | 意味 | 例 |
---|---|---|
< | 左寄せ | 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 blockis displayed in a fixed-width
改行を含む場合には pre..
を使います。この場合も他と同じく次に p.
のような記述があるまでpreタグの内容として適用されます。
pre.. All monospacedEven the blank lines
まとめ
Textileは記法が豊富で、かつHTMLでの表現を考慮したクラスやスタイル指定もできるようになっています。記法としてはシンプルなので、書き方はすぐに覚えられそうです。Markdownと比べるとテーブルなどの表現が詳細に行える印象です。
NotePM(ノートピーエム) は、Webで簡単にマニュアル作成できて、強力な検索機能でほしい情報をすぐに見つけられるサービスです。さまざまな業界業種に導入されている人気サービスで、大手IT製品レビューサイトでは、とくに『使いやすいさ・導入しやすさ』を高く評価されています。
NotePMの特徴
- マニュアル作成、バージョン管理、社外メンバー共有
- 強力な検索機能。PDFやExcelの中身も全文検索
- 社内FAQ・質問箱・社内ポータルとしても活用できる
- 銀行、大学も導入している高度なセキュリティ。安全に情報共有できる
URL: https://notepm.jp/