Markdown

Markdownは、this.kiji.is ドメインからの配信時にHTMLに自動的に変換されます。

見出し

行頭に「#」を入れると見出しになり、「#」の数が見出しのレベルになります。「#」は6つまで入れられます。

# レベル1の見出し
## レベル2の見出し
...
###### レベル6の見出し

上記は、以下のようなHTMLに変換されて表示されます。

<h1>レベル1の見出し</h1>
<h2>レベル2の見出し</h2>
...
<h6>レベル6の見出し</h6>

段落

空行によって段落を分けられます。

これは1つめの段落です。2つの文があります。

これは2つめの段落です。ここにも2つの文があります。

これは3つめの段落です。ここにも2つの文があります。

上記は、以下のようなHTMLに変換されて表示されます。

<p>これは1つめの段落です。2つの文があります。</p>

<p>これは2つめの段落です。ここにも2つの文があります。</p>

<p>これは3つめの段落です。ここにも2つの文があります。</p>

改行

行末に半角スペースを2つ連続で付け加えることで改行ができます。

強調

*(アスタリスク1つ)または_(アンダースコア1つ)で囲んだ部分は、強調され斜体として表示されます。また、**(アスタリスク2つ)または__(アンダースコア2つ)で囲んだ部分は、強く強調され太字として表示されます。入れ子にすることも可能です。

*強調* もしくは _強調_

上記は、以下のようなHTMLに変換されます。

<em>強調</em> もしくは <em>強調</em> <strong>強い強調</strong> もしくは <strong>強い強調</strong>

打ち消し

~(チルダ2つ)で囲んだ部分は、打ち消し線が表示されます。

~~打ち消し~~

上記は、以下のようなHTMLに変換されます。

<del>打ち消し</del>

リンク

リンクは、[リンクのテキスト](リンクのアドレス) のように記述できます。

