elchikaのアイコン画像
elchika 2019年08月01日作成 (2021年08月11日更新)
閲覧数 10990
elchika 2019年08月01日作成 (2021年08月11日更新) 閲覧数 10990

elchikaで使えるMarkdown記法

elchikaの投稿エディタは、Markdown記法を採用しています。Markdownとは、ドキュメントや記事を作成するための軽量マークアップ言語です。

こちらを使うと、HTMLのタグを記述するよりも簡単に文字の装飾・調整を行うことができ、効率よく記事を作成できます。

最初は基本的な記法を覚えるのが大変ですが、慣れると手軽に記述できるようになるのでぜひ活用してみてください。

この記事ではelchikaで使用できる記法を紹介していきます。

見出し

テキストに見出しを付けるには、#を使います。

入力例

# 見出し1 ## 見出し2 ### 見出し3 #### 見出し4 ##### 見出し5 ###### 見出し6

実際の表示

見出し.png

(補足)目次の生成

目次は、見出しの構成によって自動生成されます。
見出しが大きい順(h1→h2, h3→h5, ...など)に並んでいる場合に、階層が生成されます。
目次が上手く階層化されない場合は、#の数を確認してみてください。

入力例

## 使用したもの ### Arduino Uno R3 ### ブレッドボード ### LED ### 抵抗器 ## Lチカ回路を作成する ### LEDの極性について ### スケッチをArduinoに書き込む ### Lチカできた! ## まとめ ## 参考書籍

実際の表示 (参照記事)
目次

太字(ボールド)

テキストを太字にして強調するときは** **を使います。

投稿エディタの入力補助ボタンからも使用できます。

入力例

**テキスト**

実際の表示

テキスト

斜体(イタリック)

テキストを斜体にしたいときは* *を使います。これは英数字のみに対応しています。

こちらも投稿エディタの入力補助ボタンが使えます。

入力例

*Text*

実際の表示

Text

*_(アンダーバー)でも代用可能です。

打ち消し線

テキストに打ち消し線を入れたいときは~~ ~~を使います。一度書いた文章の訂正などに便利です。

こちらも投稿エディタの入力補助ボタンが使えます。

入力例

~~テキスト~~

実際の表示

テキスト

段落わけ

書いたテキストの段落をわける場合は空の行(通常の改行)を挟みます。

入力例

段落①テキストテキストテキストテキスト テキストテキストテキストテキスト 段落②テキストテキストテキストテキスト

実際の表示
段落①テキストテキストテキストテキスト
テキストテキストテキストテキスト

段落②テキストテキストテキストテキスト

コードブロック

本文中にコードを挿入するときは、テキストを```で囲みます。シンタックスハイライトを有効にしたい場合は: タイトルの前に言語名を記述してください。

こちらも投稿エディタの入力補助ボタンが使えます。

入力例

```html:タイトル <h1>見出し</h1> <p>テキスト</p> ```

実際の表示

タイトル

<h1>見出し</h1> <p>テキスト</p>

インラインコード

文中にコードを挿入したいときは「`」で囲みます。

入力例

テキスト`インラインコード`テキスト

実際の表示
テキストインラインコードテキスト

引用文

他の記事やWebサイトから引用したいときは>を使います。

なお、引用する際はURLや出典元を明記してください。

引用文も投稿エディタの入力補助ボタンが使用できます。

入力例

> テキスト > テキストテキスト

実際の表示

テキスト
テキストテキスト

列挙リスト

記事にリストを作りたいときは-半角スペースを使います。

また、先頭に半角スペースを4つ入力された行は入れ子になります。

投稿エディタの入力補助ボタンが使用できます。

入力例

- リスト - リスト - リスト

実際の表示

  • リスト
  • リスト
    • リスト

順序リスト

リストに番号を振りたいときは1.を使います。

こちらも投稿エディタの入力補助ボタンが使用可能です。

入力例

1. テキスト 2. テキスト 3. テキスト 1. テキスト 2. テキスト

実際の表示

  1. テキスト
  2. テキスト
  3. テキスト
    1. テキスト
    2. テキスト

テーブル

テーブルは、以下の方法で挿入できます。

テーブルも入力補助ボタンが使用可能です。

入力例

|ヘッダー1|ヘッダー2|ヘッダー3| |---|---|---| |テキスト|テキスト|テキスト| |テキスト|テキスト|テキスト|

実際の表示

