コードブロック入力例を他項目の書式と統一

elchikaの投稿エディタは、Markdown記法を採用しています。Markdownとは、ドキュメントや記事を作成するための軽量マークアップ言語です。 こちらを使うと、HTMLのタグを記述するよりも簡単に文字の装飾・調整を行うことができ、効率よく記事を作成できます。 最初は基本的な記法を覚えるのが大変ですが、慣れると手軽に記述できるようになるのでぜひ活用してみてください。 この記事ではelchikaで使用できる記法を紹介していきます。 ## 見出し テキストに見出しを付けるには、`#`を使います。 **入力例** ``` # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ``` **実際の表示**  ## 太字（ボールド） テキストを太字にして強調するときは`**` `**`を使います。 投稿エディタの入力補助ボタンからも使用できます。 **入力例** ``` **テキスト** ``` **実際の表示** **テキスト** ## 斜体（イタリック） テキストを斜体にしたいときは`*` `*`を使います。これは英数字のみに対応しています。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` *Text* ``` **実際の表示** *Text* ※`*`は`_`（アンダーバー）でも代用可能です。 ## 打ち消し線 テキストに打ち消し線を入れたいときは`~~` `~~`を使います。一度書いた文章の訂正などに便利です。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` ~~テキスト~~ ``` **実際の表示** ~~テキスト~~ ## 段落わけ 書いたテキストの段落をわける場合は`空の行（通常の改行）`を挟みます。 **入力例** ``` 段落①テキストテキストテキストテキスト テキストテキストテキストテキスト 段落②テキストテキストテキストテキスト ``` **実際の表示** 段落①テキストテキストテキストテキスト テキストテキストテキストテキスト 段落②テキストテキストテキストテキスト ## コードブロック 本文中にコードを挿入するときは、テキストを` ``` `で囲みます。シンタックスハイライトを有効にしたい場合は`:` `タイトル`の前に言語名を記述してください。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例**

