elchika が 2019年10月17日18時16分14秒 に編集
外部サービスを埋め込む構文の説明を追加
本文の変更
elchikaの投稿エディタは、Markdown記法を採用しています。Markdownとは、ドキュメントや記事を作成するための軽量マークアップ言語です。 こちらを使うと、HTMLのタグを記述するよりも簡単に文字の装飾・調整を行うことができ、効率よく記事を作成できます。 最初は基本的な記法を覚えるのが大変ですが、慣れると手軽に記述できるようになるのでぜひ活用してみてください。 この記事ではelchikaで使用できる基本的な記法を紹介していきます。 ## 見出し テキストに見出しを付けるには、`#`を使います。 **入力例** ``` # 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6 ``` **実際の表示** ![見出し.png](http://storage.googleapis.com/elchika/static/editor/見出し.png) ## 太字(ボールド) テキストを太字にして強調するときは`**` `**`を使います。 投稿エディタの入力補助ボタンからも使用できます。 **入力例** ``` **テキスト** ``` **実際の表示** **テキスト** ## 斜体(イタリック) テキストを斜体にしたいときは`*` `*`を使います。これは英数字のみに対応しています。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` *Text* ``` **実際の表示** *Text* ※`*`は`_`(アンダーバー)でも代用可能です。 ## 打ち消し線 テキストに打ち消し線を入れたいときは`~~` `~~`を使います。一度書いた文章の訂正などに便利です。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` ~~テキスト~~ ``` **実際の表示** ~~テキスト~~ ## 段落わけ 書いたテキストの段落をわける場合は`空の行(通常の改行)`を挟みます。 **入力例** ``` 段落①テキストテキストテキストテキスト テキストテキストテキストテキスト 段落②テキストテキストテキストテキスト ``` **実際の表示** 段落①テキストテキストテキストテキスト テキストテキストテキストテキスト 段落②テキストテキストテキストテキスト ## コードブロック 本文中にコードを挿入するときは、テキストを` ``` `で囲みます。シンタックスハイライトを有効にしたい場合は`:` `タイトル`の前に言語名を記述してください。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** >` ``` `html:タイトル ><h1>見出し</h1> > <p>テキスト</p> >` ``` ` **実際の表示** ```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を`()`内に記入します。 投稿エディタの入力補助ボタンから画像をアップロードしてください。 **入力例** ``` ![elchikaロゴ](https://camo.elchika.com/5d793121c753d1e3ee9d78093de1cc1dbaff1bf9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f30303030303030302d303030302d303030302d303030302d3030303030303030303030302f34393735326639392d383937332d346133312d383765372d363138313430356535616637/) ``` **実際の表示** ![elchikaロゴ](https://camo.elchika.com/5d793121c753d1e3ee9d78093de1cc1dbaff1bf9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f30303030303030302d303030302d303030302d303030302d3030303030303030303030302f34393735326639392d383937332d346133312d383765372d363138313430356535616637/) ## チェックマーク テキストを`==`で囲むと、チェックマークがつけられます。まとめるときに使える装飾です。 こちらも投稿エディタの入力補助ボタンが使えます。 **入力例** ``` ==まとめ テキストテキストテキストテキスト== ``` **実際の表示** ==まとめ テキストテキストテキストテキスト== ## 追記マーク テキストを`++`で囲むと、追記に使える装飾がつけられます。 チェックマークと同様、投稿エディタの入力補助ボタンが使用可能です。 **入力例** ``` ++追記 テキストテキストテキストテキスト++ ``` **実際の表示** ++追記 テキストテキストテキストテキスト++ ## 絵文字も使える elchikaの投稿エディタでは、絵文字も使えます:ok_hand: **入力例** ``` :smile: :high_brightness::bulb:elchika:bulb::high_brightness: ``` **実際の表示** :smile: :high_brightness::bulb:elchika:bulb::high_brightness: ## 数式 数式の前後を`$$`(半角のドル2つ)で囲むとKaTeXによって数式を記述できます。 **入力例** ``` **オームの法則** $$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 :::
## 外部サービスの埋め込み 現在、XのPOSTと、Youtubeの動画の埋め込みに対応しています。 **入力例** ``` @[x](https://x.com/elchika_info/status/1180987571456729088) @[youtube](https://www.youtube.com/watch?v=lJIrF4YjHfQ) ``` **実際の表示** @[x](https://x.com/elchika_info/status/1180987571456729088) @[youtube](https://www.youtube.com/watch?v=lJIrF4YjHfQ)