ヘッダー1 ヘッダー2 ヘッダー3
テキスト テキスト テキスト
テキスト テキスト テキスト

また以下のように:を記述することでテキストの左揃え、中央揃え、右揃えが調節可能です。

入力例

|ヘッダー1|ヘッダー2|ヘッダー3| |:---|:---:|---:| |左|中央|右| |左|中央|右|

実際の表示

ヘッダー1 ヘッダー2 ヘッダー3
中央
中央

水平線

記事中に水平線を入れたいときは---を使います。その際、水平線のすぐ上のテキストは見出しになります。

入力例

--- ↑ノーマルな水平線
テキスト --- ↑見出しになる水平線

実際の表示


↑ノーマルな水平線

テキスト

↑見出しになる水平線

リンクの挿入

リンクを挿入したい場合は[]()を使います。

リンクにしたいテキストを[]で囲み、リンク先のURLを()で指定します。

こちらも投稿エディタの入力補助ボタンが使えます。

入力例

[elchika](https://elchika.com)

実際の表示
elchika

画像の挿入

画像を挿入したい場合は![]()を使います。画像のalt属性を[]で指定し、画像のURLを()内に記入します。

まず、挿入したい画像をドラッグ&ドロップするか、クリップボードからアップロードしてください。

  • Windowsでクリップボードからアップロードする場合
    Ctrl + V

  • Macでクリップボードからアップロードする場合
    command + V

投稿エディタの入力補助ボタンから画像をアップロードすることも可能です。

なお、ご不便をおかけしますが現在画像のリサイズは行えません。

推奨する画像の仕様は下記の通りです。

  • 形式
    jpg / png / gif

  • 解像度
    推奨:1920x1080px以下。
    画像は4:3の比率と異なると自動でトリミングされて表示されますのでご注意ください
    画像をタップするとトリミング前の画像が拡大表示されます。

  • ファイルサイズ上限
    5MB

入力例

![elchikaロゴ](https://camo.elchika.com/5d793121c753d1e3ee9d78093de1cc1dbaff1bf9/687474703a2f2f73746f726167652e676f6f676c65617069732e636f6d2f656c6368696b612f76312f757365722f30303030303030302d303030302d303030302d303030302d3030303030303030303030302f34393735326639392d383937332d346133312d383765372d363138313430356535616637/)

実際の表示

elchikaロゴ

チェックマーク

テキストを==で囲むと、チェックマークがつけられます。まとめるときに使える装飾です。

こちらも投稿エディタの入力補助ボタンが使えます。

入力例

==まとめ テキストテキストテキストテキスト==

実際の表示
まとめ
テキストテキストテキストテキスト

追記マーク

テキストを++で囲むと、追記に使える装飾がつけられます。

チェックマークと同様、投稿エディタの入力補助ボタンが使用可能です。

入力例

++追記 テキストテキストテキストテキスト++

実際の表示
追記
テキストテキストテキストテキスト

絵文字も使える

elchikaの投稿エディタでは、絵文字も使えます👌

入力例

:smile: :high_brightness::bulb:elchika:bulb::high_brightness:

実際の表示

😄

🔆💡elchika💡🔆

数式

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}$

実際の表示

XLX_LXCX_Cは次式のようになります。
インダクタのインピーダンス: XL=jωLX_L = j \omega L
キャパシタのインピーダンス: XC=1jωCX_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=IRV = IR

ジュール熱の定義

Q=RI2tQ = RI^2t

オームの法則を用いたジュール熱

Q=RI2t=VIt=V2RtQ = RI^2t = VIt = \frac{V^2}{R}t

共振周波数

f0=12πLCf_0 = \frac{1}{2\pi\sqrt{LC}}

インダクタンス

L=14π2f2CL = \frac{1}{4\pi^2f^2C}

PlantUMLに対応

elchikaの投稿エディタはPlantUMLに対応しています。

PlantUMLはテキストで入力した情報を画像化してくれる言語です。

コードブロックで囲み、タイトルの前にplantumlを記述するとPlantUMLを使用できます。詳しい記法についてはPlantUML 概要(外部サイト)をご覧ください。

入力例

:::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)

実際の表示

ここに動画が表示されます

