Markup記述方法のまとめ

マークアップで記事を書いていくあたってのお作法まとめ。慣れると結構便利な説がある。エディタも多種多様でオフライン利用可能なものもあり。これを機にメモアプリを乗り換えてもいいかも。

# 普段使いでも、Typora使うことにしました。(2020/04/12追記)

以下、markdown-itの利用例
(Typoraで全てサポートされているわけではない。!!)

ハイパーリンク

[Googleサーチ](https://www.google.com)

Google Search

オートリンク

HTMLを貼布するとリンクになる https://tagutasu.com

ハイライト

==ハイライト==

ハイライト

グレー網掛け

`aa`

aa

イタリック体

_イタリック体_ もしくは *イタリック体*

イタリック体 もしくは イタリック体

太字

**太字**

太字

打ち消し線

~~打ち消し~~

打ち消し

リスト(箇条書き)

- リスト1
    - ネスト リスト1_1
        - ネスト リスト1_1_1
        - ネスト リスト1_1_2
    - ネスト リスト1_2
- リスト2
- リスト3
  • リスト1
    • ネスト リスト1_1
      • ネスト リスト1_1_1
      • ネスト リスト1_1_2
    • ネスト リスト1_2
  • リスト2
  • リスト3

リスト(番号リスト)

1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3
  1. 番号付きリスト1
    1. 番号付きリスト1_1
    2. 番号付きリスト1_2
  2. 番号付きリスト2
  3. 番号付きリスト3

detailsタグ

<details>
    <summary>FUKU@MEMOでは、少し誰かの役に立ちそうな備忘を公開しています。</summary>
    こちらに詳細を記載していく。
</details>
FUKU@MEMOでは、少し誰かの役に立ちそうな備忘を公開しています。 こちらに詳細を記載していく。

文字列の装飾

::: tip 見出し(文字列も指定可能)#デフォルトでは"tip"になる
This is a tip
:::

見出し(文字列も指定可能)#デフォルトでは"tip"になる

This is a tip

::: warning
This is a warning
:::

WARNING

This is a warning

::: danger
This is a dangerous warning
:::

WARNING

This is a dangerous warning

::: details
This is a details block, which does not work in IE / Edge
:::
DETAILS

This is a details block, which does not work in IE / Edge

引用

> 1. 第一条  
> ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。  
> 2. 第二条  
> ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。  
> 3. 第三条  
> ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。  
> 
> — 2058年の「ロボット工学ハンドブック」第56版、『[われはロボット](https://amzn.to/301dvm6)』より
  1. 第一条
    ロボットは人間に危害を加えてはならない。また、その危険を看過することによって、人間に危害を及ぼしてはならない。
  2. 第二条
    ロボットは人間にあたえられた命令に服従しなければならない。ただし、あたえられた命令が、第一条に反する場合は、この限りでない。
  3. 第三条
    ロボットは、前掲第一条および第二条に反するおそれのないかぎり、自己をまもらなければならない。

— 2058年の「ロボット工学ハンドブック」第56版、『われはロボット』より

テーブル

| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| a          |           b |      c       |
| a          |           b |      c       |
header1 header2 header3
a b c
a b c

チェックリスト

- [ ] 国語
  - [ ] 現代文
  - [x] 漢文
  - [x] 古文
- [ ] 数学
- [ ] 英語
  • 国語
    • 現代文
    • 漢文
    • 古文
  • 数学
  • 英語

注釈

これは脚注[^1]のテストです
[^1]:これは1つ目の脚注の内容です

これは脚注[1]のテストです

Youtube埋め込み

<div class="iframe-wrap">
    <iframe width="966" height="543" src="https://www.youtube.com/embed/0gizLT97cKo" frameborder="0"
        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Webサイト埋め込み

<div class="iframe-wrap">
    <iframe src="https://liginc.co.jp" width="auto" height="auto"></iframe>
</div>

Googleマップ埋め込み

<div class="iframe-wrap">
<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7864451.9493435845!2d101.413814067977!3d15.74773057047527!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31157a4d736a1e5f%3A0xb03bb0c9e2fe62be!2sVietnam!5e0!3m2!1sen!2sjp!4v1586593818386!5m2!1sen!2sjp"
    width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false"
    tabindex="0"></iframe>
</div>

Twitter埋め込み


  1. これは1つ目の脚注の内容です ↩︎