記事の書き方 〜マークダウンエディタ編〜

間渕 紀彦 / Norihikko Mabuchi
  • 更新

Kibelaでは、ツールバーからボタンを選択して文書を整形する「リッチテキストエディタ」と、Markdown（マークダウン）という記法で整形できる「マークダウンエディタ」の2種類の方法で記事を書くことができます。

ここではマークダウンエディタで使えるMarkdown記法についてご紹介します。

見出し

行頭に # (シャープと半角スペース) をつけると見出しになります。
#の直後には半角スペースが必ず必要です。
# は1個から6個まで連続で書くことで、見出しレベルを変更できます。

# 見出しレベル1

## 見出しレベル2

### 見出しレベル3

#### 見出しレベル4

##### 見出しレベル5

###### 見出しレベル6


見出しを作ることで、記事のサイドバーに目次が表示されます。

箇条書き

黒丸付き、番号付きなどの箇条書きになります。
行頭にスペースを4つ挿入すると、インデントすることができます。

1. 林檎
2. 桃
3. 梨

- 林檎
    - 桃
       - 梨

 

記事を書く際に「？」マークからいつでもMarkdownの書き方を確認することができますので、ぜひご活用ください。 

Image from Gyazo

強調

テキストを**（2つのアスタリスク）で囲むと、強調（太字）になります。
また、アスタリスク1つだと強調（イタリック）になります。
記法の前後にスペースが必要なことがあります。

例:

*イタリック・テキスト*
**強調（太字）**
***イタリック&強調（太字）***
---
イタリック・テキスト
強調（太字）
イタリック&強調（太字）

 

アンカー

別ページや別の指定箇所にジャンプすることができます。
一般的なアンカーは、次のような書式で書きます。

例:

[ジャンプ先のアンカーに飛びます](#ジャンプ先のアンカー)

Image from Gyazo

 

Kibela内の記事であれば、リンクテキストがタイトルに置き換えられます。

別タブでリンクを開く際は、下記書式で設定いただけます。
「URL」にリンクURLを記述し、「リンク」に希望のタイトルを記述します。

<a href="URL" target="_blank">リンク</a>

 

表

Markdownでかんたんな表を作成することが可能です。

 
記述方法
見出し1 | 見出し2 
--------- | --------- 
セル1 | セル2
結果

表.png

 

セル内で改行する

<br>タグを挿入することとセル内で改行できます。

記述方法
見出し1 | 見出し2 
--------- | --------- 
セル1 | セル2<br>セル2.5
結果
__.png

 

テキストを右寄せ・中央寄せ・左寄せする

表の2行目にコロン「：」を入れて調整します。

 
記述方法
見出し1 | 見出し2 | 見出し3
 :--- | :---: | ---: 
左寄せ | 中央寄せ | 右寄せ

結果

__.png

 

ExcelやGoogleスプレッドシートの表を張り付けたい場合にはCSV形式で可能です。
詳細はこちらを参照ください。

 

コード

テキストを`（バッククォート）で囲むと、 コード片やファイル名のためのコード記法になります。
コード記法は等幅フォントになります。

 

コードブロック

パラグラフを``` （バッククォート3つ）または ~~~ （チルダ3つ）で囲むと、コードブロック記法になります。
開始マーカーの直後にラベルとしてプログラミング言語名を書くと、ソースコードをその言語に従ってハイライトできます。またファイル名を書くとプログラミング言語名を推定します。ファイル名からプログラミング言語が推定されなかった場合、 ruby:Gemfile  というようにプログラミング言語名:ファイル名とすることもできます。

例:

コードブロック.png

 

PlantUML記法

コードブロック記法に{plantuml} というラベルを使うと、PlantUML記法になります。
PlantUML記法では、PlantUMLでシーケンス図やコンポーネント図などのUMLを描画できます。

例:

plantuml.png

※ 初期はPlantUML記法のラベルとしてplantumlを採用していましたが、現在は{plantuml}を奨励しています。PlantUMLのサンプル集としてはReal World PlantUMLがあります。

 

LaTeX記法

コードブロック記法に{latex}というラベルを使うと、LaTeX記法となりMathJaxのdisplayMathとして数式を書けるようになります。また、$` ... `$で囲むと構文は同じでMathJaxのinlineMathになり、数式をテキスト中に埋め込めるようになります。

例:

mathjax.png

MathJaxによるLaTeX記法のサンプル集としては、MathJax basic tutorial and quick reference があります。 

関連記事