Markdown拡張利用方法

問題作成時に利用できるMarkdown書式のご紹介

宮嶋寛隆 avatar
対応者:宮嶋寛隆
一週間前以上前にアップデートされました

◾️Markdownの拡張について

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

以下ではMarkdownで使用可能な拡張について説明します。

※詳細のMarkdown記法に関しては「Markdown記法を活用する」をご確認ください。

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

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

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

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

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

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

◾️コードブロック

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

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

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

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


◾️数式サポート(Katex)

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

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

◾️オリジナル設問の作成方法の詳細

こちらの回答で解決しましたか?