Skip to content
| Marketplace
Sign in
Visual Studio Code>Other>Markdown MojiColorNew to Visual Studio Code? Get it now.
Markdown MojiColor

Markdown MojiColor

yusu79

|
1,411 installs
| (0) | Free
| Sponsor
Markdownの文字色を変更可能にするVScode拡張機能です。
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

vscode-markdown-mojicolor

GitHub Visual Studio Marketplace Version (including pre-releases) Visual Studio Marketplace Installs

Markdownの文字色を変更可能にするVScode拡張機能です。

以下のように、%文字%{色}とすると、文字が指定した色でレンダリングされます。

目次

  • インストール
  • 使い方
  • 解説
  • 参照サイト
  • 使用しているmarkdown-itプラグイン

インストール

VScodeのマーケットプレイスで「Markdown MojiColor」と入力してください。

使い方

入力 レンダリング 説明
%トマト%{tomato} <span style="color: tomato;">トマト</span> 色を直接指定できます。
%イエロー%{#ffdc00} <span style="color: #ffdc00;">イエロー</span> 16進数で色を指定できます。
%イエロー%{イエロー} <span style="color: #ffdc00;">イエロー</span> 日本語で指定すると、対応した16進数に変換します。
%桃%{桃色} <span style="color: #f09199;">桃</span> 和色も指定できます。
%桃%{ももいろ} <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を参照してください。

参照サイト

  • 日本の伝統色 和色大辞典 - Traditional Colors of Japan
  • 世界の伝統色 洋色大辞典 - Traditional Colors of World
  • 地下鉄のシンボルカラー メトロカラー - Metro Colors
  • 国鉄制定の塗装色 レールカラー(国鉄色) - Rail Colors

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

使用しているmarkdown-itプラグイン

  • yusu79/markdown-it-mojicolor
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft