【個人開発】Markdownで文字の色を変更する方法

## はじめに
Markdownで文字の色を変更するには､`<span style="color: 色"></span>`で文字を囲む必要があります｡

それでは面倒なので､`%文字%{色}`とすると色が変更ができる「**Markdown MojiColor**」というVScode拡張機能を作りました｡



## Markdown MojiColor
Markdown MojiColorはVScodeの拡張機能です｡
検索窓で「Markdown MojiColor」と打てば見つかると思います｡
![Markdownで文字の色を変更する方法_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/45b65b82-f7fb-0c5e-1227-8369d76dfccf.png)

### 使用例

使用法は単純です｡
色を変更したい箇所を`%%`で囲み､そのあと`{}`で色を指定します｡
色は「色名」､「16進数」､「RGB」､「HSL」等で指定します。
![Markdownで文字の色を変更する方法_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/395294/7c5d172a-5c7f-494d-474a-455bab6bf6ee.png)


### 使い方
| 入力                             | レンダリング                                                            | 説明                                                     | 
| -------------------------------- | ----------------------------------------------------------------------- | -------------------------------------------------------- | 
| `%トマト%{tomato}`               | `<span style="color: tomato;">トマト</span>`                            | 色を直接指定できます｡                                   | 
| `%イエロー%{#ffdc00}`            | `<span style="color: #ffdc00;">イエロー</span>`                         | 16進数で色を指定できます｡                               | 
| `%イエロー%{イエロー}`           | `<span style="color: #ffdc00;">イエロー</span>`                         | 日本語で指定すると､対応した16進数に変換します｡         | 
| `%桃%{桃色}`                     | `<span style="color: #f09199;">桃</span>`                               | [和色](https://l.pg1x.com/X3e4)も指定できます｡          | 
| `%桃%{ももいろ}`                 | `<span style="color: #f09199;">桃</span>`                               | 読み仮名でも指定できます｡                               | 
| `%アクア%{rgb(0,255,255)}`       | `<span style="color: rgb(0,255,255);">アクア</span>`                    | RGB表記で色を指定できます｡                              | 
| `%ビスク%{hsl(33,100%,88%)}`     | `<span style="color: hsl(33,100%,88%);">ビスク</span>`                  | HSL表記で色を指定できます｡                              | 
| `**%ビスク%{hsl(33,100%,88%)}**` | `<strong><span style="color: hsl(33,100%,88%);">ビスク</span></strong>` | 太字にしたいなら､`**%文字%{色}**`のようにしてください｡ | 


### 解説
`%文字%{色}`を`<span style="color: 色">文字</span>`に変換するmarkdown-itプラグインです｡

色は「色名」、「16進数」、「RGB」、「HSL」等で指定します。

色名は日本語にも対応しています。
例えば、`%文字%{桃色}`とすると､桃の色に近い`#f09199`に変換されます。

どの色に対応しているかは、[日本の伝統色 和色大辞典 - Traditional Colors of Japan](https://l.pg1x.com/X3e4)を参照してください。


### 参照サイト
- [日本の伝統色 和色大辞典 - Traditional Colors of Japan](https://l.pg1x.com/X3e4)
- [世界の伝統色 洋色大辞典 - Traditional Colors of World](https://l.pg1x.com/eT5p)
- [地下鉄のシンボルカラー メトロカラー - Metro Colors](https://l.pg1x.com/kCcm)
- [国鉄制定の塗装色 レールカラー(国鉄色) - Rail Colors](https://l.pg1x.com/iyJ7)


:::note
サイト元の「WEB色見本 原色大辞典（ https://www.colordic.org/ )」さんには、OSSでの公開と使用の許可を頂いております。
:::

## markdown-it-mojicolor

### セットアップ
上記の「Markdown MojiColor」拡張機能は､「**markdown-it-mojicolor**」というmarkdown-itプラグインを使用しています｡
自身のmarkdownエディタなどに使う際は､こちらを使用してください｡

```bash:bash
npm install markdown-it-mojicolor
```

markdown-itに読み込ませるには､JavaScriptで以下のように書きます｡
```js:javascript
const 
    md = require('markdown-it')(),
    plugin = require("markdown-it-mojicolor");

md.use(plugin);
```



## Gitリポジトリ
- [yusu79/vscode-markdown-mojicolor: Markdownの文字色を変更可能にするVScode拡張機能](https://l.pg1x.com/NuCC)
- [yusu79/markdown-it-mojicolor: Markdownの文字色を変更可能にするmarkdown-itプラグイン](https://l.pg1x.com/sggo)