メモ Markdownの書き方

メモ Markdownの書き方
H1
- H2
  - H3
    - H4
      - H5
        
        H6
ヘッダー1
装飾
■■■■

デザインとMarkdownの関係

　Markdownではないが、はてなブログでは、いろいろなデザインから好きなものを選べる。HTMLやら、CSSやらでいろいろと定義されている。Markdown記法で書かれたマークをHTMLのTAGに変換しているに過ぎない。よって、デザインのほうでヘッダのH1,H2などをどのように表記するかが書かれているのでMarkdownでいい感じに編集できたとしても、デザインを変えてしまうと見た目が大幅に変わってしまうので注意が必要である

TEXT(編集のテキストボックス)の改行

　改行の役割¹を考えて。改行(Enter)キーを押すと。編集画面が見やすい程度。表示では、文と文のつなぎ目でスペースと同じ役割に置き換わる。　

1234567890↲
abcdefg↲
ABCDEFG↲
あいうえお↲

1234567890 abcdefg ABCDEFG あいうえお

うーーん²

スペース(スペースを１個以上続ける)

　文字と文字の間のスペースの事、これも改行と同じで日本人としてはスペースによって前の行と位置合わせにしてしまうところがある。文章整形プロセッサとしては、位置合わせという機能があり左詰め、右詰め、中央合わせ、等間隔など。改行と同じでMarkdownでもスペースが連続できても１つのスペースとしてしょりを行う。しかし、悪賢い大抵の人は「　」全角スペースで代用してしまうだろう。

あ～～～ い～～～ う～～～ え～～～ お～～～
あ い う え お
あ  い  う  え  お
あ            い            う            え            お

あ～～～い～～～う～～～え～～～お～～～
あいうえお
あいうえお
あいうえお

段落(空白行を追加すると段落になる)

段落…文章の区切り

　段落、改行を2回以上押す(連打！)。改行を多く打っても結果は変わらない。空白行が出来ればよい。スペースや、"　"（全角スーペース）のみで構成された行は見た目おなじだが段落にはならない文と文の間のスペースとして足される。仕様としては、スペース、タブだけの行ということになっているみたい

1234567890 abcdefg ABCDEFG↲
1234567890 abcdefg ABCDEFG↲
↲
1234567890 abcdefg ABCDEFG↲

1234567890 abcdefg ABCDEFG 1234567890 abcdefg ABCDEFG

1234567890 abcdefg ABCDEFG

1234567890↲
↲　　１改行
abcdefg↲
↲
↲　　２改行
ABCDEFG↲
↲
↲
↲　　３改行
あいうえお↲

1234567890

abcdefg

ABCDEFG

あいうえお

強制改行(改行前にスペース２つ)

　改行に関しては、先に書いた通り。文章の終わりに改行を入れなくても必要なところには改行が入る仕組みになっている。しかし、台本のセリフのように短文で改行したい場合もある。　文の終わりに半角スペース2文字入れることで強制改行できる。

あいうえお  ↲  (半角スペース２つ＋Enter)
かきくけこ  ↲  (半角スペース２つ＋Enter)
さしすせそ  ↲  (半角スペース２つ＋Enter)

あいうえお
かきくけこ
さしすせそ