10
elchikaのアイコン画像
elchika公式アカウントです。
  • elchika さんが 2019/08/01 に 編集 をしました。 (メッセージ: 初版)
  • elchika さんが 2019/10/17 に 編集 をしました。 (メッセージ: 外部サービスを埋め込む構文の説明を追加)
  • Opening
    elchikaのアイコン画像 elchika 2019/11/20

    コメントも上記のMarkdown記法で書くことができます🍵

    elchikaのアイコン画像 elchika 2019/11/20

    記事にコメントするとスレッドが作成され、その議題に関して会話を展開できます

    1 件の返信が折りたたまれています
  • Opening
    AoiSayaのアイコン画像 AoiSaya 2020/04/16

    基本的な記法を紹介、とのことですが、書かれていないその他の記法も知りたいです。
    情報のあるページがあればURLでもいいので教えてください。
    例えばテーブル内で改行する方法が知りたいです。(<BR>では改行できませんでした)

    elchikaのアイコン画像 elchika 2020/04/16

    コメントありがとうございます!

    大変申し訳ございませんが、elchika内のMarkdownのテーブル内で改行する記法は現在は存在しません……
    また、この記事に書かれている内容がelchika Markdownの仕様になっています。
    (「基本的な記法」は語弊がありました)

    仕様についてはCommonMarkに準拠していて、その構文を拡張して数式の埋め込みなどができるようにしています。
    セキュリティ上の理由でHTMLタグの記入を禁止する実装をしているため、不便に感じるところも多いかもしれません。

    機能の改善に努めますので、ご要望などがございましたら何でもお申し付けください🙏

    1 件の返信が折りたたまれています
  • elchika さんが 2020/04/16 に 編集 をしました。 (メッセージ: 「基本的な記法」は語弊があったため削除)
  • Opening
    AoiSayaのアイコン画像 AoiSaya 2020/04/16

    説明ありがとうございます。了解しました。

    0 件の返信が折りたたまれています
  • elchika さんが 2020/05/11 に 編集 をしました。 (メッセージ: 画像の仕様と数式表示の説明を追加)
  • oimo さんが 2020/07/31 に送った 編集リクエスト が受理されました。 (メッセージ: コードブロック入力例を他項目の書式と統一)
  • oimo さんが 2020/07/31 に 編集 をしました。 (メッセージ: コードブロック入力例を他項目の書式と統一)
  • Closed
    tomfiveのアイコン画像 tomfive 2021/02/16

    もう終わりに近いですが、初心者には、FAQがあるとよいと思います。
    例えば
    目次は、自動生成されることが、どこにも記述されていない。じたばたしました。公開するまでわからない。
    ”タイトルの前にplantumlを記述すると” とあるが 、肝心なのは、":::plantuml"なので、わかりにくい。また、記述例の ":::plantuml:"の":::"が、全角のように見えて、誤解を生む(この欄ではそう見えない)。
    ここの投稿が、非常に少ないのは、電子工作する人は、いつも紛らわしい文章を解読するのに慣れているのかと思うが、トライアルアンドエラーをできるだけ少なくする配慮をお願いします。

    2 件の返信が折りたたまれています
  • elchika さんが 2021/08/11 に 編集 をしました。
  • Opening
    Yakatanoのアイコン画像 Yakatano 2024/01/23

    twitterが埋め込みできません。
    Xになってから変わったとかありますか?

    Yakatanoのアイコン画像 Yakatano 2024/01/23

    x.comをtwitte.comに書き換えてもダメでした。
    chromeにtwitter.comのURLを貼ったらちゃんとアクセスできますが、elchikaに埋め込むと「Not Found」と出ます。
    x.com のURLだと
    @twitter
    と表示されてリンクできません。

    1 件の返信が折りたたまれています
  • Opening
    Yakatanoのアイコン画像 Yakatano 2024/01/23

    twitter、youtube以外に埋め込みできるものはありますか?
    slideshareとか自分のblogとか・・・・

    0 件の返信が折りたたまれています
  • Opening
    Yakatanoのアイコン画像 Yakatano 2024/01/23

    多投すみません。
    画像を貼り付けると全体が表示されず一部しか絵が出ないのは仕様ですか? クリックして画像を表示すると全部表示されるのですが、通常時には途切れてしまうものなのでしょうか・・・

    0 件の返信が折りたたまれています
  • Opening
    pond6814のアイコン画像 pond6814 2024/10/18

    画像の大きさを変更する方法はありますか?
    <img src="***.jpg" width="300">
    のようにしても画像は表示されず、画像のサイズをどうやって調節すればいいのか分かりません

    0 件の返信が折りたたまれています
ログインしてコメントを投稿する