マークダウンの拡張

Book, Quiz, Challengeともにマークダウン部分のHTML変換にはmarkedをベースとした独自拡張を使用しています。(CSSはそれぞれで少し異なりますが、HTMLへの変換部分はすべて同じです。)

以下ではマークダウンで使用可能な拡張について説明します。

画像に対してCSSを指定する

マークダウン記法では画像の幅を指定することができませんが、trackでは独自拡張により画像に対して任意のCSSを指定することができます。 (この方法でwidthが明示されない場合は、デフォルトでは参照された画像はwidth:100%で描画されます。)

画像に対してCSSを指定する場合は画像URLの後ろに空白を挟んで""で括って指定します。

![画像1](images/image1.png "width:100px;border:1px solid #FFF;")

マークダウン仕様では最後の""で括られた部分は画像のtitle属性とされています。 しかし、実際には先頭の[]の部分でalt属性が指定されているため、ほとんど使用されることはありません。

trackではこの部分を画像のtitleではなくstyle属性にそのままマッピングしています。

コードブロック

通常のマークダウン同様3つ以上のバッククォート(`)を使ってコードブロックを記述することができます。 コードブロックでは自動的にシンタックスハイライトされますが、開始のバッククォートの後ろに言語名を記述することで言語を明示することができます。 また、言語名にplainを指定することでシンタックスハイライトを無効化できます。


// 言語未指定のコードブロック。汎用的なハイライトが適用されます。
var a = 1;
```

``` javascript
// 言語を明示したコードブロック
var a = 1;
```

``` plain
// シンタックスハイライトを無効化
var a = 1;


数式サポート(Katex)

Markdown中でKatexを使用することができます。 Katexの文法についてはKatexのドキュメントを参照してください。

(注意) Katexの括り文字には\\( 〜 \\)を使用してください。$はデフォルトの穴埋めの指定文字となっているため使用できません。

回答が見つかりましたか?