7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Markdownテキストに文字色をつけたい (VSCodeで)

Last updated at Posted at 2018-06-29

そんな機能はないようなので、HTMLタグとCSSを使うことにする。
Snippet登録すれば入力も楽!

Snippetへの登録

  • Ctrl(MacならCommand)+Shift+P でコマンド入力欄が表示されるので、「Snippet」と入力する。
  • 「ユーザ スニペットの構成」を選ぶ。
  • 「markdown」と入力して表示された項目を選べば、設定用のJSONが開く。
  • コメントで説明文が色々書いてあるので、その下に↓みたいなのを記述する。
    • 重要なのは、prefixbody
"Input with color red": {		// スニペットの名前
    "prefix": "red",			// プレフィックスの設定。これを入力すると、↓の"body" の文字列に変換できる。
    "body": [					// 変換後の値。1行が配列の1要素になる(と思う)。
        "<span style='color: #F00;'>$1</span>$2"
        // ↑変換後の文字列。変換後にTabキー押下で $1 -> $2 -> ... の順にジャンプできる (はず)。
    ],
    "description": "Input with color red"	// スニペットの説明。
}
  • 保存する。
  • Markdownファイルを開いて、prefixに設定した文字を入力して、Tabキーで変換。
  • 変換後、<span ~></span> の間に文字列を入力すると、そこの文字が赤くなる。

TabでSnippetが変換できない!

Tabで変換するには以下の設定がいるようだった。

  • 設定を開く。
  • ユーザ設定のところに↓の「その1」「その2」のどちらかを追加する。
"editor.tabCompletion": true,	// その1
"[markdown]": {
    "editor.quickSuggestions": true	// その2
}
  • 保存する。
  • Markdownファイルを開いて、prefixに設定した文字を入力して、Tabキーで変換。
  • 変換後、<span ~></span> の間に文字列を入力すると、そこの文字が赤くなる。

これで

テキストに文字色をつけられた!

参考

7
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?