
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


Windows版のNode.jsと同梱のnpmをインストールしていきます。

## 環境

- Windows 10 Home x64
  - バージョン 1909
- Node.js 12.18.3
- npm 6.14.6

## Node.jsをインストールする

1.まずは[こちら](https://nodejs.org/ja/download/)でLTS版をダウンロードします。

![download](/images/posts/240/249/node-download.png)

Chromeだと32bitか64bitかを勝手に判断してあったものをダウンロードしてくれます。

2.インストーラーを開いて進めます  
3."Next"をクリック

![download](/images/posts/240/249/2020-08-16-4.png)

4.ライセンスに同意する。

![download](/images/posts/240/249/2020-08-16-5.png)

5.インストールするパスを選択する。

![download](/images/posts/240/249/2020-08-16-6.png)

6.設定を選びます。

![download](/images/posts/240/249/2020-08-16-8.png)

デフォルトで問題なく、環境変数にNode.jsとnpmを追加などしてくれます。

7.Node.jsのインストールにはPythonとVisual Studio Build Toolsといったモジュールが必要です。
パッケージマネージャのChocolateryをインストールする場合はチェックします。  

![download](/images/posts/240/249/2020-08-16-9.png)

8."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-10.png)

9."Install"でインストールが始まります。

![download](/images/posts/240/249/2020-08-16-11.png)

10.コマンドプロンプトでインストールスクリプトが立ち上がります。

![download](/images/posts/240/249/2020-08-16-12.png)

11.PowerShellが立ち上がり必要なモジュールがインストール/アップデートがされました。

![download](/images/posts/240/249/2020-08-16-13.png)

コマンドプロンプトかPowerShellを開いてインストールできたことを確認します。

```
C:\Users\ysuzu>node -v
v12.18.3

C:\Users\ysuzu>npm -v
6.14.6
```

Windows10 HomeにNode.jsとnpmをインストールする

NuxtjsとMathJaxで数式エディタをつくってみる


このブログでは**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のリストで段組みを揃えて改行する方法


新しくNuxt.jsのプロジェクトを作成してから、`vue-loader`を使ってSCSSを導入するまでの手順です。公式にあるテンプレート利用しています。

SCSSとしていますがSassでも同様にできます。

## 環境

- Windows 10 Home
- Node.js v10.15.1
- npm 6.4.1
- yarn 1.15.2

Node.js / npm（ + yarn）の導入手順はこちらで紹介しています。
- [Windows](https://www.suzu6.net/posts/124-yarn-windows/)
- [Mac](https://www.suzu6.net/posts/45)
- [Ubuntu系](https://www.suzu6.net/posts/81-npm-install-ubuntu)

### 導入したもの

- node-sass: ^4.12.0
- nuxt: ^2.0.0
- sass-loader: ^7.1.0

## Nuxt.jsのプロジェクト作成

[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation)に従ってスターターテンプレートを使ってプロジェクトの作成を進めます。
個別にインストールしてスクラッチで作成することもできますが、`nuxt.config.js`の書き方など些細な点で悩むことが多いためテンプレートを使うことをお勧めします。

`<project-name>`は**sample**としておきます。

### create-nuxt-app を使用する

この項は[Nuxt.jsのガイド](https://ja.nuxtjs.org/guide/installation#nuxt-js-%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BF%E3%83%BC%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88)通りに進めて問題ないです。

```sh
# by npx
> npx create-nuxt-app sample

# by yarn
> yarn create nuxt-app sample
```

インストールが進み、sampleのフォルダが作成されました。
続いていくつか質問されます。
カーソルの位置のものを選択しています。
スタイルはスクラッチで開発する予定だったため、今回はUIフレームワークを使っていません。

```sh
? Project name (sample) # プロジェクト名は？
? Project description (My posh Nuxt.js project) # プロジェクト説明は？
? Author name (suzu6) # 制作者は？
# パッケージマネージャを選択
? Choose the package manager 
> Yarn
  Npm
# UI フレームワークを選択
? Choose UI framework (Use arrow keys) 
> None
  Ant Design Vue
  Bootstrap Vue
  Buefy
  Bulma
  Element
  iView
  Tachyons
  Tailwind CSS
  Vuetify.js
# サーバのフレームワークを選択
? Choose custom server framework (Use arrow keys) 
> None (Recommended)
  AdonisJs
  Express
  Fastify
  Feathers
  hapi
  Koa
  Micro
# モジュールを選択
? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Axios
 ( ) Progressive Web App (PWA) Support
# リントツールを選択
? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint
 ( ) Prettier
# テストのフレームワークを選択
? Choose test framework (Use arrow keys)
  None
> Jest
  AVA
# モードを選択（nuxt.configで変更可能）
? Choose rendering mode (Use arrow keys)
  Universal (SSR)
> Single Page App
```

インストールに成功したらのフォルダに移動して、立ち上げてみます。

```
> cd sample
> yarn dev
```

[http://localhost:3000/](http://localhost:3000/)でサイトを確認できます。


![template](/images/posts/170/173/1.png)


## SCSSを使えるようにする

本題です。

[vue-loader](http://vue-loader.vuejs.org/en/configurations/pre-processors.html)をインストールして`.vue`の中で`<style lang="scss">`を使えるようにします。

参考：[プリプロセッサを使うには？](https://ja.nuxtjs.org/faq/pre-processors)

### vue-loaderをインストール

`SCSS`に必要なモジュールをインストールします。

```sh
# by npm
> npm install sass-loader node-sass --save-dev

# by yarn
> yarn add npm install sass-loader node-sass
```
`pakage.json`
```json
  "dependencies": {
    "nuxt": "^2.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0"
  },
```

これで、`.vue`ファイル内で`SCSS`が使えるようになりました。
Nuxt.jsのホットリロードによってSCSSの修正が即座に反映され、開発が進みます。
以下のように`<style lang="scss">`を使えます。

```html
<style lang="scss">
.red {
  color: red
}
</style>
```

## 共通のSCSSファイルの設定

続いて、プロジェクトで共通のスタイルもSCSSで書けるようにします。

### .scssファイルを作成

`/assets/sass/app.scss`を作成して、読み込みませます。
同じフォルダのSCSSファイルをimportできるか試すため`variables.scss`と`common.scss`も同時に作成します。

`/assets/sass/app.scss`
```scss
// Variables
@import 'variables';

// common
@import 'common';
```

`/assets/sass/variables.scss`
```scss
$color-bg: rgb(248, 255, 187);
```

`/assets/sass/common.scss`
```scss
body {
    background-color: $color-bg;
}
```

背景色を変更するだけです。

### nuxt.config.jsの設定

`nuxt.config.js`にファイルのパスとSCSSであることを示せば勝手にやってくれます。
すごく簡潔だった。

`nuxt.config.js`
```js

  /*
  ** Global CSS
  */
  css: [
    { src: '~/assets/sass/app.scss', lang: 'scss' },
  ],
```

背景色が変わりました！
こちらもファイルを保存するだけで変更がすぐに反映されるため、スタイルをいじるのが楽しくなります。

![2](/images/posts/170/173/2.png)

共通のSCSSには`nuxt-sass-resources-loader`も必要かと思っていたが、`nuxt.config.js`への記述だけで済んだ。

参考：[Nuxt.jsでSassの変数を使えるようにして全ページで読み込むようにする](https://qiita.com/mimoe/items/890c4e681dac7c38322b)


Nuxt.jsのプロジェクトを作成してSCSSを導入するまで


テキストから数式に変換するプラグイン・アプリをまとめます。
ブラウザで実行できるもの、JavaScriptのライブラリ、VSCodeのプラグインなど関連するものをリスト化しました。

それぞれのサンプルまでは載せていません。

## 数式のエンジン・記法について

調べてみると思った以上に数式エンジンが多様だった。
記法もそれぞれあり一長一短がありそうです。

TeX記法など体系が曖昧なため、誤解を招く表現があるやもしれません。
あらかじめご了承ください。

どれが良いかは判断付かないため、見つけたものをここに書きだしておきます。

- [KaTeX](https://katex.org/)
- [MathML(Mathematical Markup Language)](https://developer.mozilla.org/ja/docs/Web/MathML)
- [MathJax](https://www.mathjax.org/)
- [UnicodeMath](https://blogs.msdn.microsoft.com/murrays/2016/11/30/unicodemath-version-3-1/)

### KaTeX

- [KaTeX](https://katex.org/)
- [GitHub](https://github.com/KaTeX/KaTeX)

> KaTeX is a fast, easy-to-use JavaScript library for TeX math rendering on the web.

ライセンス：MIT License

[ドナルド・クヌースのTeX](https://ja.wikipedia.org/wiki/TeX)をベースにしている。
MathJaxよりもブラウザでの描画が早いことを謳っています。

記法については[こちら](https://katex.org/docs/supported.html)にまとまっています。

### MathML

- [MDN - Mozilla](https://developer.mozilla.org/ja/docs/Web/MathML)

> Mathematical Markup Language (MathML) は、数学的表記を記述し、その構造と内容を表現するための XML マークアップ言語です。

数式を描画するマークアップ言語。
HTMLやXMLのように`<>`で書くような言語です。

[MathMLを対象とした数式検索エンジンの設計](https://www.jstage.jst.go.jp/article/infopro/2007/0/2007_0_45/_article/-char/ja/)といった論文も見つけた。

### MathJax

- [MathJax](https://www.mathjax.org/)
- [GitHub](https://github.com/asciimath/asciimathml)

> **Beautiful math in all browsers**  
> A JavaScript display engine for mathematics that works in all browsers.   
> No more setup for readers. It just works.

ライセンス：Apache License 2.0

JavaScriptを使ってブラウザ上に数式を描画するエンジン。
依存がないためこれだけで使える。

### UnicodeMath

- [MSDN](https://blogs.msdn.microsoft.com/murrays/2016/09/07/unicodemath/)

Unicodeの「数式用の書体指定付き文字」となる。
対応したフォントがあれば、数式の字体を変えられそう。

下のサイトの解説がとても詳しい。(3)まである。

- [unicode-math を完全に理解したい話(1)](https://zrbabbler.hatenablog.com/entry/20180915/1537031499)

### MathJaxとKaTeXについて

どちらもTeX文書の変換のためのライブラリであり、記法はほぼ同じ。
パースの速度面ではKaTeXが優勢です。

比較について詳しくは下記を参照してください。

- [TeXライブラリの選出](https://github.com/NetCommons3/Wysiwyg/issues/12)

## JavaScript, npm

以下はJavaScriptまたはnpmで使えるもの。

### markdown-it-latex

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

マークダウンをHTMLに変換する[markdown-it](https://github.com/markdown-it/markdown-it)の数式プラグイン。
**KaTeX**と**AsciiMath**に対応している。

このブログでもmarkdown-it、processmdと合わせて利用しています。

例えば、オイラーの公式も下記のように書けます。

KaTeX記法
````
```math
e^{i\pi}+1= 0
```
````

変換後の数式
```math
e^{i\pi}+1= 0
```


- [コマンドでマークダウンを変換するprocessmd | npm](https://www.suzu6.net/posts/120-npm-procesmd)
- [美しい数式をKaTexで美しく書こう](https://www.suzu6.net/posts/102-katex-math-functions)


### AsciiMath

- [AsciiMath](http://asciimath.org/)
- [GitHub](https://github.com/asciimath/asciimathml/blob/master/ASCIIMathML.js)

ブラウザ上でテキストから数式を変換できるJavaScriptライブラリ。
サイトにサンプルがあるので実行確認できます。
変換には[MathJax](https://www.mathjax.org/)を用いている。

CDN配信されているため、以下のスクリプトで導入できます。
```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_CHTML"></script>
```

## VSCodeプラグイン

Visual Studio Codeで数式を書けるプラグイン。
TeXとマークダウンそれぞれに対応したものがある。

### LaTeX Workshop

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=James-Yu.latex-workshop)

Visual Studio Codeのプラグインの中で一番人気のLaTeXプラグイン。
プレビューやスニペット、シンタックスなども同梱しているので、LaTeXで書くならまずはこれを入れるのが良さげです。

### Markdown All in One

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

Markdownで文章を書くならこれだけが一押し。
数式と入力補完も同梱されており下記のように書ける。エンジンはKaTeXかな。

```
$$
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
$$
```

```math
f(x) = \int_{-\infty}^\infty \hat f(\xi)\,e^{2 \pi i \xi x}\,d\xi
```

あとは、[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)を入れたら十全。

### mdmath

- [GitHub](https://github.com/goessner/mdmath)
- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=goessner.mdmath)

ライセンス：MIT License

Visual Studio Codeでマークダウン＋数式を書くことができるプラグイン。
数式の変換にはKaTeXを使っている。

### Markdown Math

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=koehlma.markdown-math)

$\href{https://katex.org/}{\KaTeX}$記法。

### Fast Unicode Math Characters

- [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=GuidoTapia2.unicode-math-vscode)

UnicodeMathに対応したプラグイン。

## その他サービス

### SearchOnMath

- [SearchOnMath](http://searchonmath.com/)

数式のための検索エンジン！
数式を使っているサイトを検索してくれる。

Googleに慣れてしまっているため精度や使い勝手はそこまでだが、試みはとても面白い。

- [数学の数式・記号のあるページを簡単に検索できる「SearchOnMath」- GigaZine](https://gigazine.net/news/20150225-searchonmath/)

### Mathematics Stack Exchange

- [Mathematics Stack Exchange](https://math.stackexchange.com/)

数式についての質問サイト。
質問タイトルが数式だらけで面白い。

恐らくMathJaxを使っています。

### maths online HTML formula tool

- [maths online HTML formula tool](https://www.univie.ac.at/future.media/moe/formeln/index.html)

HTMLでの特殊文字の書き方を確認できるツールサイト。
Symbolフォントが確認できる。

オーストリアのウィーン大学（Universität Wien）のドメイン上にあって驚いた。
Future Mediaというマルチメディア品質の製品の推進協会が作られたそうです。

## 終わりに

今後も、良さそうなアプリ・プラグインを見つけたら追記する予定です。

数式を書くためのエンジン・プラグイン・アプリのまとめ


Node.jsでも簡単にWEBアプリを作れますが、
WEBフレームワークのExpressを使うとより柔軟で簡潔なコードを書くことができます。

APIのテストのために使ってみてその使い勝手の良さに感動しました。
JavaScriptで書けるため、JSONが扱いやすいのも良いですね。

Node.jsの利用者も同時に広めたいのでインストール方法から概要と簡単な例を紹介します。
以下の内容は基本的に[公式](http://expressjs.com/ja/)を初心者向けに補足をする形です。

## 実行環境

- Express 4.16
- Node.js 10.15
- npm 6.4
- Windows 10 Home

開発はWindowsで行いますが、Nodeとnpmが入っていればMacやLinuxでも問題ありません。

## Node.js/npmのインストール

（2019年05月現在）Node.jsのバージョンは10.xが推奨されています。
OS毎のNodeとnpmのインストール方法はそれぞれ以下に挙げます。

- Windows : [こちら](https://nodejs.org/ja/)のインストーラ（推奨版）を使う。
- Linux
  - Ubuntu : [Ubuntuはaptを使う方法](https://www.suzu6.net/posts/81-npm-install-ubuntu)。
  - CentOS : [リンク](https://qiita.com/daskepon/items/16a77868d38f8e585840)先のコマンドを`8.x`から`10.x`に変更してインストールできます。
- Mac : [Homebrewを使う方法](https://www.suzu6.net/posts/45/)

バージョン6と8でも確認できたので、既にインストールされている方はそのままで大丈夫（なはず）です。

```sh
> node -v
v10.15.1

> npm -v
6.4.1
```

インストールして上記のコマンドが打てることを確認してください。

## Express

- [https://expressjs.com/](https://expressjs.com/)
- [日本語](http://expressjs.com/ja/)

![home](/images/posts/150/153/express-home.png)

> Fast, unopinionated, minimalist web framework for Node.js  
> Node.jsのための高速で、革新的な、最小限のWebフレームワーク

フロント側のJavaScriptに触れている方は、サーバ側もJavaScriptで書けるため覚えることが少なく直ぐに開発ができます。
そしてなりより、npmの豊富なライブラリも扱えるのでNode.jsとExpressを覚えておいて損はないと思います。

### インストール

下記のコマンドでExpressをインストールできます。

```sh
> npm install express
```

公式のインストールでは`--save`が付いていますが試す分には必要ありません。

`--save`はpackage.jsonでプロジェクトのモジュール（Expressなど）を管理する際に利用します。
ただ、npm v5からデフォルトで`--save`と同等のことをしてくれるため不要です。

- [npm install時に「--save」オプションはいらない](https://qiita.com/glhfdev/items/c5beda8572aa8c1e6be6)

### Hello World

アプリのディレクトリ（your_app）の配下にサーバのコードを書きます。

**your_app/app.js**

```js
const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => res.send('Hello World!'))

app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

僅か数行ですが、これだけで`Hello World!`を返すWEBアプリが出来ました！
コードについては後で解説します。

### サーバ実行

まずは、サーバを実行してみましょう。

```sh
# app.jsのパスへ移動
> cd path/to/your_app

# サーバ実行
> node app.js
Example app listening on port 3000!
```

これで[http://localhost:3000](http://localhost:3000)をブラウザで開くと`Hello World!`の文字が表示できます。

![hw](/images/posts/150/153/hello-world.png)

コードを編集した場合は、Kill（Ctrl + C）してから再度実行します。

## セミコロンの省略について

Node.jsはJavaScriptで書きますが、`;`セミコロンを自動で挿入してくれるため省略できます。
この仕様について議論が色々とありますが、個人的には付けたいです。
よって以下のコードでもセミコロンを付けておきます。

詳しくは [JavaScriptの行末セミコロンは省略すべきか](https://blog.tai2.net/automatic_semilocon_insertion.html)を読んで下さい。

## コードについての解説

コードは5行ですが、分解して説明します。

### インスタンス

```js
const express = require('express')
```

npmでインストールしたモジュール（Expressなど）は`require()`を使ってロードします。

```js
const app = express()
```

続いて`express`のインスタンスを生成します。
以降、`app`にリクエストの処理などを追加します。

### ルーティング

```js
app.METHOD(PATH, HANDLER)
```

URLに処理を紐づけるルーティングをします。

```js
app.get('/', (req, res) => res.send('Hello World!'))
```

上記では`http://localhost:3000/`にGETでアクセスされたら、`Hello World!`を返す処理になります。


`get()`を`post()`や`put()`、`delete()`に変えてメソッド毎に返すこともできます。
`use()`はすべてのメソッドに対して処理を行います。

パラメータの`req`がリクエスト、 `res`がレスポンスです。
`res.send()`で文字列やHTMLのページなど返すことができます。


```js
// /helloに来たPOSTメソッドに対してhelloを返す 
app.post('/hello', (req, res) => res.send('hello'))

// PUT
app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});


// コールバック関数を渡す
var collback = function (req, res) {
  res.send('Got Any request method at /book');
}

// useはすべてのメソッドに対して処理を行います。
app.use('/book', collback);

// /add?a=10&b=5 に対して15を返す
app.get('/add', (req, res) => {
    // req.queryでクエリパラメータ取得
    let a = parseInt(req.query.a)
    let b = parseInt(req.query.b)
    // 文字列にして返す
    res.send((a + b).toString())
})
```

第二引数は関数を渡します。
アロー関数ではなく、`function (req, res) {}`の形式でも大丈夫です。


以下にたくさんのサンプルがあります。

- パラメータの渡し方
- URLの正規表現
なども書いてあります。

- [基本的なルーティング](http://expressjs.com/ja/starter/basic-routing.html)
- [ルーティングガイド](http://expressjs.com/ja/guide/routing.html)


### サーバを立ち上げ

```js
app.listen(PORT, HANDLER)
```

```js
const port = 3000
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
```

ポート3000でサーバを立ち上げています。
数値は空いているポートなら80でも8080でも立ち上げることができるため、複数台立ち上げる時はずらして下さい。

ExpressとNode入門｜Node.jsのWEBフレームワークExpressでHello World


yarnはパッケージの依存関係の処理がnpmよりも良いと知ったので、導入してみる。

2021-04-25: インストーラーのダウンロードリンクを変更

`Chocolatey`というパッケージマネジメントツールを使うと
`choco install yarn`だけでインストール出来ます。
Chocolateyの導入方法はこちら。

[WindowsのパッケージマネジメントツールのChocolateyをインストールする](https://www.suzu6.net/posts/297-chocolatey-windows)


## 環境

- Windows10 Home
- Nodejs v10.15.1
- npm v6.4.1

既にNode.jsとnpmはインストール済みです。



- [Node.js / npmをインストールする（for Windows）](https://qiita.com/taiponrock/items/9001ae194571feb63a5e)

Node.jsとnpmはこちらを参考にインストールしました。

## yarnのインストール

yarnをWindowsにインストールする手順。

[インストール | Yarn](https://classic.yarnpkg.com/en/docs/install#windows-stable)

`Alternatives`の`Click to expand / collapse`を開いて、`Download installer`からとWindowsのインストーラー(.msi)をダウンロードできます。

公式からインストーラーをダウンロードします。
**安定版**を選択して「インストーラをダウンロードする」をクリックしてダウンロードします。

インストーラは変更箇所もなく、Nextやacceptedを選択してインストールできました。

コマンドプロンプトを開いてバージョンを確認します。

```cmd
yarn -v
1.15.2
```

無事確認できました！

インストーラ以外にも、ChocolateyやScoopからでもインストールできます。

## yarnが認識されないとき

```cmd
'yarn' は、内部コマンドまたは外部コマンド、
操作可能なプログラムまたはバッチ ファイルとして認識されていません。
```

コマンドを打って上のエラーが出た場合、コマンドプロンプトを再起動してください。
PCの再起動でもできなくないです。

それでもダメな場合は、Pathが通っていないことが原因です。
再インストールするか、環境変数のPathを通します。

![yarn-path](/images/posts/ONE/125-yarn.png)

`C:\Program Files (x86)\Yarn\bin`

yarnのbinのフォルダのパスを追加してください。

※画像のモザイク処理が汚くて申し訳ない。

Windowsにyarnをインストールする


**Nuxt 2.5.1**にアップデートしてから、`nuxt run dev`の実行時に表題のエラーが出たのでメモ。

## 環境

- Nuxt v2.5.1
- Node.js v11.12.0

## エラー内容

コンパイル中にfriendly-errorsが山ほど出た。

```sh
$ nuxt run dev 

(省略)

friendly-errors 01:38:28  ERROR  Failed to compile with 35 errors

friendly-errors 01:38:28 These dependencies were not found:
friendly-errors 01:38:28 
friendly-errors 01:38:28 * core-js/modules/es6.array.find in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.array.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.date.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.function.name in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.assign in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.keys in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.object.to-string in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.promise in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.constructor in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.match in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.replace in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/common/ShareButtons.vue?vue&type=script&lang=js& and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.regexp.search in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.regexp.split in ./.nuxt/utils.js, ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./components/SideBar.vue?vue&type=script&lang=js& and 2 others
friendly-errors 01:38:28 * core-js/modules/es6.regexp.to-string in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es6.string.iterator in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es6.string.repeat in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.string.starts-with in ./.nuxt/utils.js
friendly-errors 01:38:28 * core-js/modules/es6.symbol in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/es7.array.includes in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js and 1 other
friendly-errors 01:38:28 * core-js/modules/es7.promise.finally in ./.nuxt/client.js
friendly-errors 01:38:28 * core-js/modules/es7.symbol.async-iterator in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 * core-js/modules/web.dom.iterable in ./.nuxt/client.js, ./.nuxt/components/nuxt-link.client.js
friendly-errors 01:38:28 
friendly-errors 01:38:28 To install them, you can run: npm install --save core-js/modules/es6.array.find core-js/modules/es6.array.iterator core-js/modules/es6.date.to-string core-js/modules/es6.function.name core-js/modules/es6.object.assign core-js/modules/es6.object.keys core-js/modules/es6.object.to-string core-js/modules/es6.promise core-js/modules/es6.regexp.constructor core-js/modules/es6.regexp.match core-js/modules/es6.regexp.replace core-js/modules/es6.regexp.search core-js/modules/es6.regexp.split core-js/modules/es6.regexp.to-string core-js/modules/es6.string.includes core-js/modules/es6.string.iterator core-js/modules/es6.string.repeat core-js/modules/es6.string.starts-with core-js/modules/es6.symbol core-js/modules/es7.array.includes core-js/modules/es7.promise.finally core-js/modules/es7.symbol.async-iterator core-js/modules/web.dom.iterable
01:38:29 ℹ Waiting for file changes
```

最後の行に足りないパッケージをインストールするようにとあった。

```
$ npm install --save core-js/modules/es6.array.find core-js/modules/es6.ar...
```

実行したが解消しなかった。
また、$ yarn add core-js`も同様にダメだった。


## GitHubを確認

エラーを調べると[issues #3842](https://github.com/nuxt/nuxt.js/issues/3842)に報告済みであり、クローズしていた。
依存関係にバグがありcore-jsの依存関係が解消されなかったらしい。

## もう少しググる

解決策は（多分）無かったのでもう少しググり、中華サイトに行き当たった。
**segmentfault**という中華版Stack OverFlowみたいなサイト。

[解决liunx系统，项目nuxt2.0运行npm run dev / start报错问题](https://segmentfault.com/a/1190000018647030)

```sh
$ npm install --save core-js@latest2.6.2
```
最新版のcore-jsが必要そうなので、yarnで実行してみた。

```sh
$ yarn add core-js@latest2.6.2
yarn add v1.15.2
[1/4] Resolving packages...
Couldn't find any versions for "core-js" that matches "latest2.6.2"
? Please choose a version of "core-js" from this list: 2.6.5
```

**core-jsの最新版の2.6.5を選択してインストールして解消した！！！**

## おわりに

まとまっていないのは申し訳ない。
悩まれている方の助けに少しでもなりますように。

Nuxt2.5でのエラー：core-js/modules/es6.array.find in ./.nuxt/client.js


このブログではマークダウンで記事を書いて、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

diffの表示の仕方

VSCode

ブログ

環境

終わりに