HiÐΞで使うマークダウン記法の使い方まとめ

taake
1ヶ月前
(1)文章構成①見出し見出し1見出し2見出し3②改行・段落③ナンバリング④箇条書き⑤引用表記⑥袋とじ設定⑦コードブロック(2021.5.14追加)⑧水平線⑨テーブル⑩折りたたみ機能⑪吹き出しを表示するコード(2)文字修飾など①太字②斜体③訂正線④アンダーバー(2021.5.14追加)⑤下付き文字(2021.5.14追加)⑥上付き文字(2021.5.14追加)⑦文字色⑧ハイライト(2021.5.14追加)⑨絵文字(2021.5.14追加)⑤KaTeXによる数式の表示⑩インラインコード(2021.5.14追加)(3)URLリンク・画像・動画①URLリンク②画像挿入③Youtube/twitter/slideshare等埋込

markdown

HiÐΞで使うマークダウン記法をまとめてみました。
慣れると簡単なんですが、最初は戸惑うと思うので…
使いこなせるようになりましょう! ここまで使えたら大丈夫。
もっと詳しく知りたい方は自分で調べてみてね~

参考:マークダウン(記法)とは
https://tech-camp.in/note/technology/84353/

(1)文章構成

①見出し

行頭に# をつける(#の次は「半角スペース」)
#の数が多いものが見出しレベルが高い。(最大6つ)
HiÐΞにおいては### は自動的に目次に反映される。
#が3つまでは自動的に目次が付番される

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

表示:

見出し1

見出し2

見出し3

見出し4

見出し5
見出し6

②改行・段落

改行は行末に (「半角スペース」2つ) をつける(<br>と入力してもよい) 段落は空行で一行あける。

これはテスト1。  
これはテスト2。<br>
これはテスト3。

これはテスト4。

表示:
これはテスト1。
これはテスト2。
これはテスト3。

これはテスト4。

③ナンバリング

  • 行頭に半角数字. をつける(.の次は半角スペース)
    一覧の列挙中に空行を入れると、連番が最初に戻る
  • 一覧の途中で改行したいときは、行末に半角スペースを2つ入れる
  • 箇条書き以外で行頭に、1. を持ってきたい場合は、1\. でエスケープできる
  • さらに、\\マーク自体を表示させたいときは、\\と2回重ねる
1. タイトル1  
2. タイトル2

表示:

  1. タイトル1
  2. タイトル2

④箇条書き

行頭に* をつける(*の次は半角スペース)

* タイトル1  
* タイトル2

表示:

  • タイトル1
  • タイトル2

⑤引用表記

引用元の前に >を入力する

>引用
>>引用
>>>引用

表示:

引用

引用

引用

⑥袋とじ設定

HiÐΞ独自の袋とじ(文章を隠す)機能は、任意の場所に任意の数だけ設定可能です。
別途、投稿画面で有料記事として公開にチェックを入れ、最低投げ銭額をJPYCで設定します。    匿名投げ銭は、チェックボックスにチェックをつけるだけでできます。(トランザクションは公開されています) 投稿画面

::: hide
かくしごと
:::
有料部分: 5文字, 0画像

⑦コードブロック(2021.5.14追加)

プログラミング言語などで書かれたコードを表示する文を```(`3つ)で囲む。 文が横幅を超えると横にスクロールが必要となる。

表示:

function shortenString(str) {
    var newStr = str;
    if (str.length >= 20) {
        newStr = str.slice(0, 20) + '...';
    }
    return newStr;
}

⑧水平線

行頭に---または***または___をつける

    ---

⑨テーブル

下記リンクで作った表をコピー&ペースト
表テーブル作成ツール
表示:

No 都道府県 人 口 市町村数
1 東京都 13,942,856 39
2 神奈川県 9,200,166 33
3 大阪府 8,823,453 43
4 愛知県 7,552,873 54
5 埼玉県 7,337,330 63

⑩折りたたみ機能

追加情報としたいテキストを<details>タグで囲む。
要約として表示したい文章を<summary>タグで囲む。

<details><summary>HiÐΞは、分散型ブログ管理サービスです。</summary>ブログプラットフォーマーの支配から解放されます。</details>

表示:

HiÐΞは、分散型ブログ管理サービスです。ブログプラットフォーマーの支配から解放されます。

⑪吹き出しを表示するコード

HiÐΞに吹き出しを表示するコード好永アカネさんが作ってくれました。コピペで使用可能です。

(2)文字修飾など

太字

修飾したい文字列を**または __で囲む

    **hide**

表示: hide

斜体

修飾したい文字列を*または _で囲む

    *hide*

表示: hide

訂正線

修飾したい文字列を ~~で囲む

    hide~~aki~~

表示: hideaki

④アンダーバー(2021.5.14追加)

修飾したい文字列を ++で囲む

    ++hide++

表示: hide

⑤下付き文字(2021.5.14追加)

下付きしたい文字を ~で囲む

    H~2~O

表示: H2O

⑥上付き文字(2021.5.14追加)

上付きしたい文字を ^で囲む

    1^st^、2^nd^

表示: 1st 、2nd

⑦文字色

修飾したい文字列を <font color="Red"></font>で囲む
色はご自由にblueなどお選びください

<font color="Red">HiÐΞ</font>

表示:HiÐΞ

ハイライト(2021.5.14追加)

==黄色にハイライト==

表示:黄色にハイライト

⑨絵文字(2021.5.14追加)

絵文字が利用可能に。これでおじさん構文もつくれるよ(違)
チートシート

おはよう:smiley::wave:犬かいたい:dog:

**表示:おはよう😃👋犬かいたい🐶

⑤KaTeXによる数式の表示

$$$で囲うと数式表示になる(LaTeX のサブセットなのでできない表記もあり)

記法一覧:https://katex.org/docs/supported.html KaTex

⑩インラインコード(2021.5.14追加)

文章中にコードを表示する。

`**2021.5.15**`

2021.5.15

(3)URLリンク・画像・動画

①URLリンク

[リンクテキスト](URL) と入力する

     [HiÐΞ](hide.ac)

表示:HiÐΞ

②画像挿入

![画像タイトル](URL) と入力する
URLはHiÐΞのギャラリーのところで画像リンクを作成する

     ![JPYC](https://firebasestorage.googleapis.com/v0/b/hideaki-97c59.appspot.com/o/images%2FfbizVlcme5eubHImuFnloztGVUB3%2F-YKOA0Ww0.png?alt=media)

表示: JPYC

③Youtube/twitter/slideshare等埋込

iframely.comに埋込したい動画などのiframelyで許可されているドメインのリンクを入れることでマルチデバイス対応が実現。 YouTube動画等の埋め込み機能をそのまま使う方法もあるが、リサイズ等いろいろ手間がかかる。

● 動画埋込の例


● twitter埋込の例
● スライド埋込の例


Comments
Likes
Tippings
最新順
人気順
Comments
Likes
Tippings
最新順
人気順
HiÐΞOnline
Tweet
目次
Articles
Magazines
Topics
Users
Projects
Crowdfunding
Wallet
Help
Login
Go Offline