ヘッダ(H1~H6) (章、レベルなど) (#~######まで)

　HTMLの<H1>~<h6>に相当。＃とスペースをいれることで識別。また、- =などを1個以上いれることでみためヘッダぽいのでヘッダとして認識する仕様になっている

# H1
## H2
### H3
#### H4
##### H5
###### H6

ヘッダー1
=========

ヘッダー2
--------

H1

H2

H3

H4

H5

H6

ヘッダー1

ヘッダー2

引用(ある意味インデント) (`>`を１つ以上付ける)

　電子メールの>スタイルの引用が使える。メールのリプライがかさなるとインデントやマークが付くイメージ。段落の終わりが来るまでが有効範囲

aaaaaaaaaaaa  
> aaaaaaaaaaaa  
aaaaaaaaaaaa  
aaaaaaaaaaaa  
>> bbbbbbbbbbbb    
bbbbbbbbbbbb  
bbbbbbbbbbbb  
bbbbbbbbbbbb  
>>> cccccccccccccc   
>>>> AAAAA
>>>>>bbbbbbbbbbbb  
>>>>>>bbbbbbbbbbbb  
>>>>>>>bbbbbbbbbbbb  
>>>> ああああ
>>>  ああああ
>> ああああ
> ああああ
> ああああ
ああああ

aaaaaaaaaaaa

aaaaaaaaaaaa
aaaaaaaaaaaa
aaaaaaaaaaaa

bbbbbbbbbbbb
bbbbbbbbbbbb
bbbbbbbbbbbb
bbbbbbbbbbbb

cccccccccccccc

AAAAA

bbbbbbbbbbbb

bbbbbbbbbbbb

bbbbbbbbbbbb
ああああああああああああああああああああああああ

線(`---` `***` `___`など１行で)

　区切り線を入れる。合計３つ以上

---
- - -
***
___

コード１(等幅フォント) (‘(バッククォートで囲む。))

　バッククォート、「’」クォート「‘」バッククォート。一般的な、PCのキーボードで７＋シフトと＠＋シフトの違いがあるので気を付ける必要あり。

たとえば、 `range(1,10,3)` は1,4,7のイタレーションが発生する

たとえば、 range(1,10,3) は1,4,7のイタレーションが発生する

コード２(コードを埋め込む) (‘‘‘(バッククォート３つで囲む。))

　```の後ろに言語名を指定することもできる。

 ```python
 import numpy as np
 for i in range(1,10,2):
     print(i)
 ```

import numpy as np
for i in range(1,10,2):
    print(i)

help.hatenablog.com

コード３(その他) (「&」「<」「>」やスペース)

　バッククォート内では、「&」「<」「>」を使っていてもHTMLのコードの一部と認識られずそのまま表示できる。また、先頭からスペース４つやタブ１のインデントされたコードを差し込むことができる

＆：例 —
<>：例

＆：例 — バッククオートで囲んでいるので＆表現のHTML表記もキャンセルされる
<>：例 <blank> バッククオートで囲んでいるので＜＞表現のHTML表記もキャンセルされる

import numpy as np
a = np.array(range(12)).reshape(3,4)
print(a)

    [[ 0  1  2  3]      (先頭にスペース４つ)
     [ 4  5  6  7]      (先頭にスペース４つ)
     [ 8  9 10 11]]   (先頭にスペース４つ)

[[ 0  1  2  3]
 [ 4  5  6  7]
 [ 8  9 10 11]]

箇条書き(リスト) (「*」「+」「-」+スペースのマークを付ける)

　箇条書き、「*」「+」「-」とスペースで区切ることで箇条書きになる改行し、同じインデントでマークを付けることで連続した箇条書きとして認識する。またスペースを2つ(はてなブログ仕様？)以上付けてインデントすることでレベル分けしたマークが付く。この辺はWord等と同じ仕様。また、数値＋ピリオド（.）1. 2. 3.などにすると数値の箇条書きになる(はてなブログはならない？)
　Markdownの仕様では、スペース４つかタブを頭に追加することでレベルを下げた箇条書きになることになっている。

- aaaaa
  - bbbb
    - ccccc
    - ccccc
  - AAAA
  - BBBB
- あああ

aaaaa
- bbbb
  - ccccc
  - ccccc
- AAAA
- BBBB
あああ

* aaaaa
  * bbbb
    * ccccc
       * dddd

+ aaa
+ bbb
+ ccc

1. aaa
2. bbb
3. ccc

aaaaa
- bbbb
  - ccccc
    - dddd
AAA
BBB
CCC
あああ
いいい
ううう

↑謎仕様

テーブル(`|` `-`を使って表現する)

　表を作れる。1列目はヘッダー行になるのでBOLD仕様。ヘッダー行の次の行で左寄せ:---、中央寄せ:---:、右寄せ---:、等ができる

number | height\[cm\] | weight\[kg\]
---: | :---: | :---
13 | 154.7 | 45.6
14 | 157.4 | 49.0
15 | 157.2 | 51.6
16 | 157.7 | 50.2
17 | 159.1 | 51.6

number	height[cm]	weight[kg]
13	154.7	45.6
14	157.4	49.0
15	157.2	51.6
16	157.7	50.2
17	159.1	51.6

リンク(`[ ]`と`()`で囲む)

　リンクを付ける。[リンクされる文字](リンク先 "タイトル")という感じで書く。参照(引用)形式もできる。リンクする文字列を[]で囲み次の[]で引用記号を書く。引用記号は、数値でも文字でもOK。引用は、リンク文字の文章外の段落外に引用記号を[]で囲み:(コロン)で区切って[リンク先] "タイトル"で表現できる。引用形式をとることで文章内に複数リンクを埋め込んでも編集テキストがリンクのURLで埋まり文章の修正や添削、内容の確認の邪魔になりにくい

[chyoh'BLOG](https://chiyoh.hatenablog.com/)
[chyoh'BLOG](https://chiyoh.hatenablog.com/ "タイトル")

Link: chyoh'BLOG
Link(タイトル付き): chyoh'BLOG

参照形式

ウキペディアのMarkdownのページ…[wikipedia][1]   
Markdownの仕様のページ...[Markdown][2]  


[1]:[https://ja.wikipedia.org/wiki/Markdown] "Markdown" 
[2]:[https://daringfireball.net/projects/markdown/] "John Gruberさんのところ"

ウキペディアのMarkdownのページ…wikipedia
Markdownの仕様のページ...Markdown

リンク(自動リンク) (リアルタイムプレビューではリンクは貼られない)

　書かれている文章から、自動的にリンクを生成する方式。Markdownではなく、wiki的なはてなの仕様

http://www.hatena.ne.jp/
https://www.hatena.ne.jp/login
mailto:info@example.com

http://www.hatena.ne.jp/
https://www.hatena.ne.jp/login
info@example.com

hatenadiary.g.hatena.ne.jp

staff.hatenablog.com

画像(`![ ]`と`()`で囲む。リンクと違って頭に!が付いている)

　画像を埋め込む、基本はリンク表現と同じ。頭に!を付けることで画像として認識する。はてなブログ仕様で使用できない？

![写真](https://drive.google.com/file/d/1wLNvoAP-3mBLdC2kP-VwzYzUFMyVCgzl/preview) "タイトル"

"タイトル"

画像2(埋め込み) (fotolife記法はてな仕様)

　HatenaPotolifeにアップされた画像を埋め込むための記法。Markdown記法の場合、エントリー画面に画像をドロップして、HatenaPotolifeにアップする。アップし終わった画像を選択し、挿入ボタンを押すことでfotolife記法のアドレスが張り付けられる。

[f:id:chiyoh:20190503004617p:plain]

f:id:chiyoh:20190503004617p:plain

staff.hatenablog.com

help.hatenablog.com

f.hatena.ne.jp

目次([:contents])

　[:contents]を入れることでヘッダーを一覧にした目次を生成する。(Markdownの仕様ではない)

[:contents]

メモ Markdownの書き方
H1
- H2
  - H3
    - H4
      - H5
        
        H6
ヘッダー1
装飾
■■■■

脚注([^数字]で囲む。`[^識別]:脚注`)

　脚注の内容は、エントリーの最後にまとめて表示される。記述の方法は、リンクの方法と似ている。(数字以外でも発生する。識別に数値以外を使うこともできるが結局は、エントリーの頭から順に数値が割り振られその時の番号が表示される。ただし、脚注とリンクする脚注内容は、識別文字として同じも出なくてはだめ。ユニークでないと識別しない)

0123456789[^1]、abcdefgh[^2]、ABCDEFGH[^3]、あいうえお[^4]

[^1]: 数値  
[^2]: 小文字アルファベット  
[^3]: 大文字アルファベット  
[^4]: 平仮名

0123456789³、abcdefgh⁴、ABCDEFGH⁵、あいうえお⁶

装飾

強調(「*」「_」で囲むことで強調文字を表す)

　文字を強調する、これも、英語圏の文化italic typeとbold typeに変化させて強調。*``_を３つ重ねることでイタリック＋ボールドになる。

import *matplotlib*  
import _numpy_ as _np_  
import **matplotlib.pyplot** as __plt__  
import ***numpy*** as ___np___   
import ****math****  
import ____os____  

1つ *イタリック* _イタリック_  
2つ **ボールド** __ボールド__   
3つ ***ボールド+イタリック*** ___ボールド+イタリック___

import matplotlib
import numpy as np
import matplotlib.pyplot as plt
import numpy as np
import math
import os

1つ イタリック イタリック
2つ ボールド ボールド
3つ ボールド+イタリック ボールド+イタリック

打消し(`~~`で囲む)

　文字の打消し、~2個以上で囲むことにより棒線で取り消し表現ができる

~aaaaaaa~  
~~aaaaaaa~~  
~~~aaaaaaa~~~

~aaaaaaa~
~~aaaaaaa~~
~~aaaaaaa~~

エスケープ(文字の頭に`\`(バックスラッシュ)を入れる)

　\を入れることでいろいろ回避できる。Markdownも含めていろいろなルールがあり英数字記号の組み合わせにより、予想外のマーク適応が発生した時などに\をいれることで回避できる。

__aaaaaaa__  (__2つなのでBOLD)
\_\_aaaaaaa\_\_  (\_\_にしているのでアンダーバーの記号として画面表示される)

aaaaaaa
__aaaaaaa__

上付き、下付き(`^`,`_`文字と文字の間にいれる)

　^上付きになる。 _した付きになる。_は、ベーシックなシンタックスで_をイタリックに変えるルールがあるのでデコードがどうなるか癖を見極めて使う必要がありそう。日本語^日本語が使えない(全角英数)など。^と_で微妙に動きが違う

z=x^2+y^2  
上付き^脚注1   
abcd^1234    
ABC^DEF    
上付き^1   
上付き^abc def   

z=x_2+y_2  
上付き_脚注1   
abcd_1234    
ABC_DEF    
上付き_1   
上付き_abc def

z=x²+y²
上付き^脚注1
abcd¹²³⁴
ABC^DEF
上付き¹
上付き^abc def

z=x_2+y_2
上付き脚注1
abcd_1234
ABC_DEF
上付き1
上付き_abc def

TEX(`[tex:`,`]`で囲む) リアルタイムプレビューは使えない

　[tex:～～]と書くと使える。ただ、非常に使いにくい。
[,],^,_は、Markdownで使用しているのでTEXの中ではエスケープしてあげる必要がある。\\[,\\],\^,\_に変換

２次方程式[tex:ax\^2+bx+c=0] こんな感じ  
解の公式 [tex:\frac{-b\pm \sqrt{b\^2-4ac}}{2a}] こんな感じ

２次方程式 $ax^2+bx+c=0$ こんな感じ
解の公式 $\frac{-b\pm \sqrt{b^2-4ac}}{2a}$ こんな感じ

HTML(色指定) (タグ埋め込み)

<span style="color: bule">青色</span>
<span style="color: red">赤色</span>
<span style="color: yellow">黄色</span>
<span style="background-color: #00FFFF">青色</span>
<span style="background-color: #FF00FF">赤色</span>
<span style="background-color: #FFFF00">黄色</span>

青色赤色黄色青色赤色黄色

■■■■

箇条書き(リスト)2 未実装

　タスクリスト

[x] aaaaa
[x] aaaaa
[ ] aaaaa

絵文字(`:`コロンで囲む) 未実装

　ブラウザー仕様？とりあえず、表示できていない

:smile:
:ghost:

未実装

=AAA=  
==AAA==  
===AAA===

=AAA=
==AAA==
===AAA===

数式(`$`,`$$`で囲む) 未実装

　$文字$や、$$～$$は行を跨いで。ルールはTEXに準拠？

２次方程式 $ax²+bx+c=0$ こんな感じ
解の公式 $\frac{-b\pm \sqrt{b²-4ac}}{2a}$ こんな感じ

ax²+bx+c=0

\frac{-b\pm \sqrt{b²-4ac}}{2a}

メモ

　下記の４つは、リアルタイムプレビュー非対応

脚注↓この辺に表示されているはず

便利機能？

chiyoh.hatenablog.com

欧米のワープロ(文書作成プロセス)と日本語が相容れない点だね。日本語を扱う人は文字を絵と認識している文字を書く(ペンで書く、文字を打ち込む)時点が最終状態と認識している点が大いに問題。その辺を指摘する機会を逃してしまった世代がWordで作っている文章がえらいことになっている。いまだにWordの機能を使いきれない人が多い。Wordってチョー使いにくいと言っている。思想が違うからね）。見た目から安易に改行(Enter)キーを押してはいけない↩
そもそも、電子データのいいところは、出力先を自由に変更できる点でこの辺は、カラム数の呪縛はDOSからWindowsに移った時に解放されたはずであるが解放されなかった。あ、プリンターの呪縛もあったか。これも、レーザープリンタが普及に従って無くなったはずなのに。要は、出力が先が固定になっており、使う側がそれに縛られていた時代であった。時代は進み、出力先を自由に選べる自体が来たが文章を作る側が最終出力先を決めて作っているために不幸が今も続いている。出力先が、A4縦であったり、A3横であったり、ガラケ携帯メール、スマホ、PCの画面いろいろと多岐にわたる。よって、最近は改行キーは改行の意味を果たしてない。もしくは編集画面内だけ有効になっている。Markdownにおいては改行は、１スペースと入れ替わるみたいだ。↩
数値 ↩
小文字アルファベット ↩
大文字アルファベット ↩
平仮名 ↩