[exampleへのリンク](http://www.example.com/)

上記は、以下のようなHTMLに変換されます。

<a href="http://www.example.com/">exampleへのリンク</a>

リスト

行頭に「*」「+」「-」のいずれかを入れると、Disc型(順番なし)のリストになります。「*」「+」 「-」の後には半角スペースが必要です。また、リストの上下には空行が必要です。 行頭に半角ス ペースを2ついれると、インデントされます。なお、標準のMarkdown記法では文頭に「数字.」を入れるとDecimal型(順番あり)のリストになりますが、nor.のMarkdown記法では対応していません。

以下は、リストの例です。

* 色は匂へど
* 散りぬるを
  - 我が世誰ぞ
  - 常ならむ
+ 有為の奥山

上記は、以下のようなHTMLに変換されます。

<ul>
  <li>色は匂へど<li>
  <li>散りぬるを</li>
    <ul>
      <li>我が世誰ぞ</li>
      <li>常ならむ</li>
    </ul>
  </li>
  <li>有為の奥山</li>
</ul>

引用

行頭に「>」を入れると、その行が引用になります。「>」の後には半角スペースが必要です。また、引用の上下には空行が必要です。

> このテキストは引用文の1行目です。
> このテキストは引用文の2行目です。

上記は、以下のようなHTMLに変換されます。

<blockquote>
<p>
このテキストは引用文の1行目です。
このテキストは引用文の2行目です。
</p>
</blockquote>

また、オプションとして出典名と出典URLを入れられます。出典名だけでも問題ありません。

> このテキストは引用文の1行目です。
> このテキストは引用文の2行目です。
> cite: [出典名](http://example.com)

上記は、以下のようなHTMLに変換されます。

<blockquote>
<p>このテキストは引用文の1行目です。</p>
<p>このテキストは引用文の2行目です。</p>
<footer>
<p><cite><a href="http://example.com">出典名</a></cite></p>
</footer>
</blockquote>

囲み

前後を「~~~」で枠で囲んだ行は、内容が囲まれます。

~~~
このテキストは囲みの1行目です。
このテキストは囲みの2行目です。
~~~

上記は、以下のようなHTMLに変換されます。

<div>
  <p>このテキストは囲みの1行目です。</p>
  <p>このテキストは囲みの2行目です。</p>
</div>

整形済みテキスト

前後を「```」で枠で囲んだ行は、等幅フォントでスペースと改行もそのまま表示します。

```
このテキストは  整形済みの1行目です。
このテキストは整形済みの 2行目です。
```

上記は、以下のようなHTMLに変換されます。

<pre>
このテキストは  整形済みの1行目です。
このテキストは整形済みの 2行目です。
</pre>

罫線

3つ以上の*(アスタリスク), -(ハイフン), _(アンダースコア)と半角スペースのみの行は、罫線として扱われます。

******

上記は、以下のようなHTMLに変換されます。

<hr />

画像の埋め込み

画像を埋め込む場合は、contentsholder/images.upload APIで先に画像をアップロードしておく必要があります。このAPIのレスポンスから取得できる画像IDを使用して、[[image]](画像ID)というタグを本文の表示したい箇所に記述します。これは、標準のMarkdown記法にはないnor.独自の記法です。

以下は、画像IDが"2345678"の画像を埋め込む場合の例です。

[[image]](2345678)

上記は、以下のようなHTMLに変換されます。altは常に"画像"が入ります。

<img src=“https://img.nordot.jp/ch/images/2345678/origin_1.jpg” alt=“画像“>

また、属性を指定して表示をカスタマイズすることも可能です。[[image]](画像ID){key=value}という形式で末尾に指定します。

エラーコード デフォルト値 説明
float none

画像の配置を指定する。

none: 配置を指定しない

left: 左に配置する(本文を右に回り込ませる)

right: 右に配置する(本文を左に回り込ませる)

width auto

画像の幅を指定する。

auto: 幅を指定しない

px: ピクセル数で指定する(例: 400px)

以下は、属性を指定した例です。

[[image]](2345678){float=left}
[[image]](2345678){width=200px}
[[image]](2345678){float=left width=200px}

以下は、this.kiji.is ドメインから配信するときの表示仕様です。

スマートフォン

float=none

width=autoは、入稿サイズで左右中央揃えして表示。最大で本文幅の100%
width=pxは、指定サイズで左右中央揃えして表示。最大で本文幅の100%

float=right または float=left

width=autoは、入稿サイズで本文幅内に右/左寄せして表示。最大で本文幅の38.2%
width=pxは、指定サイズで本文幅内に右/左寄せして表示。最大で本文幅の38.2%

PC

float=none

width=autoは、入稿サイズで左右中央揃えして表示。最大で本文幅の100%(640px)
width=pxは、指定サイズで左右中央揃えして表示。最大で本文幅の100%(640px)

float=right または float=left

width=autoは、入稿サイズで本文幅内に右/左寄せして表示。最大で244px
width=pxは、指定サイズで本文幅内に右/左寄せして表示。最大で244px

動画の埋め込み

動画を埋め込めます。これは、標準のMarkdown記法にはないnor.独自の記法です。現在、YouTube、Vimeoの動画に対応しています。

YouTube動画を埋め込む例

[[embed-youtube]](https://www.youtube.com/watch?v=Sq5QW3YqipM)

Vimeo動画を埋め込む例

[[embed-vimeo]](https://vimeo.com/145667721)

BrightCove動画を埋め込む例

[[embed-brightcove]](http://players.brightcove.net/4373551972001/rJeyg92aW_default/index.html?videoId=5662917081001)

SNSの埋め込み

SNSのツイートやポストを埋め込めます。これは、標準のMarkdown記法にはないnor.独自の記法です。現在、Twitter、Facebook、Instagramに対応しています。

Twitterのツイートを埋め込む例

[[embed-twitter]](https://twitter.com/Twitter/status/863846426383704064)

Facebookのポストを埋め込む例

[[embed-facebook]](https://www.facebook.com/Engineering/posts/10155225879772200)

Instagramのポストを埋め込む例

[[embed-instagram]](https://www.instagram.com/p/BUIkhi0jpyj/)

OGP情報の埋め込み

ウェブページのOGP情報を埋め込めます。これは、標準のMarkdown記法にはないnor.独自の記法です。

以下は、URLが"https://this.kiji.is/1234567"のウェブページのOGPを埋め込む場合の例です。

[[embed-page]](https://this.kiji.is/1234567)

エスケープ

以下のMarkdownの特殊文字を表示させるには、\(バックスラッシュ)を特殊文字の前に挿入する 必要があります。

\ ` * _ {} [] () # + - . !