¶ 概要
Markdownは、プレーンテキストフォーマットの構文を持つ軽量なマークアップ言語です。これはGitHubのような主要なコードリポジトリでドキュメントを書くための事実上の構文です。
本Wikiサイトは完全なCommonMark仕様をサポートしています。また、便利な拡張機能を追加しています(Github Flavored Markdownアドオンを含む)。
¶ ユーザーガイド
¶ 引用
テキストの各行の前に 大なり 記号を使用し、その後にスペースを付けます。
- テキストを選択してから、ツールバーの「引用」ボタンをクリックします。
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ブロッククオートの後に別の行にクラスを追加することで、ブロッククオートの外観を変更することができます。これらのスタイルはWiki.jsに特有のものであり、他のアプリケーションでは標準的なブロッククオートのスタイルにフォールバックすることに注意してください。
- 青色:
is-info - 緑色:
is-success - 黄色:
is-warning - 赤色:
is-danger
> Lorem ipsum dolor sit amet
> Consectetur adipiscing elit
{.is-info}
これはデフォルトのスタイル化されていないブロッククオートです。
これは
{.is-info}のブロッククオートです。
これは
{.is-success}のブロッククオートです。
これは
{.is-warning}のブロッククオートです。
これは
{.is-danger}のブロッククオートです。
¶ 太字
テキスト選択の前後に ダブルアスタリスク 記号を使用します。
- テキストを選択し、ツールバーの「太字」ボタンをクリックします。
- テキストを選択し、CTRL + Bを押します。
Lorem **ipsum** dolor
Lorem ipsum dolor
¶ コードブロック
テキスト選択の前後に、専用の行で 3つのグレイヴ・アクセント のシンボルを使用します。
- 左ツールバーのCode Blockツールを使用します。
```
function lorem (ipsum) {
const dolor = 'consectetur adipiscing elit'
}
```
デフォルトでは、コードブロックはプレーン・プレフォーマットされたテキストとして表示されます。しかし、プログラミングコードにはシンタックスハイライトを使用して読みやすくすることが望ましいです。コードブロックで使用されているプログラミング言語を指定するには、最初の3つのグレイヴ・アクセントの直後に言語キーワードを追加するだけです。
```java
// some code here
```
約185種類の対応プログラミング言語のリファレンスリストを参照してください。
¶ コンテンツタブ
ヘッダを使用し、親ヘッダに {.tabset} クラスを追加します。親ヘッダのテキストは最終結果には表示されません。
子ヘッダのレベルが1つ上であれば、どのようなヘッダレベルを使用してもよいことに注意してください。例えば、親ヘッダが ### (h3) の場合、タブヘッダは #### (h4) でなければなりません。親ヘッダの最大レベルは5、子ヘッダの最大レベルは6です。
# Tabs {.tabset}
## First Tab
Any content here will go into the first tab...
## Second Tab
Any content here will go into the second tab...
## Third Tab
Any content here will go into the third tab...
¶ 絵文字
構文 :識別子: を使用する。
可能な選択肢の一覧は、絵文字チートシートを参照してください。
:apple:
Can be also be used :fire: inline
Can also be used 
inline.
¶ 脚注
本文中の脚注の位置には [^1]、実際の脚注には [^1]: これは脚注です という構文を使います。 脚注自体は自動的にページの下の方に横線の下に表示されます。
¶ ヘッダー
テキスト選択の前に、1～6個の ハッシュタグ シンボルを使用し、その後にスペースを付けてください。
- 希望の行を選択し、ツールバーの「ヘッダー」ドロップダウンボタンをクリックします。
- 目的の行で、CTRL + ALT + Rightを押してヘッダーレベルを上げます。
- 目的の行で、CTRL + ALT + Leftを押してヘッダーレベルを下げます。
# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6
¶ 水平ライン
Using triple dash symbols on a dedicated line.
- By clicking the
button in the toolbar.
Lorem ipsum dolor
---
Consectetur adipiscing elit
Lorem ipsum dolor
Consectetur adipiscing elit
¶ Images
Using the syntax .
- Using the Assets tool in the left toolbar.
Consectetur  elit
Sometimes images are too large or maybe you want the image to fill up all the available space.
Simply at the dimensions at the end of the image path in the following format:
You can also omit one of the values to automatically keep the image ratio:
It’s also possible to use other units, like %. Useful when you need the image to take all the available space:
¶ Inline Code
Using a backtick symbol before and after the text selection.
- By selecting text, then clicking the
button in the toolbar.
Lorem `ipsum` dolor
Lorem ipsum dolor
¶ Italic
Using a single asterisk symbol before and after the text selection.
- By selecting text, then clicking the
button in the toolbar. - By selecting text, then pressing CTRL + I
Lorem *ipsum* dolor
Lorem ipsum dolor
¶ Keyboard Keys
Using <kbd> before and </kbd> after the text selection.
- By selecting text, then clicking the
button in the toolbar.
Lorem ipsum dolor <kbd>CTRL</kbd> + <kbd>C</kbd>
Lorem ipsum dolor CTRL + C
¶ Links
Using the syntax [Link Text](Link Target).
- Using the Link tool in the left toolbar.
[Lorem ipsum](https://wiki.js.org/about)
Consectetur [adipiscing](/install/requirements) elit
Consectetur adipiscing elit
¶ Mermaid Diagrams
Using a code block with the language mermaid.
Refer to Mermaid website for the language reference.
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
¶ Ordered Lists
Using an number, followed by a dot symbol, followed by a space, before each line of text.
- By selecting text, then clicking the
button in the toolbar.
1. Lorem ipsum dolor sit amet
1. Consectetur adipiscing elit
1. Morbi vehicula aliquam
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam
While you can number each line numerically in order, it’s easier to use the number 1 on each line. The final result will be incremented automatically. This way you don’t need to re-number every single line when adding or removing a line later on.
¶ PlantUML Diagrams
Using a code block with the language plantuml.
Refer to PlantUML website for the language reference.
```plantuml
Bob->Alice : hello
```
¶ Strikethrough
Using double tildes symbols before and after the text selection.
- By selecting text, then clicking the
button in the toolbar.
Lorem ~~ipsum~~ dolor
Lorem ipsum dolor
¶ Subscript
Using a single tilde symbol before and after the text selection.
- By selecting text, then clicking the
button in the toolbar.
Lorem ~ipsum~ dolor
Lorem ipsum dolor
¶ Superscript
Using a single caret symbol before and after the text selection.
- By selecting text, then clicking the
button in the toolbar.
Lorem ^ipsum^ dolor
Lorem ipsum dolor
¶ Task Lists
Using the syntax - [ ] or a - [x].
- [x] Checked task item
- [x] Another checked task item
- [ ] Unchecked task item
¶ Unordered Lists
Using an asterisk or a dash symbol, followed by a space, before each line of text.
- By selecting text, then clicking the
button in the toolbar.
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Morbi vehicula aliquam
By adding a class on a separate line, after the list, you can change the look of the list:
links-listgrid-list
For example:
- Grid Item 1
- Grid Item 2
- Grid Item 3
{.grid-list}
- [Lorem ipsum dolor sit amet *Subtitle description here*](https://www.google.com)
- [Consectetur adipiscing elit *Another subtitle description here*](https://www.google.com)
- [Morbi vehicula aliquam *Third subtitle description here*](https://www.google.com)
{.links-list}
will result in:
- Grid Item 1
- Grid Item 2
- Grid Item 3
and:
- Link Title 1 Subtitle description here
- Link Title 2 Another subtitle description here
- Link Title 3 Third subtitle description here
Note that these stylings are specific to Wiki.js and will fallback to standard list styling in other applications.