
仕事で使うので React に入門する。
いつかは React と TypeScript でアプリを作れるようになって設計も考えられるようになるところまで目指すが、今回はチュートリアルだけやりつつメモをするだけの記事。

読まなくていいので[チュートリアル](https://ja.reactjs.org/tutorial/tutorial.html)を進めた方がいい。

## 前提

Vue + TypeScript でアプリを開発した経験はある。
React の方が TypeScript できちんと型を定義して開発できるため相性が良く開発しやすいことを期待している。

## React

https://ja.reactjs.org/

サンプルを見た感じ、コンポーネントをクラスで扱えるのがわかりやすそう。
前に Vue と比較したときは JavaScript の中に HTML がある JSX が変な感じがしたが、慣れたら問題なさそうに思う。

```jsx:jsx
class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('hello-example')
)
```

このブログでマークダウンのパーサーとして使ってる [remark](https://github.com/remarkjs/remark#syntax) でも jsx のハイライトが対応していたのは嬉しい。

### React のチュートリアル

https://ja.reactjs.org/tutorial/tutorial.html

React でインタラクティブな三目並べゲーム (tic-tac-toe) を作るチュートリアル。

ブラウザでの実行環境も用意されているが、ローカル開発環境作ることから進めてみる。

作ったものの[リポジトリ github](https://github.com/suzu6/react-typescript-test/tree/main/my-app)

### ローカル開発環境

- node v16.13.0
- npm v8.1.0
- os Windows11
- yarn -v

```bash
npx create-react-app my-app
```

これでアプリの土台を作成して、`my-app/src/*`を削除する。
src/に index.js, index.css を追加。

```bash
> npx create-react-app my-app
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.

Creating a new React app in C:\git\suzu6\react-typescript-test\my-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

略

Success! Created my-app at C:\git\suzu6\react-typescript-test\my-app
Inside that directory, you can run several commands:

  yarn start
    Starts the development server.

  yarn build
    Bundles the app into static files for production.

  yarn test
    Starts the test runner.

  yarn eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  yarn start

Happy hacking!
```

インストール終わり。
yarn がインストールされていたためか、yarn のコマンドが表示された。

アプリが実行確認と src にあるファイルを削除を進めた。

index.js と index.css の追加も行い実行する。

![picture 1](/images/posts/338-react-typescript/1639287302648.png)

### Developer Tools

[React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)

途中で紹介されていた React Developer Tools を Chrome に追加した。

Developer Tools のメニューに`components`が追加され、React コンポーネントの状態までわかるようになった。これいいね。

![picture 2](/images/posts/338-react-typescript/1639288365306.png)

同じく追加された profiler はまだ使い方がわからない。

### 制作時のメモ

タイムトラベル機能の追加が変更箇所が大きくて迷った。
履歴を残すために state を Board から Game に移す作業で onclick が動かなくなったが、props の onClick か自身のものかで考えて解決した。

### マス目を for 文で書いてみる

チュートリアルが終わったので適当に改造する。

マス目の数を増やせるように Board のレンダーを for 文で表現してみる。

```jsx
render() {
  return (
    <div>
      <div className="board-row">
        {this.renderSquare(0)}
        {this.renderSquare(1)}
        {this.renderSquare(2)}
      </div>
      <div className="board-row">
        {this.renderSquare(3)}
        {this.renderSquare(4)}
        {this.renderSquare(5)}
      </div>
      <div className="board-row">
        {this.renderSquare(6)}
        {this.renderSquare(7)}
        {this.renderSquare(8)}
      </div>
    </div>
  );
}
```

▼ こんな感じで書き換えることができた。

```jsx
render() {
  const [width, height] = [3, 3];
  const rows = [];
  for (let i = 0; i < width; i++) {
    const cells = [];
    for (let j = 0; j < height; j++) {
      cells.push(this.renderSquare(i * 3 + j));
    }
    rows.push(<div className="board-row">{cells}</div>);
  }
  return <div>{rows}</div>;
  );
}
```


Reactに入門するよ


TypeScriptでGenericsな配列を扱う関数を試してみた。
引数の型が`T`の例は多くあるけど`Array<T>`は無かったのでメモしておく。

## Genericsな配列を扱う関数

重複を除いたユニークなリストを返す関数を考えてみる。

```ts
/**
  * 重複を除いたユニークなリストを返す
  * @param Array<T> src
  * @return Array<T> 要素がユニークなリスト
  */
function uniqueList<T>(src: Array<T>): Array<T> {
  return src.filter(function (elem, index, self) {
    return self.indexOf(elem) === index
  })
}
```

関数名のあとにジェネリクス`<T>`を定義して、あとは引数と返り値の型で`Array<T>`と利用することができる。

実行するとstring型とnumber型もunionでも利用できた。

```ts
const chars = ['A', 'B', 'A', 'B', 'C', 'A']
const numbers = [0, 1, 2, 2, 1, 3, 1]
const unions: Array<number|string> = [1, 2, 2, 'A', 'A', 'B']

console.log(uniqueList(chars))
// ['A', 'B', 'C']
console.log(uniqueList(numbers))
// [0, 1, 2, 3]
console.log(uniqueList(unions))
// [1, 2, 'A', 'B']
```

【TypeScript】ジェネリックスな配列Array<T>を扱う関数を定義する


TypeScriptのプロジェクトにJestを追加してテストを書いていくと、`describe`や`expect`などテスト用の関数が読み込めていなかった。

![picture 1](/images/posts/326-ts-jest-not-find-describe/1633874097427.png)  

以下のコマンドで定義はインストール済だがエラーが出ている。
```bash
yarn add jest @types/jest ts-jest
```

## 解消方法

[こちらのstackoverflow](https://stackoverflow.com/questions/54139158/cannot-find-name-describe-do-you-need-to-install-type-definitions-for-a-test)で解決した。

```diff:tsconfig.json
{
  "compilerOptions": {
--    "types": ["webpack-env"],
++    "types": ["webpack-env", "jest", "node"],
  }
}
```
このようにコンパイルオプションでjestの型の読み込みこみが必要だったようだ。

## 参考
- [Jest - TypeScript Deep Dive 日本語版](https://typescript-jp.gitbook.io/deep-dive/intro-1/jest)

【TypeScript】Jestでdescribeなどの関数がnot findになってるのを解消する


TypeScriptのjestで用意したテストで、自作のモジュールをインポートしようとすると`Cannot find module`となってしまう。

例として次のテストを実行してみる。

```ts:Login.test.ts
import LoginService from "@/app/Services/LoginService";
import auth from "@/Domain/Repositories/AuthRepository";

describe("LoginService", () => {
  it("LoginSuccess", () => {
    // ...
    expect(result).toBe('success');
  });
});
```

`@/`は`tsconfig.json`で定義してある。エディタ（VSCode）のIDEではパスが通っているようでエラーは出ない。


実行した結果がこちら。
テストを実行したときだけパスが通らない。

```bash
  ● Test suite failed to run

    Cannot find module '@/app/Services/LoginService' from 'tests/app/Services/Login.spec.ts'

    > 1 | import LoginService from "@/app/Services/LoginService";
        | ^
      2 | import auth from "@/Domain/Repositories/AuthRepository";
      3 |
      4 | describe("LoginService", () => {

      at Resolver.resolveModule (node_modules/jest-resolve/build/resolver.js:322:11)
      at Object.<anonymous> (tests/app/Services/Login.spec.ts:1:1)

Test Suites: 1 failed, 1 passed, 2 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        17.456 s
Ran all test suites.
```

## 解決方法

テストは`jest.config.js`で`@/`の定義が必要。

`@/`など`tsconfig.json`で定義してあるとVSCodeのIDEとアプリのコンパイルには成功する。

▼ `tsconfig.json`のパスの定義
```json:tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
  },
}
```

テストでは`tsconfig.json`とは別に`jest.config.js`で`@/`などのマッパーを定義する必要がある。


混乱しないよう`tsconfig.json`と同じパスの定義をするといい。

```js:jest.config.js
module.exports = {
  preset: "ts-jest",
  globals: {
    "ts-jest": {
      tsConfig: "tsconfig.json",
    },
  },
  roots: ["<rootDir>/"],
  testMatch: ["**/?(*.)+(spec|test).+(ts|tsx|js)"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1", // 追加
  },
};
```

以上でテストの実行時にパスが通った。

【TypeScript】JestでインポートしたモジュールがCannot find moduleとなるエラー


デスクトップアプリを作るならPCの電源周りの動作にも気を配る必要があります。
裏で動いていた非同期なタスクがスリープから起動後に再度実行できるようイベントをハンドリングしていきます。

Electornでは`powerMonitor`というAPIが用意されています。

## powerMonitor

`powerMonitor`は電源の状態の変化をモニターします。

[powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)

### イベント: resume
システムが再開したときのイベントです。

### 利用例

メインプロセスでのみ利用できます。
`app`の`redy`の中で利用します。

▼ TypeScriptでの例。
```ts:main.ts
import { app, powerMonitor } from "electron";
import log from "electron-log";

app.on("ready", async () => {
  log.info("App ready");


  /**
   * システム（PC）が再開したとき
   */
  powerMonitor.on('resume', function () {
    log.info('System resumption');
    // 何らかの処理
  })
});
```

## その他のイベント

公式が充実しているため短い紹介だけします。

- システムの再開と停止: `resume`, `suspend`
- 電源の状態: `on-ac`, `on-battery`
- スクリーンをロックとアンロック: `lock-screen`, `unlock-screen`
- システムが再起動またはシャットダウンするとき: `shutdown`

## 状態を把握するメソッド

- `powerMonitor.getSystemIdleState(idleThreshold)`  
  現在のシステムの状態 `active` 、 `idle` 、 `locked` 、 `unknown`を返す。
- `powerMonitor.getSystemIdleTime()`  
  アイドル状態の秒数を返す
- `powerMonitor.isOnBatteryPower()`  
  システムがバッテリー電源状態かどうか

電源周りはタブレットPCを使った設備点検などのアプリで利用できそうです。

## 参考

- [powerMonitor | Electron](https://www.electronjs.org/docs/api/power-monitor)
- [powerMonitor · Electron docs gitbook - imfly](https://imfly.gitbooks.io/electron-docs-gitbook/content/jp/api/power-monitor.html)

【Electron】PCのスリープと起動イベントを検知する


Electronで作ったアプリが多重に起動していることを検知する仕組みがある。
これを使ってアプリの２重起動を防ぐ方法を紹介する。

なお確認はWindows 10 Homeで行った。

## アプリが多重起動していることを検知する

appの次の関数で多重起動を判定できる。

> **app.requestSingleInstanceLock()**  
> 戻り値 boolean  
> 
> このメソッドの戻り値は、アプリケーションのこのインスタンスのロックが成功したかどうかを表します。 ロック状態にできなかった場合、アプリケーションの他のインスタンスが既にロックされており、ただちに終了すると想定できます。
> 
> [app.requestSingleInstanceLock() - www.electronjs.org](https://www.electronjs.org/docs/api/app#apprequestsingleinstancelock)

つまり、アプリを立ち上げて`app.requestSingleInstanceLock()`の結果が`false`のとき既に起動しているアプリがあるため、自身のプロセスを終了させることで多重起動を防ぐことができる。


## コードサンプル
以下、TypeScriptで書いているがJavaScriptでももちろん問題ありません。

**main.ts** 
```ts
"use strict";

import { app } from "electron";
import log from "electron-log";

/** 
 * アプリの二重起動を防ぐ
 */
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
  log.info("APP_ALREADY_RUNNING");
  log.info("APP_QUIT");
  app.quit();
}

/** 
 * アプリの起動処理など
 */
app.on('ready', () => {
  log.info("APP_READY");

});
```



おわり

Electronでアプリの２重起動を防ぐためのコード


Nuxt.jsで静的サイトを作成する処理を実行したら、計算途中でメモリが不足してエラーとなり止まってしまった。
ヒープ領域を確保して処理を通します。

参考： https://qiita.com/nakamto/items/8ed18f9f0d980fd70be1

## 環境

- CentOS Linux 7
- node v14.15.3
- yarn 1.22.10

## エラー

```bash
$ yarn generate

(省略)


<--- JS stacktrace --->

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0xa04200 node::Abort() [/usr/local/bin/node]
 2: 0x94e4e9 node::FatalError(char const*, char const*) [/usr/local/bin/node]
 3: 0xb7860e v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 4: 0xb78987 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/local/bin/node]
 5: 0xd33215  [/usr/local/bin/node]
 6: 0xd33d9f  [/usr/local/bin/node]
 7: 0xd41e2b v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/local/bin/node]
 8: 0xd459ec v8::internal::Heap::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/usr/local/bin/node]
 9: 0xd0b2f2 v8::internal::Factory::AllocateRaw(int, v8::internal::AllocationType, v8::internal::AllocationAlignment) [/usr/local/bin/node]
10: 0xd05174 v8::internal::FactoryBase<v8::internal::Factory>::AllocateRawWithImmortalMap(int, v8::internal::AllocationType, v8::internal::Map, v8::internal::AllocationAlignment) [/usr/local/bin/node]
11: 0xd074c1 v8::internal::FactoryBase<v8::internal::Factory>::NewRawTwoByteString(int, v8::internal::AllocationType) [/usr/local/bin/node]
12: 0x1097b49 v8::internal::Runtime_StringBuilderConcat(int, unsigned long*, v8::internal::Isolate*) [/usr/local/bin/node]
13: 0x1400039  [/usr/local/bin/node]
error Command failed with signal "SIGABRT".
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
```

## 解決方法

処理を実行する前に`NODE_OPTIONS`の`max-old-space-size`を設定します。

```bash
$ export NODE_OPTIONS="--max-old-space-size=2048"
```

数値の単位はメガバイトです。
2048MBは2GBです。

V8ヒープの使用量がヒープ制限に近づいたとき、V8ヒープスナップショットをディスクに書き込み領域を確保します。

NODE_OPTIONSについて: 
https://nodejs.org/api/cli.html#cli_max_old_space_size_size_in_megabytes


【Node.js】yarn generateでヒープ領域が不足してエラーになったのでヒープ領域の設定を変更して処理を実行した

個人の技術ブログを作り直しました（３回目）


前回作ったブログでサイトマップを作ります。
generateで静的ページを作って公開する予定です。



## Table of Contents

## セットアップ

[@nuxtjs/sitemap](https://www.npmjs.com/package/@nuxtjs/sitemap)を使います。

```sh
$ yarn add @nuxtjs/sitemap
```
`nuxt.config.js`の`modules`に`'@nuxtjs/sitemap'`を追加します。
すべてのルートが確実にキャッチされるように、インクルードした他のモジュールの後で実行する必要があります。

```js:nuxt.config.js
export default {
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap'
  ],
}
```

次に、サイトマップ構成のデフォルトをいくつか追加します—を追加hostnameして空の関数を設定します。この関数は、後でコンテンツのパスを取得して返すために使用します。
```js:nuxt.config.js
export default {

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/', 
    routes: async () => {} // routesにURLを渡す
  },

}
```

`routes: ['path/article1', 'path/article1']`のように配列を渡すとサイトマップを作ってくれます。
これから、この配列を網羅的に作っていく。


ドメイン名だけだと`TypeError [ERR_INVALID_URL]: Invalid URL: www.suzu6.net\`が出る。
URLの形式じゃないとエラーが出るのは良いね。
httpから書きます。


## URLのリストを作成する

routesにサイトマップの配列を渡します。
@nuxt/contentでは以下のコードで`content/posts/*.md`のパスを渡します。

```js:nuxt.config.js
routes: async () => {
  const { $content } = require('@nuxt/content')

  const posts = await $content('posts')
    .only(['path'])
    .fetch()

  return posts.map((p) => p.path)
}
```

上記の設定で`yarn run generate`で同時にsitemap.xmlが作られるようになります。

```xml:dist/sitemap.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
	<url>
		<loc>
			https://www.suzu6.net/posts/102-katex-math-functions
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/14
		</loc>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/10
		</loc>
	</url>
  ...
```

## サイトマップにパス以外の情報を渡す。

```js
routes: [
  '/page/1',
  '/page/2',
  {
    url: '/page/3',
    changefreq: 'daily',
    priority: 1,
    lastmod: '2017-06-30T13:30:00.000Z'
  }
]
```

```js:nuxt.config.js

  sitemap: {
    hostname: process.env.BASE_URL || 'https://www.suzu6.net/',
    routes: async () => {
      let array = [
        {
          // トップページ
          url: '/',
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date()
        }
      ];
      // コンテンツ
      const { $content } = require('@nuxt/content')
      const posts = await $content('posts')
        .only(['path', 'updated_at'])
        .fetch()
      array = array.concat(
        posts.map((p) => 
          { 
            return {
              url: p.path, 
              lastmod: p.updated_at,
              priority: 1,
            }
          })
      )
      return array
    }
  },
```



```xml:sitemap.xml
	<url>
		<loc>
			https://www.suzu6.net/
		</loc>
		<lastmod>
			2020-12-16T09:50:32.366Z
		</lastmod>
		<changefreq>
			daily
		</changefreq>
		<priority>
			1.0
		</priority>
	</url>
	<url>
		<loc>
			https://www.suzu6.net/posts/1
		</loc>
		<lastmod>
			2019-01-04T00:00:00.000Z
		</lastmod>
		<priority>
			1.0
		</priority>
	</url>
```



- [Generating Sitemap Entries For Nuxt Content](https://medium.com/javascript-in-plain-english/generating-sitemap-entries-for-nuxt-content-f7eb7b5fdb3b)

nuxt/contentでサイトマップを作る

nuxt/contentで作ったサイトに絵文字や数式のプラグインを追加して、マークダウンの書式を拡張します。
nuxt/contentを使っていなくても、remarkのプラグイン選びの参考にはなるかと思います。

## Table of Contents

## マークダウンのプラグイン
[markdown - @nuxt/contet](https://content.nuxtjs.org/configuration#markdown)

@nuxt/contentでは[remark](https://www.npmjs.com/package/remark)というプラグインでマークダウンの構文を解析しています。
HTMLへのパースは[remark-html](https://github.com/remarkjs/remark-html)を使ったりと、マークダウンを拡張する`remark-*`の豊富なエコシステムがあります。
目的に応じて役割ごとに細かなプラグインを組み合わせて扱うことができる。

`yarn` または `npm` でプラグインをインストールして**nuxt.config.js**に追加するだけで利用できます。
下はここで使っている絵文字や数式（$\KaTeX$）のプラグインを追加したところです。
コードを書かなくてよいので管理しやすい。

```js:nuxt.config.js
export default {
  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-emoji',
        'remark-math',
        'remark-toc',
        'remark-footnotes',
        'remark-code-titles'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
２つのpuluginがあります。
`remark`はMarkdownの構文を解析するプロセッサで、`rehype`がHTMLを構築するプロセッサです。
例えば、`remark-math`がMarkdownの構造を解析して`rehype-katex`が$\KaTeX$に対応するHTMLに変換している。
`remark-emoji`のように単体で両方こなすものもある。

remarkについて読み応えのある熱い記事を見つけたので載せておきます。独自のParserの拡張の仕方も載ってます。
- [Remark で広げる Markdown の世界](https://vivliostyle.github.io/vivliostyle_doc/ja/vivliostyle-user-group-vol2/spring-raining/index.html)

---

以下からremarkの拡張プラグインを紹介していきます。
利用できる公式オススメのプラグインは[awesome-remark](https://github.com/remarkjs/awesome-remark)にまとまってます。  

## 絵文字

[remark-emoji](https://github.com/rhysd/remark-emoji)

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-emoji`を追加する。
これでパースできるようになっています。

マークダウンの中の対応する文字を絵文字に変換してくれます。
```txt:入力
Emojis in this text will be replaced: :dog: :+1:

Toilet Time
:toilet: = 2 Minutes
:toilet: + :iphone: = 5 Minutes
:toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes
:toilet: + :iphone: + :signal_strength: + :battery: = Infinite 
```

▼**出力結果**（引用符で囲ってます）
> 
> Emojis in this text will be replaced: :dog: :+1:
> 
> 
> Toilet Time  
> :toilet: = 2 Minutes  
> :toilet: + :iphone: = 5 Minutes  
> :toilet: + :iphone: + ⁣:signal_strength: = 10 Minutes  
> :toilet: + :iphone: + :signal_strength: + :battery: = Infinite   

[EMOJI CHEAT SHEET](https://www.webfx.com/tools/emoji-cheat-sheet/)の絵文字のコードは使えるはずです。

## 数式

数式に対応する`remarkPlugins`が[remark-math](https://github.com/remarkjs/remark-math)です。
数式を$$で囲うか、文中の場合は$で囲います。


対応する`rehype`には$\KaTeX$と**MathJax**があります。
- [rehype-katex](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-katex)
- [rehype-mathjax](https://github.com/remarkjs/remark-math/blob/main/packages/rehype-mathjax)

どちらもLaTeXですが、HTMLの描画方法が少し違います。
個人的には描画速度が早くてKaTeXを選んでます。

```sh
# インストール
$ yarn add remark-emoji
```
**nuxt.config.js**の`content.markdown.remarkPlugins`に`remark-math`を、`rehypePlugins`に`rehype-katex`を追加する。
そして、表示のために$\KaTeX$のスタイルシートも当てます。
```js
export default {
    link: [
      // Add style sheet
      {
        rel: 'stylesheet',
        href: 'https://cdn.jsdelivr.net/npm/katex@0.11.0/dist/katex.min.css'
      },
    ],
  },

  // Content module configuration (https://go.nuxtjs.dev/config-content)
  content: {
    markdown: {
      remarkPlugins: [
        'remark-math'
      ],
      rehypePlugins: [
        'rehype-katex'
      ]
    }
  },
}
```
マークダウンで数式を書いてみる。
```md
**オイラーの等式**
$$
e^{i\pi}+1= 0
$$
ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。

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

▼**出力結果**  
> **オイラーの等式**
> $$
> e^{i\pi}+1= 0
> $$
> ネイピア数$e$、虚数$i$、円周率$\pi$と有名な定数に$0$と$1$がある全部入りの数式。
> 
> **正規分布（ガウス分布）**
> $$
> f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
> $$
> 平均を$\mu$, 分散を$\sigma^2 \gt 0$とする正規分布とは、確率密度関数が次の形で与えられる確率密度関数。

備考：[@nuxt/content で数式を表示する](https://blog.tunehira.net/posts/display-eqations-with-nuxt-content/)の記事と同様に、数式が表示されずはまりました。スタイルシートが足りなかったことが原因でした。


## 見出しの目次を作る

[remark-toc](https://github.com/remarkjs/remark-toc)

マークダウンの中で目次を出したいところに`## Table of Contents`を書くとその位置に目次が出ます。
見出し（#）が自動的に目次になる。

```txt
## Table of Contents
```
この記事の[Table of Contents](https://www.suzu6.net/posts/265-nuxt-content-remark/#table-of-contents)もこれを利用しています。

## 改行をHTMLに適用する

マークダウンでは末尾にスペース2個で改行となります（１行間を空けると別のpタグで囲まれる）。
ただ、それを知らないとテキストと表示がずれているように感じます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a
paragraph.</p>

```

[remark-breaks](https://github.com/remarkjs/remark-breaks)はマークダウンの改行をHTMLでも改行してくれます。

```html
マークダウン
This is a
paragraph.
↓
HTML
<p>This is a<br>
paragraph.</p>
```
マークダウンの原理主義でないなら直感的にわかりやすいと思う。

## コードブロックにタイトルをつける

Qiitaなどのブログではコードブロックにファイル名などの補足があります。
あれを実現するためのパーサーが[remark-code-titles](https://www.npmjs.com/package/remark-code-titles)です。

```sh
# インストール
$ yarn add remark-code-titles
```

```js:nuxt.config.jsに追加する
export default {
  …
  content: {
      remarkPlugins: [
        'remark-code-titles'
      ],
    }
  },
```

コードブロックの先頭に **```拡張子:コードブロックのタイトル** と書くとタイトルが
`<div class="remark-code-title">コードブロックのタイトル</div>`と決まったクラスの`<div>`に囲まれる。
そこにスタイルを当ててタイトルっぽくしてます。

````txt
```python:Hello.py
printf("Hello, World!");
return 0;
```
````
▼変換したHTML。
```html
<div data-v-f58a9f50="" class="remark-code-title">hello.c</div>

<div data-v-f58a9f50="" class="nuxt-content-highlight">
  <pre data-v-f58a9f50="" class="line-numbers language-c"><code data-v-f58a9f50=""><span data-v-f58a9f50="" class="token function">printf</span><span data-v-f58a9f50="" class="token punctuation">(</span><span data-v-f58a9f50="" class="token string">"Hello, World!"</span><span data-v-f58a9f50="" class="token punctuation">)</span><span data-v-f58a9f50="" class="token punctuation">;</span>
<span data-v-f58a9f50="" class="token keyword">return</span> <span data-v-f58a9f50="" class="token number">0</span><span data-v-f58a9f50="" class="token punctuation">;</span>
</code></pre>
</div>
```
▼コードブロックのCSSの例。公開すると位置がずれているけどCSSわからん。
```css
.remark-code-title {
    background: #d9d7e0;
    border-radius: 0px 0px 4px 4px;
    color: #3a3a3a;
    font-size: 0.75rem;
    letter-spacing: 0.075em;
    line-height: 1;
    padding: 0.25rem 0.5rem;
    position: absolute;
    left: 1rem;
    text-align: right;
}
```

## 折り畳みを追加する

冗長な説明や長いコードブロックを折り畳むと、文章の流れを良くしつつ補足できる。
そんな折り畳み機能を追加するのが[remark-collapse](https://github.com/Rokt33r/remark-collapse)です。

```sh
$ yarn add remark-collapse
```

使い方
```txt
<details><summary>Open tango</summary>

target content

</details>
```
出力結果

<details><summary>Open tango</summary>

target content

</details>


## 脚注を作る

最高！これを探していました！

remark-footnotes[^1]を利用しています。
脚注はマークダウンのコンテンツの下部に作成されます。
文章の途中に脚注の補足を書いても下部に移動する。

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。
そのため、自分で数字を合わせなければならない[^2]。

```md
文章中の脚注[^1]

[^1]: 脚注の補足

星[^★]や日本語[^日本語]など数字以外の文字もいけるが、
対応する脚注は数字が自動で割り振られている。

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
```

ページの下部（パースしたコンテンツの最後）に脚注が出る。

[^1]: remark-footnotes: [https://github.com/remarkjs/remark-footnotes](https://github.com/remarkjs/remark-footnotes)

[^★]: 星マーク
[^日本語]: 日本語も大丈夫です。
[^2]: 自動で数字が割り振られる。ここは`[^2]`と書いている。