
Markdownの文章に画像をコピペで貼れるようになる拡張機能です。
スクリーンショットやフォルダの画像をコピーしてクリップボードから貼り付けられるようになります。

[Markdown Image - marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image)

![picture 5](/images/posts/300/307/1626617101207.png)  

スクリーンショットから貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImage.gif)

フォルダやWEBの画像もコピーして貼り付けられます。
![screenshot](/images/posts/300/307/MarkdownImageCopy.gif)

こんな感じで画像を扱いやすくなります。
設定から保存先のパスを変えたり、ファイルを[Imgur](https://imgur.com/)などにアップロードして貼り付けることも可能です。

めっちゃ便利。

## 使いやすいように設定する

設定変更は`ctrl + ,`か左バー下の歯車から設定を選び検索に`markdown Image`を入力してください。

![picture 3](/images/posts/300/307/dda996af98bf96aa062dceedd5ce77ac5269d60a37d897de50b483e924da836f.png)  


### ファイル名の設定

初期状態だと貼り付けたファイル名がハッシュでしかも長い。
```bash
# デフォルトのハッシュ
![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)
```

![picture 2](/images/posts/300/307/fd1a2472e46c2dd92b903aa1598ba8b096838829f242c584bc07dbbd0bb41585.png)  
このようにファイル名を変更できるので好みのものにしてください。

▼　いくつかファイル名の例を紹介
```bash
# timestampに設定変更した場合
${timestamp}
![picture 4](/images/posts/300/307/1626615452401.png)  

# マークダウンファイル名
${mdname}
![picture 8](/images/posts/300/307/307-vscode-markdown-image.png) 

# datetimeを表す
${YY}${MM}${DD}T${HH}${mm}${ss}
![picture 10](/images/posts/300/307/20210718T231400.png)  
```

変数や文字を組み合わせたいときは`${YY}-${MM}-${DD}T${HH}${mm}${ss}`のように指定します。セミコロン`:`とアスタリスク`*`は何故か正規表現がどうとかエラーがでて使えないです。

注意点として`${mdname}`だけだとマークダウンのファイル名だが番号が振られないので、２つめ以降は上書きになってしまう。
`${mdname}-${timestamp}`や`${mdname}-${filename}`のように被らなそうな組み合わせにすると良いです。


`/`でディレクトリを切れるのでオススメは以下のようにすると記事ごとに画像を管理しやすい。
```bash
# posts/${mdname}/${timestamp}
images/posts/307-vscode-markdown-image/1626876249627.png
```

## ファイルの保存先パスの変更

デフォルトでは画像は`/images`に保存されます。
![picture 12](/images/posts/300/307/307-vscode-markdown-image-1626618411652.png)  

こちらで保存先のパスを変更できる

## ファイルの保存先変更

デフォルトはローカルに保存します。

![picture 11](/images/posts/300/307/307-vscode-markdown-image-1626618296490.png)  

ローカル以外にもImgurなどにもアップロードできる。
認証設定など色々あるので試してほしい。

## 終わり
雑だけど以上です。
個人的にスクショとイメージのコピーを手軽にマークダウンに貼り付けられるようになるだけで十分満足です。




Markdownに画像を貼り付けるVSCodeの拡張機能 Markdwon Image


このブログでは**npm**の**Markdown-it**でマークダウン記法からHTMLに変換している。
本記事は**Markdown-it**の記法の確認のためのものです。

## 環境

- npm 6.4.1
- markdown-it
- markdown-it-latex
- markdown-it-highlight

cssをいじっているためいくつかの記法は見慣れないスタイルになっているかも。
（例：h1, h2タグ）

## <i class="fa fa-cubes" style="font-size:1em;"></i> 見出し

1個から6個シャープで見出しを記述する。
※シャープと見出し文字の間には半角スペースを1つ入れること

###  記述例
~~~md
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
~~~

### 表示例
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

##  箇条書きリスト

ハイフン、プラス、アスタリスクのいずれかで箇条書きリストを記述可能。

※ハイフン、プラス、アスタリスクと箇条書きの項目の間には半角スペースを1つ入れること

### 記述例

~~~md
- リスト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つ入れること

### 記述例
~~~md
1. 番号付きリスト1
    1. 番号付きリスト1_1
    1. 番号付きリスト1_2
1. 番号付きリスト2
1. 番号付きリスト3
~~~

### 表示例

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

##  引用

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

### 表示例

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


##  pre記法(スペース4 or タブ)

半角スペース4個もしくはタブで、コードブロックをpre表示できます

### 記述例
~~~md
	# Tab
	class Hoge
		def hoge
			print 'hoge'
		end
	end

---

    # Space
    class Hoge
      def hoge
        print 'hoge'
      end
    end
~~~

### 表示例
	class Hoge
		def hoge
			print 'hoge'
		end
	end

---

    class Hoge
      def hoge
        print 'hoge'
      end
    end

##  code記法
バッククォートで文字列を囲むことでコードの一部を表示可能です。

### 記述例
~~~md
インストールコマンドは `pip install hoge` です
~~~

### 表示例
インストールコマンドは `pip install hoge` です

##  強調：&lt;em&gt;
アスタリスクもしくはアンダースコア1個で文字列を囲むことで強調します。
見た目は斜体になります。

### 記述例
~~~md
normal *italic* normal  
normal _italic_ normal
~~~

### 表示例
normal *italic* normal  
normal _italic_ normal

##  強調：&lt;strong&gt;
アスタリスクもしくはアンダースコア2個で文字列を囲むことで強調にします。
見た目は太字になります。

### 記述例
~~~md
normal **bold** normal  
normal __bold__ normal
~~~

### 表示例
normal **bold** normal  
normal __bold__ normal

##  強調：&lt;em&gt; + &lt;strong&gt;
アスタリスクもしくはアンダースコア3個で文字列を囲むことで &lt;em&gt; と &lt;strong&gt; による強調を両方適用します。
見た目は斜体かつ太字になります。

### 記述例
~~~md
normal ***bold*** normal  
normal ___bold___ normal
~~~

### 表示例
normal ***bold*** normal  
normal ___bold___ normal

##  水平線
アンダースコア、アスタリスク、ハイフンなどを3つ以上連続して記述することで水平線を表示します。
※連続するハイフンなどの間にはスペースがあっても良い

### 記述例
~~~markdown

***

___

---

*    *    *

~~~

### 表示例

***

___

---

* * *

##  リンク
`[表示文字](リンクURL)`形式でリンクを記述できます

~~~md
[Google先生](https://www.google.co.jp/)
~~~

[Google先生](https://www.google.co.jp/)

##  定義参照リンク
Markdownの文書の途中に長いリンクを記述したくない場合は、
同じリンクの参照を何度も利用する場合は、リンク先への参照を定義することができます。

~~~markdown
[こっちからgoogle][google]  
その他の文章  
[こっちからもgoogle][google]  
  
[google]: https://www.google.co.jp/
~~~

[こっちからgoogle][google]  
その他の文章  
[こっちからもgoogle][google]  
  
[google]: https://www.google.co.jp/

##  取り消し線
チルダ2個で文字列を囲むことで取り消し線を利用できます。

### 記述例
~~~md
~~取り消し線~~
~~~

### 表示例
~~取り消し線~~


##  表組み

### 記述例
~~~md
| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| align left | align right | align center |
| a          |           b |      c       |
~~~
### 表示例
| header1    |     header2 |   header3    |
|:-----------|------------:|:------------:|
| align left | align right | align center |
| a          |           b |      c       |


Markdown-itのサンプル


Markdownのリストで段組みを揃えて改行する方法が分かったので共有します。

- どういうことかというと<br>
こんな感じに
  - 段組みを揃えて  
改行できるよ

## 環境

確認できた対応している環境は以下の通り

- GitHub
- Qiita
- Visual Studio Code の [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)のプレビュー
- npm の [markdown-it](https://github.com/markdown-it/markdown-it)

恐らく他のMarkdown対応のエディタやサービスも書けると思います。

## 書き方

リストの行末に改行タグをつけて、次の行は素のテキストを書けばよいです。
改行タグは半角スペース二つ`  `か、HTMLの改行タグの`<br>`です。

例（半角スペースはわかりづらいので`<br>`で）

```md
- リンゴ<br>
Apple
- オレンジ<br>
Orange
- イチゴ<br>
Strawberry
```

- リンゴ<br>
Apple
- オレンジ<br>
Orange
- イチゴ<br>
Strawberry


なぜこれで改行できるかと言うと、HTMLを見ると分かりやすいです。

```html
<ul>
  <li>リンゴ<br>Apple</li>
  <li>オレンジ<br>Orange</li>
  <li>イチゴ<br>Strawberry</li>
</ul>
```

上のように`<li></li>`タグの中で改行コードがつくため、行頭を揃えて段組みできるようになります。

## その他にも使える

### 番号付きリスト

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

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

※ `>`は引用

### 表組み

```md
| 言語   | フレームワーク                |
|--------|-------------------------------|
| Python | Flask<br>Django<br>pyramid    |
| PHP    | Laravel<br>CakePHP<br>Symfony |
| Java   | Struts<br>Spring              |
```


| 言語   | フレームワーク                |
|--------|-------------------------------|
| Python | Flask<br>Django<br>pyramid    |
| PHP    | Laravel<br>CakePHP<br>Symfony |
| Java   | Struts<br>Spring              |

Markdownのリストで段組みを揃えて改行する方法


npmに**マークダウンファイルをコマンドで変換できるモジュール**があるので紹介します。
このブログでも利用しています。

## processmd

- [processmd - npm](https://www.npmjs.com/package/processmd)
- [processmd - github](https://github.com/tscanlin/processmd)

マークダウンファイルを扱いやすいようにJSONに変換することができます。
そして、同時に"summary"として複数のファイルをまとめることもできます。

JSONのパラメータの中に、**マークダウン形式の生データ**と**HTMLに変換したデータ**が入っています。
また、日付やタイトルなどパラメータを自由に設定することも可能です。

マークダウンを変換する際には[markdown-it](https://github.com/markdown-it/markdown-it)を利用しています。
オプションに[markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
- [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)
を利用しています。
これらによって、コードのシンタックスハイライト

また、`yml`にも対応しています。

npm、githubに使い方の説明が書いてあります。
英語なので、翻訳しつつ自分の使い方も混ぜて説明していきます。

## インストール

npmコマンドが使える環境が前提です。

```sh
$ npm install --save-dev processmd
```

**markdown-it**や関連するモジュールも同時にインストールされます。

## processmdコマンドの使い方

CLIで`processmd`のコマンドが使えるようになります。

```sh
$ processmd "content/**/*.{yml,md}" --outputDir output
```

`content`ディレクトリ内のマークダウン（yml）を一括で変換するときの書き方。
出力先のディレクトリにJSONファイルを出力します。

## 入力と出力ファイルの説明

このサイトの記事をマークダウンで以下のように書いています。

```md
---
id: 1
title: Mac ChromeのデベロッパーツールをF12で開くよう設定する
created_at: 2018-07-04
updated_at: 2019-01-04
isDraft: false
tags: Mac,chrome
top_image: /icons/mac-apple.svg
icon: /icons/mac-apple.svg
---


WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。
MacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。
忘れてしまうので、Macでも`F12`で開けるように設定します。

## デフォルトのショートカットキー

MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。
その他、Chromeの操作の中でよく使うものを抜粋しました。
```

最初に`---`で囲った部分は連想配列としてJSONに持つことができます。
その下は普通のマークダウンです。

上記を変換すると下のJSONになります。



```json
{
  "id": 1,
  "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
  "created_at": "2018-07-04T00:00:00.000Z",
  "updated_at": "2019-01-04T00:00:00.000Z",
  "draft": false,
  "tags": "Mac,chrome",
  "top_image": "/icons/mac-apple.svg",
  "bodyContent": "WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\r\nMacではChromeのデベロッパーツールを開くショートカットキーは`⌘`+`option`+`i`です。\r\n忘れてしまうので、Macでも`F12`で開けるように設定します。\r\n\r\n## デフォルトのショートカットキー\r\n\r\nMacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは`⌘`+`option`+`i`です。\r\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "bodyHtml": "<p>WindowsからMacに移って、よく使っているショートカットキーの違いに戸惑いました。\nMacではChromeのデベロッパーツールを開くショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\n忘れてしまうので、Macでも<code>F12</code>で開けるように設定します。</p>\n<h2>デフォルトのショートカットキー</h2>\n<p>MacではChromeのデベロッパーツールを開くデフォルトのショートカットキーは<code>⌘</code>+<code>option</code>+<code>i</code>です。\nその他、Chromeの操作の中でよく使うものを抜粋しました。",
  "preview": "",
  "dir": "content/posts/json",
  "base": "1.json",
  "ext": ".json",
  "sourceBase": "1.md",
  "sourceExt": ".md"
}
```

**content/json/1.json**

### 出力の説明

| key         | 説明                 |
| ----------- | -------------------- |
| bodyContent | ソースのマークダウン |
| bodyHtml    | パースしたHTML       |
| dir         | 出力先のパス         |
| base        | 出力のファイル名     |
| ext         | 出力の拡張子         |
| sourceBase  | ソースのファイル名   |
| sourceExt   | ソースの拡張子       |

マークダウンに書いたパラメータも連想配列になっています。
また、数値やbool、日付も認識して上手いことやってくれます。

これで、記事がJavaScriptから扱いやすいデータになりました。

## 進んだ使い方

個別のJSONを作成するだけでなく、**summary**としてまとめることができます。

```sh
$ processmd \"content/**/*.{yml,md}\" --stdout --outputDir output > summary.json
```

`content/summary.json`

```json
{
  "fileMap": {
    "content/posts/json/1.json": {
      "id": 1,
      "title": "Mac ChromeのデベロッパーツールをF12で開くよう設定する",
      "created_at": "2018-07-04T00:00:00.000Z",
      "updated_at": "2019-01-04T00:00:00.000Z",
      "draft": false,
      "tags": "Mac,chrome",
      "top_image": "/icons/mac-apple.svg",
      "preview": "",
      "dir": "content/posts/json",
      "base": "1.json",
      "ext": ".json",
      "sourceBase": "1.md",
      "sourceExt": ".md"
    },
    （省略）
  },
  "sourceFileArray": [
    "markdown/1.md",
    "markdown/10.md",
    "markdown/100-similar-term.md",
    "markdown/101-mysql-monthly-report.md",
    （省略）
    ]
}
```

`fileMap`に各マークダウンの`bodyContent`と`bodyHtml`を除いたパラメータ。
`sourceFileArray`にソースのパスの配列が格納されます。

当ブログでは`summary.json`を使って、記事の一覧や個別の記事のページを作っています。

## オプション

[processmd - npm](https://www.npmjs.com/package/processmd)

もとのページを見てもらうのが一番良いですが、いくつか使ってちゃんと理解しているものを紹介します。


|オプション|デフォルト|説明|
|outputDir| './dist' |JSONの出力先|
|filenamePrefix| '' |ファイル名に接頭辞を付ける|
|renderLatex|true|$$ か、```mathで数式をLaTeX形式で変換できる|
|highlightCode|true|コードブロックのシンタックスハイライトを使うか|
|preview|0|パラメータに先頭の指定文字数のpreviewを追加する。|
|markdownOptions|{}|markdown-itに渡すオプション|
|headingIds|false|目次を自動追加する|

使い方は`--outputDir content/posts/json`のようにします。

補足としていくつか注意点を。

### headingIdsは日本語に向いていない

はidに`##`以降の文字を入れます。
漢字や日本語は読み方に変換してアルファベット表記する。

この時、**漢字は中国語読みで変換する**ため目次から辿らせることが難しいです。

```txt
# markdown
## processmdコマンドの使い方

# html
<h2 id=\"processmdkomandono-shi-i-fang\">processmdコマンドの使い方</h2>
```

参考：[Atomのmarkdown-tocでタイトルが日本語の場合に動かない場合の対処](http://yamap55.hatenablog.com/entry/2018/04/21/004258)

## 個人的な使い方

個人的には下のコマンドを**package.json**に登録して`npm run md`で変換しています。

```
{

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "md": "processmd markdown/*.md --stdout --preview 100 --outputDir content/posts/json > content/summary.json",
  },
  (省略)
}
```

## おわりに

以上でprocessmdの紹介でした。
[Netlify](https://www.suzu6.net/posts/55-hosting-service/)やCIツールでデプロイ時に変換する等の用途で使いやすいと思います。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8363/9784844398363.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >OD＞Markdownライティング入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">藤原惟 インプレスR＆D 2018年12月14日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4844398369/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=OD%81%84Markdown%83%89%83C%83e%83B%83%93%83O%93%FC%96%E5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

コマンドでマークダウンを変換するprocessmd | npm



Emojis in this text will be replaced: :dog: :+1:

Lift($L$) can be determined by Lift Coefficient ($C_L$) like the following
equation.

$$
L = \frac{1}{2} \rho v^2 S C_L
$$

**npm**のライブラリ**markdown-it-latex**を使って数式をKaTeXで表現しています。
どんな感じか数式を並べてみたいのでまとめました。
これを機に、$ \KaTeX $表記についても知ってもらえると嬉しいです。
Qiitaでも使っているようです。

数式は$\KaTeX$記法が学べるように個人的な好みで選びました。

---

「KATEX」という字がガタガタして見えているはずです。
これは[公式](https://katex.org/)のロゴマークで、こちらも$\KaTeX$表記で書けるようになっています。

```txt
\KaTeX
```


## Markdownから変換

記事自体はMarkdownからHTMLに変換しています。

- [markdown-it](https://github.com/markdown-it/markdown-it)
- [markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
- [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)

この３つがあればMarkdownで書いた文書を数式やコードシンタックスを付けて変換できます。

markdown-it-latexを解析したら、**KaTeX**で変換していることがわかりました。

- [KATEX](https://katex.org/docs/supported.html)

こちらにKaTeXでの表記方法が載っています。

また、まとめて利用したい場合は[processmd](https://www.npmjs.com/package/processmd)をインストールすると良いです。
コマンドでjson形式のデータに変換することもできます。

## 1. 三平方の定理

> 直角三角形の斜辺の長さを c, 他の2辺の長さを a, b とする。
> $$
> c^2 = a^2 + b^2
> $$

誰もが知ってる三平方の定理。ピタゴラスの定理とも言います。
[wiki](https://ja.wikipedia.org/wiki/%E3%83%94%E3%82%BF%E3%82%B4%E3%83%A9%E3%82%B9%E3%81%AE%E5%AE%9A%E7%90%86)を見るとこんなにたくさんの証明方法があるんですね。

````
a^2 + b^2 = c^2
````

KaTeXではシンプルに書けます。
`^`が累乗を表す。

## 2. オイラーの等式

> $$
> e^{i\pi}+1= 0
> $$


ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数を含みます。
さらに$1, 0$と重要な数も含むので、$e^{i\pi} = 1$よりも個人的に好みです。

````
e^{i\pi}+1= 0
````

KaTeXではこんな感じ。
円周率は`\pi`です。
指数に文字が多い場合は波かっこを使って括るとまとまります。`e^{i+1}`が$e^{i+1}$になる。

## 3. オイラーの公式

> $$
> e^{i\theta} = \cos\theta + i \sin\theta
> $$

微分方程式を解く人は必ずお世話になる公式。  
私は電子工学も専攻していたので、物理、電気、半導体、通信とどんな科目でも出てくる公式でした。
画像解析の時も出てきたな。

````
e^{i\theta} = \cos\theta + i \sin\theta
````

KaTeXで三角関数はもちろんサポートしています。
`\tan`や`\sinh`などもあります。

$\aleph\beta\gamma$などのギリシャ文字は頭文字を大文字にすると`\Theta` $\Theta$のように大文字になります。

## 4. 正規分布（ガウス分布）

> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$

統計学の分野から重要な数式を選びました。
数式自体は美しくはないですが、グラフにすると釣り鐘型の綺麗な曲線を描きます。
また、$\mu \pm \sigma$が変曲点となる特徴も持っています。

```
f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
```

平方根は`\sqrt{x}` $\sqrt{x}$、分数は`\frac{1}{x}` $\frac{1}{x}$で表わします。
また、$\mu \pm \sigma$の$\pm$は`\pm`です。


## 5. ガウス積分

> $$
> \int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
> $$

ガウス積分あるいはオイラー＝ポアソン積分です。


```
\int_{-\infty}^{\infty} f(x) dx = \sqrt{\pi}
```

- $\int$ `\int`
- $\int_{b}^{a}$ `\int_{b}^{a}`

不定積分と定積分の書き分けです。

- $\iint$ `\iint`
- $\iiint$ `\iiint`

フォルテッシシモみたいな重積分も書けます。

## 6. 調和数（発散列）

> $$
> \frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
> $$

なぜ分数を足していったら発散するのでしょうか？
不思議です。

```
\frac{1}{1} + \frac{1}{2} + \frac{1}{3} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n}= \infty
```

無限大$\infty$は`infty`と書きます。

`\dots`は種類が多いのでまとめて覚えちゃいます。

- $\dot{A}$ `\dot{A}`
- $\dots$ `\dots`
- $\ddots$ `\ddots`
- $\ldots$ `\ldots`
- $\vdots$ `\vdots`

`\sdot`で中点・が出るはずだけどエラーになる。。。

## 7. バーゼル問題

> $$
> \frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
> $$

なぜ分母を２乗にしたら収束するのでしょうか？
不思議です。


```
\frac{1}{1^2} + \frac{1}{2^2} + \frac{1}{3^2} + \dots = \displaystyle\sum_{i=1}^\infty \frac{1}{n^2}= \frac{\pi^2}{6}
```

級数は`\sum_{i=1}^n ` $\sum_{i=1}^n$と書きます。
`\sum`の前に`\displaystyle` $\displaystyle\sum_{i=1}^n$と`\textstyle` $\textstyle\sum_{i=1}^n$で表示を変えることもできます。

## おわりに

KaTeXで数式をきれいに表示出来ました。
基本的な表記方法は書けたような気がします。

また、以下の記事でもKaTeXで数式を書いています。

- [dictで多変数の多項式の同類項をまとめる|Python](https://www.suzu6.net/posts/100-similar-term/)
- [P5jsでガウス分布のデータセットを作成する](https://www.suzu6.net/posts/98-p5js-gaussian/)

## 参考

- [katex.org](https://katex.org/docs/supported.html)
- [数学の面白い公式8選 – 私が選んだ美しくて面白い公式を紹介します](https://analytics-notty.tech/interesting-formula-in-mathematics/)
- [Qiitaの数式チートシート](https://qiita.com/PlanetMeron/items/63ac58898541cbe81ada)


<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/7051/9784774187051.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >LATEX2ε美文書作成入門改訂第7版</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">奥村晴彦/黒木裕介 技術評論社 2017年01月23日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F14619491%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4774187054/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=LATEX2%83%C3%94%FC%95%B6%8F%91%8D%EC%90%AC%93%FC%96%E5%89%FC%92%F9%91%E67%94%C5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

美しい数式をKaTexで美しく書こう


このブログではマークダウンで記事を書いて、HTMLに変換している。
また、VSCodeでもマークダウンで文章を書いています。
**diff**も表示できることを知ったのでここに書きます。

## diffの表示の仕方

コードのところに**diff**をつけるだけ。

````txt
```diff
# 変更なし
- # 削除したところ
+ # 追加したところ
``` 
````

実際に表示させてやるとこんな感じ。

dockerの`.env`

```diff
### MYSQL #################################################

MYSQL_VERSION=latest
- MYSQL_DATABASE=default
- MYSQL_USER=default
- MYSQL_PASSWORD=secret
+ MYSQL_DATABASE=hogehoge #データベース名を変更
+ MYSQL_USER=hogehoge　#ユーザー名を変更
+ MYSQL_PASSWORD=hogehoge #パスワードを変更
```

## VSCode

VSCodeに拡張機能の**Markdown All in One**を導入しています。

- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

こんな感じになる。

![vscode](/images/posts/87/vscode.png)

左がエディタで右がプレビューです。
なかなか見やすい。

## ブログ

ブログでは、シンタックスハイライトのCSSは[highlight.js](https://highlightjs.org/)の[github.css](https://github.com/highlightjs/highlight.js/blob/master/src/styles/github.css)を使っています。


```diff
firebase.put('', '/measure', target)


- GPIO.setmode(GPIO.BOARD)  # to specify which pin numbering system
+ GPIO.setmode(GPIO.BCM)  # to specify which pin numbering system
GPIO.setwarnings(False)  
GPIO.setup(motion_pin, GPIO.IN, pull_up_down=GPIO.PUD_UP)
GPIO.setup(led_pin, GPIO.OUT)
```

こんな感じになる。

上記は、以前Pythonでラズパイのソースを変更したとき。[github](https://github.com/suzu6/acerola/commit/ff27e3bfdff34bf880dc31b73b298e5c01cf01fe)


### 環境

ブログのMarkdown -> HTMLのために使っているパッケージ。

- [processmd](https://github.com/tscanlin/processmd)
  - [markdown-it](https://github.com/markdown-it/markdown-it)
  - [markdown-it-highlight](https://github.com/tylingsoft/markdown-it-highlight)
  - [markdown-it-latex](https://www.npmjs.com/package/markdown-it-latex)
- github.css


ツールは**processmd**というnpmパッケージを使っています。
これは**markdown-it**、**markdown-it-highlit**などMarkdownからHTMLに変換するパッケージをまとめて利用できるので、なかなか使いやすいです。

```sh
$ npm install processmd
```

でまとめてダウンロードできます。

## 終わりに

「diff + プログラム言語」みたいな形で使えるとよいのだが、
対応していない。

以前作ったウェブ上でMarkdownからHTMLに変換出来るツールでは、確認したところdiffが使えなかった。
そちらは**Markedjs**を使っている。

- [Markedjsを使ってHTMLに変換するエディタのサンプルを作りました](https://www.suzu6.net/posts/37/)

markdownでdiffを表示できた|VSCode, markdown-it


## Markedjsを使った簡易エディタ

[markedjs](https://github.com/evilstreak/markdown-js)を使ってマークダウン記法でHTMLに変換できるフォームを作成しました。

~~本ブログでも、記事の利用に使っています。~~
※ サイトの移行に伴い、現在はnpmのmarkdown-itを利用しています。

実際どう動くのか、お確かめください。




<div class="columns section is-desktop is-small"">
    <div class="column">
        <h3> Markdownの入力フォーム</h3>
        <div class="field">
            <form id="editor-form" class="">
                <div class="control">
                    <textarea type="textarea" class="textarea" name="markdown" placeholder="markdown" rows="25" required></textarea>
                </div>
            </form>
        </div>
        <div class="field is-grouped">
            <div class="control">
                <span>このボタンで変換しますよ</span>
                <button class="button is-primary" type="button" onclick="draw_preview()">Preview</button>
            </div>
        </div>
    </div>
    <div class="column">
        <h3>HTMLに変換した結果</h3>
        <div class="section text-left" style="border: 2px solid #ebebeb; background: #ebebeb;">
            <div class="preview" id="marked-preview"></div>
        </div>
        <h3>目次を自動生成</h3>
        <div class="preview" id="headline-preview"></div>
        <div class="preview" id="headline" hidden></div>
    </div>
</div>


<script src="/js/core/jquery.3.2.1.min.js"></script>
<script src="/js/lib/underscore-min.js"></script>
<script src="/js/lib/marked.min.js"></script>
<script src="/js/lib/highlight.pack.js"></script>
<script src="/js/samples/markedjs_sample.js"></script>


コードの内容については[Markdownを「Marked.js」を使ってHTMLに変換する方法](https://www.suzu6.net/posts/38)で詳しく解説しています。

また、npmのコマンドを使ってマークダウンから変換する方法についても書いていますので、そちらもどうぞ。
[コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)

---

JavaScriptを初めて学ぶ方へのオススメ！
実際にプログラミングを書いて覚えられるので、オンラインでの学習と合わせて読み進めると理解が深まると思います。

<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/3584/9784797383584.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >確かな力が身につくJavaScript「超」入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">狩野祐東 SBクリエイティブ 2015年10月31日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F13430282%2F" target="_blank" rel="nofollow" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4797383585/suzu60c-22/" target="_blank" rel="nofollow" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" rel="nofollow" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>

Markedjsを使ってHTMLに変換するエディタのサンプルを作りました



## はじめに

[marked](https://github.com/markedjs/marked)を使ってマークダウン記法でHTMLに変換できるフォームを作成しました。

QiitaやはてなでもMarkdownを使って、記事が書けるようになっていますね。

本ブログでも、Markdownで記事の管理をしています。
また、コードを載せるため`syntax hilight`が効くように、[highlight.js](https://highlightjs.org/)をmarked.jsに連携させています。

動くサンプルは[こちら](https://www.suzu6.net/posts/37)にあるので、実際どう動くのかお確かめください。

## 利用方法

[marked](https://github.com/markedjs/marked)

ここから、`marked.min.js`をダウンロードしてお使いください。
npmを使っては、`npm install -g marked`でできるようです。

公式のサンプルは以下のようになっています。

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Marked in the browser</title>
</head>
<body>
  <div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked('# Marked in the browserRendered by **marked**.');
  </script>
</body>
</html>
```

`marked()`に渡したMarkdown文字列をHTMLに変換します。

マークダウンの書き方は[こちら](https://qiita.com/Thermidor/items/b684cfabe0f2fde0c67b)です。

## 準備

この項から、[こちら](https://www.suzu6.net/posts/37)のサンプルの解説を行います。

```html
<link rel="stylesheet" href="{{url_for('static',filename='css/github.css')}}">

<script src="/js/lib/marked.min.js"></script>
<script src="/js/lib/highlight.pack.js"></script>
```

ダウンロードしておいた、`marked.js`と`highlight.js`をインポートします。  
[highlight.js](https://highlightjs.org/)は、コードのシンタックスハイライトのために利用します。
コードのスタイルシートは、githubと同じものです。これも、highlight.jsのページにあります。

あとは、jQueryとBootstrapを使っているので、適宜利用してください。

## HTML

```html
<h2>Markdownの入力フォーム</h2>
<div class="col-md-12 ml-auto mr-auto text-left">
    <form id="editor-form" class="">

        <div class="form-group border border-default">
            <textarea type="textarea" class="form-control" name="markdown" placeholder="markdown" rows="15" required>
            ## Markedjsを使った簡易エディタ[markedjs](https://github.com/evilstreak/markdown-js)を使ってマークダウン記法でHTMLに変換できるフォームを作成しました。
            </textarea>
        </div>
    </form>
    <div class="d-flex pt-4">
        <div class="mr-auto p-2">
            <button class="btn btn-primary  btn-simple" type="button" onclick="draw_preview()">Preview</button>
            <span>このボタンで変換しますよ</span>
        </div>
    </div>
</div>

<h2>HTMLに変換した結果</h2>
<div class="col-md-12 ml-auto mr-auto text-left" style="border: 3px solid #ebebeb;">
    <div class="preview" id="marked-preview"></div>
</div>

<h2>目次を自動生成</h2>
<div class="preview" id="headline-preview"></div>
<div class="preview" id="headline" hidden></div>

```

テキストエリアに書かれたマークダウンを、Previewボタンで変換して`id="marked-preview"`にHTMLを入れます。

`draw_preview()`で変換の処理をしています。

同時に、見出し`#`の行の目次を作るため、`id="headline-preview"`も用意しました。

## MarkdownからHTMLに変換する

```javascript
function draw_preview() {
    var markdown = $('#editor-form [name=markdown]').val();
    // html
    var html = marked(markdown)
    // 目次を作成する
    headline(markdown);

    $('#marked-preview').html(html);
    
}
```

jQueryでtextareaに書かれた文字列を渡しています。
Markdownへの変換は`marked()`だけです。簡単ですね。

`headline`は、見出しを取り出す自作の関数です。後で説明します。

## markedの拡張

`marked.Renderer()`を上書きすることで、書き方を拡張することができます。

```javascript
window.onload = function () {
    marked_js_render();
};

/*
 * 拡張の追加
 */
function marked_js_render(){
    // marked.js + highlight.js
    var renderer = new marked.Renderer()

    // code syntax hilightの編集
    renderer.code = function (code, language) {
        return '<pre' + '><code class="hljs">' + hljs.highlightAuto(code).value + '</code></pre>';
    };
    // tableタグ
    renderer.table = function(header, body) {
        if (body) body = '<tbody>' + body + '</tbody>';
    
        return '<table class="table table-hover">'
        + '<thead>'
        + header
        + '</thead>'
        + body
        + '</table>';
    };
    marked.setOptions({
        renderer: renderer,
    });
}
```

コードのシンタックスハイライトが効くように、highlitejsの`highlightAuto`でコードを変換します。
また、クラスに`hljs`をつけてCSSが効くようのしました。

テーブルは、 Bootstrapのクラス名を当てて、スタイルが変化するようにしています。
他のデザインテンプレートへも、同じようにクラス名を当てることが出来ます。


## 目次の自動生成

ちょっと蛇足ですが、目次の自動生成も同時に行います。
`#`の行を見出しとして、抽出します。

コードの中にも`#`があるため、判定して無視するようにしました。

```javascript

function headline(markdown){
    lines = markdown.split(/\r|\r|/);
    var headline = [];
    var in_code = false;
    for(var it in lines){
        if(lines[it].match(/^```.?/)){
            // コードの行内の場合は外す
            in_code = in_code ? false : true;
        }
        if(lines[it][0] == '#' && !in_code){
            // 先頭の#とスペースを削除して追加
            headline.push(lines[it].replace(/^#+/, '').trim());
        }
    }
    console.log(headline)

    // 表示用のリスト構文
    var preview = "<ul>";
    for(var it in headline){
        preview += "<li>" 
                +  headline[it]
                + "</li>";
    }
    preview += "</ul>"
    // 確認用
    $('#headline-preview').html(preview);
    // 更新用
    $('#headline').html(headline.join(','));
}
```

## おわりに

marked.jsを使うと、簡単にHTMLへパースする処理を組み込むことが出来ました。
最初から拡張のしやすい形になっているため、ご自身の好みに合わせてどんどん拡張してください。
もっといろんなところに、Markdownが広がることを願っています。

動くサンプルは[こちら](https://www.suzu6.net/posts/37)にあるので、実際どう動くのかお確かめください。

また、npmのコマンドを使ってマークダウンから変換する方法についても書いていますので、そちらもどうぞ。

[コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)

### 参考

- [ぼくのかんがえたさいきょうのマークダウン（marked.jsを魔改造）](https://qiita.com/tiwu_official/items/4e56c833aff3dfb16231)
- [Library API](http://highlightjs.readthedocs.io/en/latest/api.html#highlightauto-value-languagesubset)
- [Marked.js で Markdown をクライアント側でパースして表示する](https://qiita.com/amay077/items/704d48130e5cf17e8654)


<div class="cstmreba"><div class="booklink-box"><div class="booklink-image"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" ><img src="https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/8363/9784844398363.jpg?_ex=200x200" style="border: none;" /></a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="booklink-info"><div class="booklink-name"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >OD＞Markdownライティング入門</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"><div class="booklink-powered-date">posted with <a href="https://yomereba.com" rel="nofollow" target="_blank">ヨメレバ</a></div></div><div class="booklink-detail">藤原惟 インプレスR＆D 2018年12月14日    </div><div class="booklink-link2"><div class="shoplinkrakuten"><a href="//af.moshimo.com/af/c/click?a_id=1286797&p_id=56&pc_id=56&pl_id=637&s_v=b5Rz2P0601xu&url=http%3A%2F%2Fbooks.rakuten.co.jp%2Frb%2F15736848%2F" target="_blank" >楽天ブックス</a><img src="//i.moshimo.com/af/i/impression?a_id=1286797&p_id=56&pc_id=56&pl_id=637" width="1" height="1" style="border:none;"></div><div class="shoplinkamazon"><a href="https://www.amazon.co.jp/exec/obidos/asin/4844398369/suzu60c-22/" target="_blank" >Amazon</a></div><div class="shoplinkkindle"><a href="https://www.amazon.co.jp/gp/search?keywords=OD%81%84Markdown%83%89%83C%83e%83B%83%93%83O%93%FC%96%E5&__mk_ja_JP=%83J%83%5E%83J%83i&url=node%3D2275256051&tag=suzu60c-22" target="_blank" >Kindle</a></div>                              	  	  	  	  	</div></div><div class="booklink-footer"></div></div></div>