**実際の表示** ```HTML:タイトル <h1>見出し</h1> <p>テキスト</p> ``` ## インラインコード 文中にコードを挿入したいときは「`」で囲みます。 **入力例** ``` テキスト`インラインコード`テキスト ``` **実際の表示** テキスト`インラインコード`テキスト ## 引用文 他の記事やWebサイトから引用したいときは`>`を使います。 なお、引用する際はURLや出典元を明記してください。 引用文も投稿エディタの入力補助ボタンが使用できます。 **入力例** ``` > テキスト > テキストテキスト ``` **実際の表示** > テキスト > テキストテキスト ## 列挙リスト 記事にリストを作りたいときは`-`と`半角スペース`を使います。 また、先頭に半角スペースを4つ入力された行は入れ子になります。 投稿エディタの入力補助ボタンが使用できます。 **入力例** ``` - リスト - リスト - リスト ``` **実際の表示** - リスト - リスト - リスト ## 順序リスト リストに番号を振りたいときは`1.`を使います。 こちらも投稿エディタの入力補助ボタンが使用可能です。 **入力例** ``` 1. テキスト 2. テキスト 3. テキスト 1. テキスト 2. テキスト ``` **実際の表示** 1. テキスト 1. テキスト 1. テキスト 1. テキスト 1. テキスト ## テーブル テーブルは、以下の方法で挿入できます。 テーブルも入力補助ボタンが使用可能です。 **入力例** ``` |ヘッダー1|ヘッダー2|ヘッダー3| |---|---|---| |テキスト|テキスト|テキスト| |テキスト|テキスト|テキスト| ``` **実際の表示** |ヘッダー1|ヘッダー2|ヘッダー3| |---|---|---| |テキスト|テキスト|テキスト| |テキスト|テキスト|テキスト| また以下のように`:`を記述することでテキストの左揃え、中央揃え、右揃えが調節可能です。 **入力例** ``` |ヘッダー1|ヘッダー2|ヘッダー3| |:---|:---:|---:| |左|中央|右| |左|中央|右| ``` **実際の表示** |ヘッダー1|ヘッダー2|ヘッダー3| |:---|:---:|---:| |左|中央|右| |左|中央|右| ## 水平線 記事中に水平線を入れたいときは`---`を使います。その際、水平線のすぐ上のテキストは見出しになります。 **入力例** ``` --- ↑ノーマルな水平線 ``` ``` テキスト --- ↑見出しになる水平線 ``` **実際の表示** --- ↑ノーマルな水平線 テキスト --- ↑見出しになる水平線 ## リンクの挿入 リンクを挿入したい場合は`[]()`を使います。 リンクにしたいテキストを`[]`で囲み、リンク先のURLを`()`で指定します。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` [elchika](https://elchika.com) ``` **実際の表示** [elchika](https://elchika.com) ## 画像の挿入 画像を挿入したい場合は`![]()`を使います。画像のalt属性を`[]`で指定し、画像のURLを`()`内に記入します。 まず、挿入したい画像をドラッグ&ドロップするか、クリップボードからアップロードしてください。 - Windowsでクリップボードからアップロードする場合 `Ctrl + V ` - Macでクリップボードからアップロードする場合 `command + V ` 投稿エディタの入力補助ボタンから画像をアップロードすることも可能です。 なお、ご不便をおかけしますが現在画像のリサイズは行えません。 推奨する画像の仕様は下記の通りです。 - 形式 jpg / png / gif - 解像度 推奨：1920x1080px以下。 **画像は4:3の比率と異なると自動でトリミングされて表示されますのでご注意ください**。 画像をタップするとトリミング前の画像が拡大表示されます。 - ファイルサイズ上限 5MB **入力例** ```  ``` **実際の表示**  ## チェックマーク テキストを`==`で囲むと、チェックマークがつけられます。まとめるときに使える装飾です。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` ==まとめ テキストテキストテキストテキスト== ``` **実際の表示** ==まとめ テキストテキストテキストテキスト== ## 追記マーク テキストを`++`で囲むと、追記に使える装飾がつけられます。 チェックマークと同様、投稿エディタの入力補助ボタンが使用可能です。 **入力例** ``` ++追記 テキストテキストテキストテキスト++ ``` **実際の表示** ++追記 テキストテキストテキストテキスト++ ## 絵文字も使える elchikaの投稿エディタでは、絵文字も使えます:ok_hand: **入力例** ``` :smile: :high_brightness::bulb:elchika:bulb::high_brightness: ``` **実際の表示** :smile: :high_brightness::bulb:elchika:bulb::high_brightness: ## 数式 KaTeXの記法を用いて、書式付けされた数式を記述することができます。 ++参考リンク：KaTeXがサポートしている構文 https://katex.org/docs/support_table.html++ KaTeXは組版処理システムとして馴染み深いTeXをベースにしており、行中に埋め込むインライン形式と、単体の段落として表示するブロック形式が利用できます。 数式の前後を```$```（半角のドル1つ）で囲むとインライン形式で表示します。 **入力例** ``` $X_L$と$X_C$は次式のようになります。 インダクタのインピーダンス: $X_L = j \omega L$ キャパシタのインピーダンス: $X_C = \dfrac{1}{j \omega C}$ ``` **実際の表示** $X_L$と$X_C$は次式のようになります。 インダクタのインピーダンス: $X_L = j \omega L$ キャパシタのインピーダンス: $X_C = \dfrac{1}{j \omega C}$ また、数式の前後を`$$`（半角のドル2つ）で囲むとブロック形式の中央揃えで表示します。 **入力例** ``` **オームの法則** $$V = IR$$ **ジュール熱の定義** $$Q = RI^2t$$ **オームの法則を用いたジュール熱** $$Q = RI^2t = VIt = \frac{V^2}{R}t$$ **共振周波数** $$f_0 = \frac{1}{2\pi\sqrt{LC}}$$ **インダクタンス** $$ L = \frac{1}{4\pi^2f^2C} $$ ``` **実際の表示** **オームの法則** $$V = IR$$ **ジュール熱の定義** $$Q = RI^2t$$ **オームの法則を用いたジュール熱** $$Q = RI^2t = VIt = \frac{V^2}{R}t$$ **共振周波数** $$f_0 = \frac{1}{2\pi\sqrt{LC}}$$ **インダクタンス** $$ L = \frac{1}{4\pi^2f^2C} $$ ## PlantUMLに対応 elchikaの投稿エディタはPlantUMLに対応しています。 PlantUMLはテキストで入力した情報を画像化してくれる言語です。 コードブロックで囲み、タイトルの前に`plantuml`を記述するとPlantUMLを使用できます。詳しい記法については[PlantUML 概要（外部サイト）](http://plantuml.com/ja/)をご覧ください。 **入力例** ``` :::plantuml:ここにタイトル @startuml (*) --> "大きい桃が流れてくる" If "拾う？" then --> [美味しそうなので拾う] "桃太郎の誕生" -->[桃太郎が鬼退治する] "めでたしめでたし" -->(*) else --> [洗濯が忙しいので拾わない] "何も始まらない" Endif @enduml ::: ``` **実際の表示** :::plantuml:桃太郎遷移図 @startuml (*) --> "大きい桃が流れてくる" If "拾う？" then --> [美味しそうなので拾う] "桃太郎の誕生" -->[桃太郎が鬼退治する] "めでたしめでたし" -->(*) else --> [洗濯が忙しいので拾わない] "何も始まらない" Endif @enduml ::: ## 外部サービスの埋め込み

**入力例** ```

@[youtube](https://www.youtube.com/watch?v=lJIrF4YjHfQ) ``` **実際の表示**

@[youtube](https://www.youtube.com/watch?v=lJIrF4YjHfQ)