TiddlyWikiの書式(WikiText): seed TW

TiddlyWikiの書式(WikiText)

WikiTextについて

TWにおけるHTMLなどを楽に書くための書式です

いっぱいありますが一部は編集のツールバーにありますし、実はHTMLタグも使えるので気楽に始めてください

最初に

空行(2連続改行)が一つの区切りのようになっています
リストとか表とか、ちゃんと書いたはずなのにうまく行かないなと思ったら前後に空行を入れてみてください
改行の不要なものもあります(inlineな物)

HTMLタグ(HTML in WikiText)

上述の通り実はHTMLタグを直接書き込むことができます

また、属性にTextReferenceやマクロの結果やフィルターの結果などを渡すこともできます
htmlタグの内部でも他と同じように空行の有無が処理に影響を与えるようです？

段落(Paragraphs in WikiText)

pタグ
他の書式と一致せず、前後を空行または書き始めや書き終わりに挟まれた文章の塊は段落になります

普通に改行するだけでは改行されません
改行を2回以上連続で行う(空行を1つ以上入れる)とそれを区切りに段落として認識され、見た目上改行されます

ここから段落１
ここは同じ段落なので改行されません
まだ
ここまで段落１

ここは空行が入ったので段落２


ここは段落３

ここから段落１ここは同じ段落なので改行されませんまだここまで段落１

ここは空行が入ったので段落２

ここは段落３

自動改行機能(Hard Linebreaks in WikiText)

改行に自動的にbrタグを挿入してくれます

"""
こう書きます
編集時の改行がそのまま閲覧時の改行になります


便利
"""

こう書きます
編集時の改行がそのまま閲覧時の改行になります

便利

見出し(Headings in WikiText)

先頭が1～6個の!で始まる行は見出しh1～h6タグです

!見出し(h1)
!!見出し(h2)
!!!見出し(h3)
!!!!見出し(h4)
!!!!!見出し(h5)
!!!!!!見出し(h6)

!!.myClass このようにクラスも付けられるようです

実際の表示は邪魔なので省略します

装飾(Formatting in WikiText)

`''太字''`	太字
`//斜体//`	斜体
`__下線__`	下線
`~~打消し線~~`	~~打消し線~~

上付き文字、下つき文字

`x^^2^^`	x²
`H,,2,,O`	H₂O

リンク(Linking in WikiText)

Tiddler内のリンクと外部へのリンク。LinkWidgetもあります

シンプルなリンクの例：[[tiddlerのタイトル]]

リンクのテキストを変える例：[[リンク用テキスト|tiddlerのタイトル]]

シンプルなリンクの例：tiddlerのタイトル

リンクのテキストを変える例：リンク用テキスト

入力を楽にするために編集画面のツールバーにこのようなアイコンのボタンがあります
検索のように文字列を入力してリンク先にしたいタイトルをクリックで作れます

また、先頭が大文字から始まり、先頭以外にも大文字があるアルファベットの文字列は自動的にリンクとして扱われます
リンクにしたくない場合は個別にその文字列の直前に~をつける方法と
サイドバーののSettingsタブのCamel Case Wiki Linksをオフにする方法があります

TW外へのリンク

TW外へのリンクもリンク対象がhttp://～やfile://～のような形式なら同じ書き方で機能します
それ以外の場合(相対パスとか)の場合、Tiddlerのタイトルと解釈されてしまうため[ext[リンク先]]のようにして外へのリンクだと明示する必要があります
通常のリンクと同様にリンク用のテキストの設定も可能です

画像(Images in WikiText)

ImageWidgetもあります
画像のTiddlerのタイトルを指定してもURLを指定しても機能します

SVGなどはこれではなくTransclusionを使います

[img[tw5favicon.ico]]

[img width="64px" height="64px" alt="tw5icon" class="myClass" [tooltipの例|tw5favicon.ico]]

表(Tables in WikiText)

