Markdown plugin
設定の確認
- この Help/Markdown は2022年9月27日版です。
- 最新版は(FSWki本体に取り込まれるまでは)こちらからご入手ください。
- Markdown pluginのインストールと設定方法はこちらもご参照下さい。
- 以下に該当する場合、設定の見直しが必要です。
- 本ページを表示した場合、CSP (Content-Security-Policy) の警告が出る。
- [要確認!!] ここがピンク色で表示されている。
- [要確認!!] 本リンクをクリックすると、「スクリプトへのリンクが有効になっています。」との警告が表示される。
- 設定見直し方法の例
- WebサーバなどにおいてCSPなどの設定が有効になっていない場合は有効にします。
- CSPが既に有効になっているが 'unsafe-inline' が使用されている場合、'unsafe-inline' を使用しないようにします。代わりに、
- スクリプトを有効にするには、CSP Hash などを使います。
- テキストを装飾する方法につきましては、以下のテキスト装飾 スタイルの利用の節をご参照下さい。
- Raw html を使用しない場合は、Discount.pm 中のランタイムフラグに MKD_NOHTML と MKD_SAFELINK を追加するという方法も可能です。
- なお、MKD_SAFELINK はMarkdownのリンク構文で使用可能なプロトコルを (v.2.2.7時点で generate.c において) https, http, news, ftp に限定しますが、href でのリンクには適用されません。
Markdown構文の対応状況
以下の表の最左列の注釈記号がついている Markdown 構文は、その行の構成では未対応です。
注釈記号 | CPAN | Markdown to HTML converter | Makefile.PL 中の ./configure.sh オプション | Discount.pm 中のランタイムフラグ | 備考 |
---|---|---|---|---|---|
*1 | Text::Markdown 1.000031 | Markdown.pl | - | - | 27 Dec 2015以降更新無 |
*1 | Text::Markdown 1.000031-3 | Markdown.pl | - | - | apt-get -y install libtext-markdown-perl (Ubuntu 20.04, as of Feb. 2022) |
*2 | Text::Markdown::Discount 0.12-1 | Discount 2.2.6-1 | --github-checkbox | MKD_NOHEADER MKD_NOPANTS | apt-get -y install libtext-markdown-discount-perl (Ubuntu 20.04, as of Feb. 2022) |
*3 | Text::Markdown::Discount 0.13 (357a2ef) | Discount 2.1.7 + patches | --with-fenced-code --with-dl=both | MKD_NOHEADER MKD_NOPANTS | 脆弱性 修正コミット b002a5aなどを取り込む必要があるため、*4 以降を使う方がよいです。 |
*4 | Text::Markdown::Discount (pull request 中 の f395b80) | Discount v2maint branchの最新版 (2.2.7 (v2maint 34a8ebb) と 2.2.7bでテスト) | --github-checkbox=input | MKD_NOHEADER MKD_NOPANTS MKD_FENCEDCODE MKD_DLEXTRA MKD_SAFELINK MKD_LATEX | Discountのversionとオプション/フラグ設定の関係は、こちらの「Markdownの拡張構文を有効にする方法の違い」をご参照下さい。 |
Markdown での入力
{{markdown ここに Markdown を記述。 }}
二重の閉じ波括弧「}}」の直後は改行でなければなりません。スペースが入っているなど、改行でない場合はMarkdownブロックが続いていると解釈されます。
見出し
等号下線題目 ======== ハイフン下線大見出し ----------------------- # シャープ行頭題目 ## 大見出し ### 中見出し #### 小見出し
等号下線題目
ハイフン下線大見出し
シャープ行頭題目
大見出し
中見出し
小見出し
なお、FSWikiでは
{{outline}}
により、見出しの一覧を作成できますが、Markdown で作成された見出しは一覧に含まれません。
テキスト装飾
*イタリック*、_イタリック_ **ボールド**、__ボールド__ ***ボールドイタリック***、___ボールドイタリック___ *イタリック中の__ボールド__*、_イタリック中の**ボールド**_ **ボールド中の_イタリック_**、__ボールド中の*イタリック*__
イタリック、イタリック
ボールド、ボールド
ボールドイタリック、ボールドイタリック
イタリック中のボールド、イタリック中のボールド
ボールド中のイタリック、ボールド中のイタリック
g<sup>タグによる上付き</sup>、g<sub>タグによる下付き</sub> g^サーカムフレックス挟み上付き^、 g~チルダ挟み下付き~ \*1,\*2,\*3,\*4 ([こちらの pull request](https://github.com/Orc/discount/pull/238) で検討と対応が進んでいるようです。) g^x、g^x1Y2、g^(サーカムフレックス上付き/半角英数字以外が含まれる場合には丸括弧で挟む) (Discount独自拡張 (Smartypants substitutions))
gタグによる上付き、gタグによる下付き
g^サーカムフレックス挟み上付き^、 g~チルダ挟み下付き~ *1,*2,*3,*4 (こちらの pull request で検討と対応が進んでいるようです。)
gx、gx1Y2、gサーカムフレックス上付き/半角英数字以外が含まれる場合には丸括弧で挟む (Discount独自拡張 (Smartypants substitutions))
<u>タグによる下線</u> ~~二重チルダ挟み打消し~~ \*1 これは<del>タグによる打消し</del>です。 <del>タグによる行頭の文字列の打消し</del> (\*1 の環境では、pタグなどで挟まないと(HTML4.01でのdelタグの仕様により)ブロック要素と解釈されインデントが行われません。) <p><del>タグによる行頭の文字列の打消し(pタグ挟み)</del></p>
タグによる下線
二重チルダ挟み打消し *1
これはタグによる打消しです。
タグによる行頭の文字列の打消し
(*1 の環境では、pタグなどで挟まないと(HTML4.01でのdelタグの仕様により)ブロック要素と解釈されインデントが行われません。)
タグによる行頭の文字列の打消し(pタグ挟み)
==二重等号挟みハイライト== \*1,\*2,\*3,\*4 ([こちらの pull request](https://github.com/Orc/discount/pull/238) で検討と対応が進んでいるようです。)
==二重等号挟みハイライト== *1,*2,*3,*4 (こちらの pull request で検討と対応が進んでいるようです。)
テキスト装飾 スタイルの利用
推奨
1. 利用する定義(例えば以下など)をスタイルシートに入れます。
/* Cascading Style Sheets used in Markdown block of FSWiki */ orange {color:orange;} /* type selector */ .orange {color:orange;} /* class selector */
2. 定義したスタイルをMarkdownブロックで利用します。
- その際、利用しているテーマのスタイルシート ./theme/<利用しているテーマ名>/<利用しているテーマ名>.css 以外に上記を追加した場合には、そのスタイルシートを参照する必要があります。
- kati_dark.css の"Common Settings Among Themes"の部分にいくつか例を入れてあります。
3. スタイルシート中で定義されたセレクタを用いた修飾の例:
- <orange>typeセレクタによる着色</orange> - <span type="text/css" class="yellow">classセレクタによる着色</span> - <span type="text/css" class="green">classセレクタ<cyan>および<violet>typeセレクタ</violet>の入れ子</cyan>による着色</span> - classセレクタによる<span type="text/css" class="darkhighlight">ハイライト</span>
typeセレクタによる着色 - classセレクタによる着色
- classセレクタ
および による着色typeセレクタ の入れ子 - classセレクタによるハイライト
非推奨
HTML5ではサポートされておりません。
<font color="Red">Red</font>, <font color="Orange">Orange</font>, <font color="Yellow">Yellow</font>, <font color="Green">Green</font>, <font color="Cyan">Cyan</font>, <font color="Blue">Blue</font>, <font color="Indigo">Indigo</font>, <font color="Violet">Violet</font>
Red, Orange, Yellow, Green, Cyan, Blue, Indigo, Violet
非推奨
- 以下のようなインラインスタイルやインラインで定義されたスタイルは、(WebサーバのCSPを無効にするか、CSPの style-src に 'unsafe-inline' を設定することにより有効にはなるのですが)セキュリティ上非推奨です!!
- そのような設定を行っている場合には、CSPなどを有効にし、その設定から 'unsafe-inline' を削除してください。
- MKD_NOSTYLE ランタイムフラグでは <style *></style>は無効になるのですが、少なくとも v2.2.7 では style= は無効になりません。
{{markdown - <span style="color:DeepPink;">インラインスタイルによる着色(**[注意!!]**着色されている場合にはWebサーバのCSP等の設定によりインラインスタイル(及びインラインスクリプト)を禁止してください。)</span> <style type="text/css">.DeepPink {color:DeepPink;}</style> - <span type="text/css" class="DeepPink">インラインで定義されたclassセレクタによる着色</span>(**[注意!!]**着色されている場合にはWebサーバのCSP等の設定によりインラインスタイル(及びインラインスクリプト)を禁止してください。) }}
- インラインスタイルによる着色([注意!!]着色されている場合にはWebサーバのCSP等の設定によりインラインスタイル(及びインラインスクリプト)を禁止してください。)
- インラインで定義されたclassセレクタによる着色([注意!!]着色されている場合にはWebサーバのCSP等の設定によりインラインスタイル(及びインラインスクリプト)を禁止してください。)
実体参照符号
実体参照符号の一覧は、例えば、こちらやこちらなどにあります。
© ® ™ Δ π € ⇒ ♠ ♣ ♥ ♦ ∑ √ ∞
© ® ™ Δ π € ⇒ ♠ ♣ ♥ ♦ ∑ √
実体参照符号への自動変換
「&」と(後ろに>が無い)「<」は、それぞれ「&」と「<」に変換されます。 >行頭の「>」はMarkdownの引用構文のため`<blockquote></blockquote>`に変換されます。 行頭以外でも「>」は「>」には変換されません。 「"」は「"」や「\"」には変換されません。 「'」は「'」や「\'」には変換されません。 「\」は「\\」には変換されません。
「&」と(後ろに>が無い)「<」は、それぞれ「&」と「<」に変換されます。
行頭の「>」はMarkdownの引用構文のため
<blockquote></blockquote>
に変換されます。
行頭以外でも「>」は「>」には変換されません。
「"」は「"」や「\"」には変換されません。
「'」は「'」や「\'」には変換されません。
「\」は「\」には変換されません。
エスケープ記号"\"
***ボールドイタリック*** \*\*\*アスタリスクで挟まれた通常の文字\*\*\* エスケープされる記号 \` \* \_ \{ \} \# \+ \- \. \! \\ \) \( \] \[ ただし `\( \) \[ \]` は「\( \LaTeX \)、\[ \LaTeX \]」のように `MKD_LATEX`ランタイムフラグを指定した Discount 2.2.7 (v2maint 34a8ebb) ではエスケープされ、 2.2.7b (v2maint 68db3cd) ではエスケープされずLaTeX埋込になります。
ボールドイタリック
***アスタリスクで挟まれた通常の文字***
エスケープされる記号 ` * _ { } # + - . ! \ ) ( ] [
ただし \( \) \[ \]
は「( \LaTeX )、[ \LaTeX ]」のように MKD_LATEX
ランタイムフラグを指定した Discount 2.2.7 (v2maint 34a8ebb) ではエスケープされ、2.2.7b (v2maint 68db3cd) ではエスケープされずLaTeX埋込になります。
改行
行末に2以上のスペースを入れると、 改行されます。 行末に2以上のスペースが入っていないと、 改行されません。
行末に2以上のスペースを入れると、
改行されます。
行末に2以上のスペースが入っていないと、 改行されません。
引用
> 引用
引用
引用の詳細
> コードブロックとは異なり、 前行末の2スペース改行を含め、__構文__ や <span type="text/css" class="orange">タグ</span> は有効です。 >> 入れ子も可能です。 > ただし、連続する引用行は入れ子が深くなる場合を除き、前行の入れ子と同じ深さになります。そのため、ここはまだ入れ子の中です。 >>> ここは、 >> 入れ子の入れ子。 > 入れ子から抜けるには、空行を入れます。
コードブロックとは異なり、
前行末の2スペース改行を含め、構文 や タグ は有効です。入れ子も可能です。 ただし、連続する引用行は入れ子が深くなる場合を除き、前行の入れ子と同じ深さになります。そのため、ここはまだ入れ子の中です。
ここは、 入れ子の入れ子。
入れ子から抜けるには、空行を入れます。
リスト
順序無しリスト
- 項目1 * 項目2 + 項目3
- 項目1
- 項目2
- 項目3
順序有りリスト
1. 項目1 1. 項目2 1. 項目3
- 項目1
- 項目2
- 項目3
順序有りリストの詳細
555. 項目1。値が何であれ「整数.」で始まると「1.」から始まる順序有りリストになります。(標準的なMarkdown構文とは異なり、先頭の値からの順序にはなりません。) -3. 項目2。(標準的なMarkdown構文とは異なり、負の整数も受け付けます。) - 項目3。項目間の改行やスペースは無視され連続したリストになります。 - 項目4。(標準的なMarkdown構文とは異なり、リストの型が異なっても連続したリストになります。)
- 項目1。値が何であれ「整数.」で始まると「1.」から始まる順序有りリストになります。(標準的なMarkdown構文とは異なり、先頭の値からの順序にはなりません。)
項目2。(標準的なMarkdown構文とは異なり、負の整数も受け付けます。)
項目3。項目間の改行やスペースは無視され連続したリストになります。
- 項目4。(標準的なMarkdown構文とは異なり、リストの型が異なっても連続したリストになります。)
アルファベットリスト Discount 拡張構文
a. 項目1 a. 項目2 a. 項目3
- 項目1
- 項目2
- 項目3
アルファベットリストの詳細
y. 項目1。文字が何であれ「アルファベット.」で始まると「a.」から始まるアルファベットリストになります。 z. 項目2 - 項目3。リストの型が何であれ項目間の改行やスペースは無視され連続したリストになります。 3. 項目4。(標準的なMarkdown構文とは異なり、リストの型が異なっても連続したリストになります。)
- 項目1。文字が何であれ「アルファベット.」で始まると「a.」から始まるアルファベットリストになります。
項目2
項目3。リストの型が何であれ項目間の改行やスペースは無視され連続したリストになります。
- 項目4。(標準的なMarkdown構文とは異なり、リストの型が異なっても連続したリストになります。)
リスト間に空行が入る場合の不具合
*3*4の環境(*1*2の環境では未確認)では、以下のように項目と項目との間に空行が入ると
{{markdown 10. I 20. II 30. III 40. IV }}
以下のように、空行の前後の項目の内容にpタグが挿入されます。
<li> I</li> <li><p> II</p></li> <li><p> III</p></li> <li> IV</li>
そのためスタイルシートで div.section p などの設定を行っていた場合、それが空行の前後の項目にも反映されるため、その項目が他と異なって表示されます。この問題は、div.section li p を設定することで div.section p の設定を元に戻すことにより解消できます。
- I
II
III
- IV
また、
{{markdown 10. I 20. II 空行以外がインデント無しで入る場合には項目の内容には p タグは挿入されません。 30. III 40. IV }}
- I
- II
空行以外がインデント無しで入る場合には項目の内容には p タグは挿入されません。
- III
- IV
ちなみに、FSWiki構文では、空行が入ると連続したリストにはならず、pタグも挿入されません。
+ I + II + III + IV
- I
- II
- III
- IV
階層リスト 拡張構文
4スペースずつインデントさせることで、階層的なリストを表現できます。
なお、Discount markdown のタブ幅は configure オプションの --with-tabstop や MKD_TABSTOP ランタイムフラグで調整できます。
階層とインデント幅の関係
必要なスペース幅は環境依存のようです。
- *1*2の環境では2階層目は1〜4スペース、3層目は5〜8スペース、i層目は4(i-1)-3〜4(i-1)スペースインデント。
- *3*4の環境では1階層目は0〜3スペース、2層目は4〜7スペース、i層目は4i-4〜4i-1スペースインデント。
- 0スペースインデント - 1スペースインデント - 2スペースインデント - 3スペースインデント - 4スペースインデント - 5スペースインデント - 6スペースインデント - 7スペースインデント - 8スペースインデント - 9スペースインデント - 10スペースインデント - 11スペースインデント - 12スペースインデント - 13スペースインデント
- 0スペースインデント
- 1スペースインデント
- 2スペースインデント
- 3スペースインデント
- 4スペースインデント
- 5スペースインデント
- 6スペースインデント
- 7スペースインデント
- 8スペースインデント
- 9スペースインデント
- 10スペースインデント
- 11スペースインデント
- 12スペースインデント
- 13スペースインデント
順序無し階層リスト
- 項目1 - 項目1-1 - 項目1-2 - 項目1-2-1 - 項目1-2-2 - 項目1-2-2-1 - 項目1-2-2-1-1 - 項目2 - 項目2-1
- 項目1
- 項目1-1
- 項目1-2
- 項目1-4-1
- 項目1-4-2
- 項目1-4-2-1
- 項目1-4-2-1-1
- 項目1-4-2-1
- 項目2
- 項目2-1
順序有り階層リスト
1. 番号付き項目1 1. 番号付き項目1-1 1. 番号付き項目1-2 1. 番号付き項目1-2-1 1. 番号付き項目1-2-2 1. 番号付き項目1-2-2-1 1. 番号付き項目1-2-2-2 1. 番号付き項目2 1. 番号付き項目2-1 1. 番号付き項目2-2 1. 番号付き項目3
- 番号付き項目1
- 番号付き項目1-1
- 番号付き項目1-2
- 番号付き項目1-2-1
- 番号付き項目1-2-2
- 番号付き項目1-2-2-1
- 番号付き項目1-2-2-2
- 番号付き項目2
- 番号付き項目2-1
- 番号付き項目2-2
- 番号付き項目3
混合リスト
*3*4の環境では、2番目以降の項目の型は1番目の項目の型と同じになります。(*1*2の環境では未確認)
{{markdown - 順序無し項目 1. 順序有り項目 }}
- 順序無し項目
- 順序有り項目
FSWiki構文では型どおり表示されます。
- FSWiki順序無し項目
- FSWiki順序有り項目
{{markdown 1. 順序有り項目 - 順序無し項目 }}
- 順序有り項目
- 順序無し項目
FSWiki構文では型どおり表示されます。
- FSWiki順序有り項目
- FSWiki順序無し項目
階層混合リストの場合
FSWiki と Discount Markdown とでは階層混合リストを実現する際の HTML の記述が異なります。例えば、FSWiki では以下のように階層毎に独立したリストとして実現されます。
* FSWiki順序無し項目 ++ FSWiki順序有り項目
<ul> <li> FSWiki順序無し項目</li> </ul> <ol> <ol> <li> FSWiki順序有り項目</li> </ol> </ol>
これに対して、Discount Markdown では入れ子として実現されます。
{{markdown - Discount順序無し項目 1. Discount順序有り項目 }}
<ul> <li>Discount順序無し項目 <ol> <li> Discount順序有り項目</li> </ol> </li> </ul>
そのため、前者のみを前提とした theme を利用した場合、後者との表示が意図したものにならない場合があります。例えば、theme として kati.css を選択すると、順序無し項目後の階層化された順序有り項目は、順序無しとして表示されます。この問題は、スタイルシートのリストの設定を変更することで修正できます。
{{markdown - 順序無し項目 1. 順序有り項目 - 順序無し項目 1. 順序有り項目 }}
- 順序無し項目
- 順序有り項目
- 順序無し項目
- 順序有り項目
- 順序無し項目
- 順序有り項目
{{markdown 1. 順序有り項目 - 順序無し項目 1. 順序有り項目 - 順序無し項目 }}
- 順序有り項目
- 順序無し項目
- 順序有り項目
- 順序無し項目
- 順序有り項目
- 順序無し項目
なお、FSWiki構文では階層化は3段までという制約があります。
- FSWiki順序無し項目
- FSWiki順序有り項目
- FSWiki順序無し項目
- + FSWiki順序有り項目
タスクリスト github 拡張構文 *1
タスク未完了の場合の角括弧 '[ ]' の中にはスペースが必要です。
- [ ] タスク未完了 - [x] タスク完了
- タスク未完了
- タスク完了
Discount markdown で configure.sh --github-checkbox とした場合(*2の環境のデフォルト)には、以下のような見た目になります。
- ☐ タスク未完了
- ☑ タスク完了
Discount markdown で configure.sh --github-checkbox=input とした場合には、以下のような見た目になります。
- タスク未完了
- タスク完了
説明 (定義リスト)
行頭コロンスペース定義リスト Discount 2.0.4/PHP 拡張構文 *1*2
項目 : 説明文。コロンの後ろにはスペースが必要です。
- 項目
- 説明文。コロンの後ろにはスペースが必要です。
行頭コロンスペース定義リストの詳細
項目 : 説明文を複数行で記述する場合は、 : 行頭をコロンスペースで開始するか、 前行の最後にスペースを2つ付け改行します(ただし、次の行が「: 」で始まるとこの行は「項目」になります)。 別名有り項目 別名1 別名2 : 項目に別名を付けることもできます。
- 項目
- 説明文を複数行で記述する場合は、
- 行頭をコロンスペースで開始するか、
前行の最後にスペースを2つ付け改行します(ただし、次の行が「: 」で始まるとこの行は「項目」になります)。 - 別名有り項目
- 別名1
- 別名2
- 項目に別名を付けることもできます。
等号挟み定義リスト Discount 1.2.3 拡張構文 *1
=項目= 説明文。説明文の前にはスペースが4つ以上必要です。
- 項目
- 説明文。説明文の前にはスペースが4つ以上必要です。
等号挟み定義リストの詳細
=項目= 説明文を複数行で記述する場合は、 前行の最後にスペースを2つ付け改行します。 =別名有り項目= =別名1= =別名2= 項目に別名を付けることもできます。
- 項目
- 説明文を複数行で記述する場合は、
前行の最後にスペースを2つ付け改行します。 - 別名有り項目
- 別名1
- 別名2
- 項目に別名を付けることもできます。
リンク
- address@example.com https://fswiki.osdn.jp/cgi-bin/wiki.cgi (オートリンク \*1,\*2,(\*3,\*4は MKD_AUTOLINK ランタイムフラグの指定で対応可能です。)) - <address@example.com> <https://fswiki.osdn.jp/cgi-bin/wiki.cgi> - [FSWiki(吹き出し無)](https://fswiki.osdn.jp/cgi-bin/wiki.cgi) - [FSWiki(""で挟んだ吹き出し有)](https://fswiki.osdn.jp/cgi-bin/wiki.cgi "吹 き 出 し") - [FSWiki(''で挟んだ吹き出し有)](https://fswiki.osdn.jp/cgi-bin/wiki.cgi '吹 き 出 し') - [FSWiki(()で挟んだ吹き出し有)](https://fswiki.osdn.jp/cgi-bin/wiki.cgi (吹き出し)) (最初の閉じ括弧までがリンクとなります。) - [FSWiki(「" "」,「' '」のいずれにも挟まれていない文字列が()内にある場合)](https://fswiki.osdn.jp/cgi-bin/wiki.cgi 文字列) (最初の閉じ括弧までがリンクとなります。) - [「)」が含まれるURLは<>で挟みます](<https://en.wikipedia.org/wiki/Peter_Eckersley_(computer_scientist)> '(吹 き 出 し)') ([参考](https://github.com/Orc/discount/issues/260))
- address@example.com https://fswiki.osdn.jp/cgi-bin/wiki.cgi (オートリンク *1,*2,(*3,*4は MKD_AUTOLINK ランタイムフラグの指定で対応可能です。))
- address@example.com https://fswiki.osdn.jp/cgi-bin/wiki.cgi
- FSWiki(吹き出し無)
- FSWiki(""で挟んだ吹き出し有)
- FSWiki(''で挟んだ吹き出し有)
- FSWiki(()で挟んだ吹き出し有)) (最初の閉じ括弧までがリンクとなります。)
- FSWiki(「" "」,「' '」のいずれにも挟まれていない文字列が()内にある場合) (最初の閉じ括弧までがリンクとなります。)
- 「)」が含まれるURLは<>で挟みます (参考)
ちなみに、Wikiでは存在するページ(例えば Help、FrontPage、Menuなど)へのリンクが自動的に生成されます。
{{markdown しかしながら、Markdownブロック内では、Wikiページ(例えば Help、FrontPage、Menuなど)へのリンクは自動生成されません。 }}
しかしながら、Markdownブロック内では、Wikiページ(例えば Help、FrontPage、Menuなど)へのリンクは自動生成されません。
内部リンク
(#見出し)形式での内部リンク *1*2*3*4
以下の(#見出し)形式での内部リンクでは、『本ページのURLの後ろに「URLエンコードされた"#見出し"」が付けられた URL』へリンクが張られます。
なお、プレビュー時には引数(?より右側)が取り除かれたURLに「URLエンコードされた"#見出し"」が付けられた URLへリンクが張られます。また、*1の環境では「URLエンコード」は行われません。
- [見出しへの内部リンク(吹き出し無)](#見出し) - [見出しへの内部リンク(吹き出し有)](#見出し "吹き出し")
しかしながら、*1*2*3*4の環境では、リンクに対応するアンカータグが付けられていないため、リンクをクリックしても「見出し」へは移動しません。この問題は以下の節の対応を行うことで解決できます。
FSWikiの見出しへのリンク (ページ名と見出し番号の指定)
FSWikiの1番目の見出には <a name="p0">、2番目の見出には <a name="p1">、n番目の見出には <a name="p[n-1]"> のアンカータグが付けられているため、それを内部リンク構文 [任意のメッセージ](#anchor name) の # の後ろに指定します。また、ページ名を指定する場合は、# の前に「wiki.cgi?page=ページ名」を付けます。
- [3番目のFSWikiの見出しへのリンク(ページ名無)](#p2 "ページ名無") - [Help/Markdownページの4番目のFSWikiの見出しへのリンク(URLコーディング無)](wiki.cgi?page=Help/Markdown#p3 "URLコーディング無") - [Help/Markdownページの5番目FSWikiのの見出しへのリンク(URLコーディングで記述)](wiki.cgi?page=Help%2FMarkdown#p4 'URLコーディングで記述')
- 3番目のFSWikiの見出しへのリンク(ページ名無)
- Help/Markdownページの4番目のFSWikiの見出しへのリンク(URLコーディング無)
- Help/Markdownページの5番目のFSWikiの見出しへのリンク(URLコーディングで記述)
Markdownブロック内の見出しへのリンク (アンカータグの付与)
「Markdownブロック内の見出し」にアンカータグ <a name="anchor name"></a> を付け、そこで指定した "anchor name" を内部リンク構文 [任意のメッセージ](#anchor name) の # の後ろに指定します。
{{markdown #### <a name="Markdownブロック内の見出し"></a> Markdownブロック内の見出し - [「Markdownブロック内の見出し」へのリンク](#Markdownブロック内の見出し) - [Help/Markdownページの「Markdownブロック内の見出し」へのリンク](wiki.cgi?page=Help/Markdown#Markdownブロック内の見出し) #### <a name="anchored-markdown-header"></a> Anchored Markdown Header - [Link to "Anchored Markdown Header" (with bubble)](#anchored-markdown-header "speech bubble") }}
Markdownブロック内の見出し
Anchored Markdown Header
なお、
- "anchor name" を見出しと同じ文字列(ただし、見出しに半角スペースが含まれる場合にはそれらをハイフン「-」に変換し、大文字は小文字に変換した)文字列にしておけば他の Markdown 実装との互換性を保てます。
- "anchor name"が Non-ASCII の場合には、いくつかのブラウザ(Chrome 105, Edge 105など)ではアンカータグに移動しないようです(Firefox 105 では移動しました)。
集約リンク
同じリンク先を繰り返し利用する場合は、リンク先を [ラベル]: の後ろに記述し、[ラベル]または[表示名][ラベル]でリンクを張ります。
{{markdown - [FSWiki URL]による[FSWiki URL]のための[FSWikiのURL][FSWiki URL]。 - [fswiki git repo], [git repository][fswiki git repo], [git clone][fswiki git repo]. - 「表示名」には[[1]][FSWiki URL]のように角括弧「[]」を含めることが可能です。 - 吹き出しは()で囲むことも可能です。[FSWiki URL ()で挟んだ吹き出し] [fswiki git repo]: https://osdn.net/projects/fswiki/scm/git/fswiki/ '吹き出し' [FSWiki URL]: https://fswiki.osdn.jp/cgi-bin/wiki.cgi "吹き出し" [FSWiki URL ()で挟んだ吹き出し]: https://fswiki.osdn.jp/cgi-bin/wiki.cgi (吹き出し) }}
- FSWiki URLによるFSWiki URLのためのFSWikiのURL。
- fswiki git repo, git repository, git clone.
- 「表示名」には[1]のように角括弧「[]」を含めることが可能です。
- 吹き出しは()で囲むことも可能です。FSWiki URL ()で挟んだ吹き出し
{{markdown - しかしながら、参照先の「ラベル」に「[[角括弧挟みラベル]]」のように角括弧「[]」を含めるとラベルでなく通常の文字列と見なされます。 - 参照する側の「通常のラベル」を「[[通常のラベル]]」のように角括弧「[]」で挟むことは可能です。 [[角括弧挟みラベル]]: https://fswiki.osdn.jp/cgi-bin/wiki.cgi "この行はリンク先の定義ではなく通常の文字列と見なされます。" [通常のラベル]: https://fswiki.osdn.jp/cgi-bin/wiki.cgi "この行はリンク先の定義と見なされます。" }}
- しかしながら、参照先の「ラベル」に「[[角括弧挟みラベル]]」のように角括弧「[]」を含めるとラベルでなく通常の文字列と見なされます。
- 参照する側の「通常のラベル」を「[通常のラベル]」のように角括弧「[]」で挟むことは可能です。
[[角括弧挟みラベル]]: https://fswiki.osdn.jp/cgi-bin/wiki.cgi "この行はリンク先の定義ではなく通常の文字列と見なされます。"
注釈 拡張構文 *1*2*3*4
注釈される文書。[^1] [^1]: 注釈文。
注釈される文書。^1
画像
外部のWebサーバの画像を表示させる場合は、Webサーバの設定で Content-Security-Policy (CSP) の img-src にそのサーバのURLを追加する必要があります。
- ![CSP img-srcに'self'を追加する必要があります!!](favicon.ico "ローカルサーバ上の画像") - ![CSP img-srcに画像が置いてあるサーバのURLを追加する必要があります!!](https://fswiki.osdn.jp/cgi-bin/wiki.cgi?file=fswiki%2Epng&page=FrontPage&action=ATTACH "別のサーバ上の画像")
サイズ指定画像
HTML tag
- <img src="favicon.ico" width="16" height="16" alt="CSP img-srcに'self'を追加する必要があります!!" title="ローカルサーバ上の画像+サイズ変更" />
Discount 拡張構文
URL の後ろに '=widthxheight' を付けることで画像サイズを変更できます。
- ![CSP img-srcに'self'を追加する必要があります!!](favicon.ico =16x16 "ローカルサーバ上の画像16x16") - ![CSP img-srcに画像が置いてあるサーバのURLを追加する必要があります!!](https://fswiki.osdn.jp/cgi-bin/wiki.cgi?file=fswiki%2Epng&page=FrontPage&action=ATTACH =75x70 "別のサーバ上の画像75x70")
コメント
<!--ここは表示されません。-->
水平線
スペースとタブを無視して「-」、「_」、「*」のいずれかの記号が3個以上連続する行は水平線になります。(ただし、行頭が4スペース以上開くとコードブロックと解釈されます。)
--- ----- - - - - - -
(以下は三重下線) ___ (以下は四重下線) ____ _ _ _ _ _ _
(以下は三重下線)
(以下は四重下線)
*** **** * * * * * *
テーブル 拡張構文 *1
| 左寄せ列 | 中央寄せ列 | 右寄せ列 | |:---------|:----------:|---------:| | 1-1 | 1-2 | 1-3 | | 2-1 | 2-2 | 2-3 |
中央寄せ、右寄せが有効になっていない場合は、以下の節の注意点をご参照下さい。
左寄せ列 | 中央寄せ列 | 右寄せ列 |
---|---|---|
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
Discount/PHP 拡張構文
左寄せ列 | 中央寄せ列 | 右寄せ列 :--------|:----------:|---------: 1-1 | 1-2 | 1-3 2-1 | 2-2 | 2-3
中央寄せ、右寄せが有効になっていない場合は、以下の節の注意点をご参照下さい。
左寄せ列 | 中央寄せ列 | 右寄せ列 |
---|---|---|
1-1 | 1-2 | 1-3 |
2-1 | 2-2 | 2-3 |
中央寄せ Discount 拡張構文
中央寄せが有効になっていない場合は、以下の節の注意点をご参照下さい。
->中央寄せ<-
中央寄せ
左寄せ、中央寄せ、右寄せを有効にする際の注意点
*2*3*4の環境はテーブル表示に対応しているのですが、中央寄せ、右寄せのスタイルが以下のようにインラインで出力されます。
<th style="text-align:left;"> 左寄せ列 </th> <th style="text-align:center;"> 中央寄せ列 </th> <th style="text-align:right;"> 右寄せ列 </th>
CSPを無効にしたり、CSPの style-src に "unsafe-inline" を指定することで中央寄せ、右寄せで表示されるようになるのですが、この方法は任意のインラインスタイルも有効にするためセキュリティ上非推奨となります。
セキュリティ的に理想的な対応は、インラインスタイルを用いず、スタイルシートで実現できるように Markdown to HTML Converter (Discountなど)を修正し、それに対応するスタイルシートを参照することになります。例えば、スタイルシートで以下のような text-align: を定義しておき、
.text-left { text-align: left !important; } .text-right { text-align: right !important; } /* https://raw.githubusercontent.com/twbs/bootstrap/main/dist/css/bootstrap.css */ .text-center { text-align: center !important; }
HTMLのthタグとtdタグがそれぞれ以下のように出力されるように Markdown to HTML Converter (Discountなど)を修正します。
<th type="text/css" class="text-left"> 左寄せ列 </th> <th type="text/css" class="text-center"> 中央寄せ列 </th> <th type="text/css" class="text-right"> 右寄せ列 </th> <td type="text/css" class="text-left"> 1-1 </td> <td type="text/css" class="text-center"> 1-2 </td> <td type="text/css" class="text-right"> 1-3 </td>
しかしながら、この修正は Markdown to HTML Converter とスタイルシートの両方を修正する必要があります。
汎用的かつ暫定的な妥協策としては CSPの style-src に 'unsafe-hashes' と、上記のインラインスタイルのハッシュ値を追加するという方法があります。具体的には、httpd-security-fswiki-local.conf の Next-recommended CSP のような設定を有効にします。
整形済テキスト 拡張構文
文書中のコード
同じ長さのバッククオートで挟まれた箇所は、そのまま表示されます。
{{markdown Markdownブロック内の文章: 挟まれていない場合「© < _イタリック_」は変換されます。 挟まれている場合「`© < _イタリック_`」は変換されません。 }}
Markdownブロック内の文章:
挟まれていない場合「© < イタリック」は変換されます。
挟まれている場合「© < _イタリック_
」は変換されません。
連続するバッククオートをコードブロック内に含める場合
それより長いバッククオートで挟みます。
{{markdown Markdownブロック内の文章: 挟まれていない場合「```鍵括弧内のバッククオートは表示されません。```」、 挟まれている場合````「```鍵括弧内のバッククオートは表示されます。```」````。 }}
Markdownブロック内の文章:
挟まれていない場合「鍵括弧内のバッククオートは表示されません。
」、
挟まれている場合「```鍵括弧内のバッククオートは表示されます。```」
。
コードブロック(三重バッククオート上下挟み) *1*2
*1*2の環境では、文書中(インライン)のコードとして解釈され、改行は半角スペースに変換されます。
{{markdown コードブロック外では「© < _イタリック_」は変換されます。 ```shell echo "1行目。コードブロック内では「© < _イタリック_」は変換されません。" echo "2行目。コードブロック内では「© < _イタリック_」は変換されません。" ``` }}
コードブロック外では「© < イタリック」は変換されます。
echo "1行目。コードブロック内では「© < _イタリック_」は変換されません。"
echo "2行目。コードブロック内では「© < _イタリック_」は変換されません。"
*1*2の環境では、コードブロック内に空行を入れるとコードブロック内とは解釈されず通常の文字と判断されます。
{{markdown コードブロック外では「© < _イタリック_」は変換されます。 ``` shell echo "1行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。" echo "2行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。" ``` }}
コードブロック外では「© < イタリック」は変換されます。
echo "1行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。"
echo "2行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。"
コードブロック(三重チルダ上下挟み) *1*2
開始の三重チルダの前に空行が入っていないと、文書中(インライン)と解釈され二重チルダ挟み打消しになります。
{{markdown コードブロック外では「© < _イタリック_」は変換されます。 ~~~shell echo "1行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。" echo "2行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。" ~~~ }}
コードブロック外では「© < イタリック」は変換されます。
echo "1行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。"
echo "2行目。コードブロック内に空行を含む場合でも「© < _イタリック_」は変換されてはなりません。"
タグによるコードブロック
preタグとcodeタグを使います。ただし、<code>タグ後の改行と</code>後の改行は、それぞれ<pre></pre>内の最初と最後の改行と解釈されます。また、実体参照符号へは自動変換されないため、手動で変換しなければなりません。
{{markdown <pre><code> echo "1行目。<code>タグ後に改行がある場合。" echo "2行目。</code>タグ後に改行がある場合。" </code> </pre> }}
echo "1行目。<code>タグ後に改行がある場合。"
echo "2行目。</code>タグ後に改行がある場合。"
以下のように記述すると囲み内の最初と最後の改行は行われなくなります。
{{markdown <pre> <code>echo "1行目。<code>タグ後に改行がある場合。" echo "2行目。</code>タグ後に改行がある場合。" </code></pre> }}
echo "1行目。<code>タグ後に改行がある場合。"
echo "2行目。</code>タグ後に改行がある場合。"
コードブロック(4スペース以上のインデント)
空行に続く4スペース以上のインデントはコードブロックになります。
{{markdown コードブロック外では「© < _イタリック_」は変換されます。 echo "コードブロック内(4スペース以上インデントされた行)では「© < _イタリック_」は変換されません。" }}
コードブロック外では「© < イタリック」は変換されます。
echo "コードブロック内(4スペース以上インデントされた行)では「© < _イタリック_」は変換されません。"
インデント幅とコードブロック範囲の関係
スペース又はタブのみからなる行と空行を無視して、4スペース以上のインデントの行が連続する範囲がコードブロックと見なされます。
{{markdown echo "1スペースインデント。--------------- ここは本文 ---------------" echo "2スペースインデント" echo "3スペースインデント。--------------- ここまでは本文 ---------------" echo "4スペースインデント。--------------- ここからコードブロック ---------------" echo "5スペースインデント" echo "6スペースインデント" echo "1タブインデント" echo "2タブインデント" echo "4スペースインデント。前行は1タブスペース" echo "4スペースインデント。前行は1スペース。------ ここまでコードブロック ------" }}
echo "1スペースインデント。--------------- ここは本文 ---------------"
echo "2スペースインデント"
echo "3スペースインデント。--------------- ここまでは本文 ---------------"
echo "4スペースインデント。--------------- ここからコードブロック ---------------"
echo "5スペースインデント"
echo "6スペースインデント"
echo "1タブインデント"
echo "2タブインデント"
echo "4スペースインデント。前行は1タブスペース"
echo "4スペースインデント。前行は1スペース。------ ここまでコードブロック ------"
コードブロックの入れ子 *1*2
3個以降連続する`及び3個以降連続する~の内、コードブロック内で使用されていないもので上下を挟むか、インデントでのコードブロックを使用します。
{{markdown ````` text 入れ子1段目 ```` text 入れ子2段目 ~~~ fswiki 入れ子3段目 {{markdown ``` shell echo "入れ子4段目" ``` }} ~~~ ```` ````` }}
入れ子1段目
```` text
入れ子2段目
~~~ fswiki
入れ子3段目
{{markdown
``` shell
echo "入れ子4段目"
```
}}
~~~
````
LaTeX埋込 拡張構文 *1*2*3
本構文を利用するには、まず Discount 2.2.3以降を使用している Discount.pm 中のランタイムフラグに MKD_LATEX() を追加します。
これにより、$$…$$、\[…\]、\(…\) のいずれかで挟まれている中身は (前述の実体参照符号化を除いて)そのまま出力されるようになります。
ただし、以下の注意が必要です。
・間に空行を入れられません。 ・Discount 2.2.7 (v2maint 34a8ebb)では、Markdownブロック中の「\」は「\\」にエスケープする必要があります。具体的には、 ・\[…\]、\(…\) は \\[…\\] または \\(…\\))とし、 ・LaTeXで改行を意味する「\\」は「\\\\」に変更する必要があります。
さらに、LaTeX として出力するためには、 MathJax などの設定を行う必要があります。詳しくは 、こちらの MathJax の設定に関する記述をご参照下さい。
Markdownブロック内での記述
{{markdown <!-- MathJaxで表示するページに以下を追加します。CSPでのURLの許可も必要になります。 --> <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script> }}
行内に LaTeX を表示させる場合
`\\(` と `\\)` で(空行を入れず)挟みます。
{{markdown 例えば、 \\( \sin^{2} \theta + \cos^{2} \theta = 1 \\) のように。 }}
例えば、
`\\[` と `\\]`、または、`$$` と `$$` で(空行を入れず)挟む場合、
{{markdown 以下のように \\[ \tan \theta = \frac{\sin \theta}{\cos \theta} \\] および $$ \lim_{h \to 0} \frac{f(x+h) - f(x)}{h} $$ の数式は、 1行で記述したとしても独立した行に表示されます。 }}
以下のように
`\begin` `\end` で挟まれていれば、`$$…$$, \\[…\\], \\(…\\) ` は不要です。 また、LaTeX で改行を意味する「\\」は「\\\\」に変更する必要があります。
{{markdown \begin{eqnarray} x & = & \sum_{i=1}^n i \\\\ & = & \frac{n (n+1)}{2} \\\\ & \leq & \alpha \end{eqnarray} }}
MathMLの記述はそのまま Markdownブロック内に張り付けます。
{{markdown <math xmlns="http://www.w3.org/1998/Math/MathML" display="block"> <mfrac> <mn>4</mn> <mn>3</mn> </mfrac> <mi>π</mi> <msup> <mi>r</mi> <mn>3</mn> </msup> </math> }}
MathJaxで表示された数式から、それに対応する MathML や LaTeX での記述を得る方法につきましては、こちらなどをご参照下さい。
Markdownブロック外での記述
上記の script タグが追加されたページは、Markdownブロック外においても(整形済テキストの範囲を除いて)
Markdownブロック内との違いは以下のとおりです。
行内に表示させる場合
- `\\(` と `\\)` の代わりに `\(` と `\)` を使います。ただし、行頭では使えません。
例えば、\( a_2 x^2 + a_1 x + a_0 = \frac{1}{2} \) のように使います。
例えば、
独立した行に表示させる場合
- `\\[` と `\\]` の代わりに `\[` と `\]` を使います。ただし、行頭では使えません。 - `$$` と `$$` は行頭でも使えます。
例えば、 $$ \frac{4}{3} \pi r^3 $$のように。 行頭以外では \[ \frac{\sqrt{(x^{2}+1)}}{c_4} \] などの記述も可能です。
例えば、
- `\begin`、`\end` の書式は `$$` と `$$` で挟み、行頭がスペースや `\` にならないようにします。 - LaTeX で改行を意味する「\\」を「\\\\」に変更する必要はありません。
$$ \begin{pmatrix} a & b \\ c & d \end{pmatrix} $$
なお、Markdownブロック外でのみ LaTeX を表示させるのであれば tex2jax の後継 を検討するという方法もあります。
既知の不具合
FSWikiのPDFプラグインでは、Markdownブロック内の記述は表示されません。
- [解決策] PDFへはWebブラウザなどを用いてご変換下さい。
- [設定例] 印刷で「PDFとして保存」、「レイアウト:縦」を選択し、「その他の設定」で「拡大/縮小(%)」を Chrome や Edge では 120 辺り、「余白: なし」に設定し、「 背景グラフィクス」にチェックを入れます。