表ですが、セルを揃えるためのスペースをあまり許容しない作りになっています

Markdownプラグインを導入してそちらの表を使う方法もあります
詳細は下にある「別のTiddlerタイプ形式での埋め込み(Typed Blocks in WikiText)」
スペースでセルの位置を揃えてくれるエディターと併用すると編集しやすいです

|い|ろ|
|は|に|

|!見出しの例|ろ|
|!です|に|


|captionタグ|c
|行ごと|見出しにする|h
|は|に|

い	ろ
は	に

見出しの例	ろ
です	に

captionタグ
行ごと	見出しにする
は	に

各セルの値の左右のスペース

値の左右にスペースがあるとスペースのない方への揃えになります両側にスペースがあった場合、中央揃えになります

各セルの値の最初の1文字

揃え

^	上揃え
,	下揃え

上下揃えと左右の揃えを併用する場合、先に上下揃えを書くようです

結合

~	上のセルと結合
<	左のセルと結合
>	右のセルと結合

行の終わり(|の後ろ)の1文字

文字	その行の扱い
h	theadタグの行(ヘッダー)
f	tfootタグの行(フッター)
c	captionタグ
k	tableタグへクラスの付与(空白区切り

別のTiddlerタイプ形式での埋め込み(Typed Blocks in WikiText)

見出しの通りです
どうも>の後に続けてもう1つタイプを書くことで変換先のタイプも指定できるようです
また、typeフィールドの値だけでなく拡張子にも対応しているようです
公式の例ではSVGを直接埋め込んでいます

以下、Markdownのプラグインを導入し方言をMarukuに変更した状態での例です

$$$.md

|左寄せの例です|中央揃えの例です|右揃えの例です|
|:-------------|:--------------:|-------------:|
| い           | ろ             | は           |
| に           | ほ             | へ           |

$$$

左寄せの例です	中央揃えの例です	右揃えの例です
い	ろ	は
に	ほ	へ

リスト(Lists in WikiText)

ol,ul,liタグ

#olタグの方のリストです
#リストの階層化も*の数を増やせばできます
##このように
###更に
#数を減らせば戻ります
#.MyClass クラスの指定も可能です

*次はulタグの方のリストです
**同様に階層化できます
*こうです
*.MyClass クラス指定も可能です

olタグの方のリストです
リストの階層化も*の数を増やせばできます
1. このように
  1. 更に
数を減らせば戻ります
クラスの指定も可能です

次はulタグの方のリストです
- 同様に階層化できます
こうです
クラス指定も可能です

olとulのリスト同士を混ぜたり引用を混ぜることも出来ます(公式参照)

記述リスト(Definitions in WikiText)

dl,dt,ddタグです

;名前(dtタグ部分)
:上記の名前の説明(ddタグ部分)

名前(dtタグ部分): 上記の名前の説明(ddタグ部分)

詳しくはHTML5の記述リストで調べてください

コード(Code Blocks in WikiText)

codeタグです

`インライン版のコードです。一部の文字列をそのまま表示してくれます<これとか>`

インライン版のコードです。一部の文字列をそのまま表示してくれます<これとか>

```
コードの複数行版です

改行がそのまま反映されますが、改行目的の場合は別の物がちゃんとあるのでそちらを使ってください

```

コードの複数行版です

改行がそのまま反映されますが、改行目的の場合は別の物がちゃんとあるのでそちらを使ってください

引用(Block Quotes in WikiText)

blockquoteタグです

>引用のやり方１。1行ごとに&gt;をつけるやり方です
>次の行にも&gt;を書くと同じブロックになります(空行を挟んでも構いません)

<<<.myClass.myClass2
引用の例です
改行はこうなります

空行を入れると改行はこうなります

<<<<
引用の引用は<の数を増やします
<<<<

>1つ目のやり方を混ぜられる？もちろん！

<<<引用元の書籍や人物等をここに書くことも出来ます(citeタグ)

引用のやり方１。1行ごとに>をつけるやり方です
次の行にも>を書くと同じブロックになります(空行を挟んでも構いません)

引用の例です改行はこうなります
空行を入れると改行はこうなります
引用の引用は<の数を増やします
1つ目のやり方を混ぜられる？もちろん！
引用元の書籍や人物等をここに書くことも出来ます(citeタグ)

リストと混ぜることも出来ます(公式参照)

参照(Transclusion in WikiText)

指定したTiddlerのフィールドを埋め込む方法です
TranscludeWidgetもあります
{{対象のTextReference}}が基本形です

{{対象のTiddlerタイトル||テンプレートのTiddlerタイトル}}のようにしてテンプレートを指定すると
対象として指定したTiddlerにテンプレートで指定したTiddlerの本文(textフィールド)が書いてあったように表示されます
テンプレート指定がある場合、対象の部分はタイトル以外使用されません
テンプレート部分は全てタイトルと解釈されるため、タイトル以外を書いてはいけません
そのため、この書き方ではテンプレートとして本文(textフィールド)以外は使えません
任意のフィールドを使いたい場合はTranscludeWidgetを使います

テンプレートを使うとデータと見た目を分離することが出来るため、同じデータを使って色んな見せ方が出来ます
また、後で見せ方を修正したい時もテンプレートのみの変更で対応できるため便利です

sample/transclude

例１：{{sample/transclude}}

例２：{{sample/transclude!!test}}

例３：{{$:/core/images/mail}}

例４：{{sample/transclude||$:/core/ui/ViewTemplate/tags}}

例１：本文です

例２：testフィールドです

例３：

例４：

細かい仕様(5.1.19時点)

{{A||B}}のAを対象指定、Bをテンプレート指定として

テンプレート指定がある & 対象指定がある

<$tiddler tiddler=対象指定のタイトル>
<$transclude tiddler=テンプレート指定/>
</$tiddler>

テンプレート指定がある & 対象指定がない

<$transclude tiddler=テンプレート指定/>

テンプレート指定がない & 対象指定がある

<$tiddler tiddler=対象指定のタイトル>
<$transclude tiddler=対象指定のタイトル field=対象指定のフィールド index=対象指定のインデックス/>
</$tiddler>

テンプレート指定がない & 対象指定がない

<$transclude/>

フィルターの結果の表示

{{{フィルター}}}とすることでフィルターの結果を埋め込むことができます
こちらは括弧が3個ずつであることに注意

CSSのスタイルの指定とクラスの指定(Styles and Classes in WikiText)

@@.myClass.myClass2
ここのブロックに書いた一番上のタグ？には指定したスタイルやクラスが付与されます(この場合はpタグ)
@@

@@background-color:#bce;color:#100;
*スタイルの適用例です
**この場合はulタグに指定したスタイルやクラスが付与されます
@@


@@.myClass.myClass2
@@background-color:#bce;color:#100;
両方併用もできます
@@

インライン版も@@background-color:#bce;color:#100;.myClass.myClass2 このように@@書きます

ここのブロックに書いた一番上のタグ？には指定したスタイルやクラスが付与されます(この場合はpタグ)

スタイルの適用例です
- この場合はulタグに指定したスタイルやクラスが付与されます

両方併用もできます

インライン版もこのように書きます

インライン版はスタイルを全て書いた後でクラスの指定をしなければいけません

水平線(Horizontal Rules in WikiText)とダッシュ(Dashes in WikiText)

nダッシュの--例です

mダッシュの---例です

日本語にはあんまり関係ないように思います。
3つ以上のハイフンだけからなる行はhrタグとして処理されます

---

この上の線です

nダッシュの–例です

mダッシュの—例です

日本語にはあんまり関係ないように思います。 3つ以上のハイフンだけからなる行はhrタグとして処理されます

この上の線です