Visual Studio Code: Markdown プレビュー側でマウスカーソルを重ねた行の先頭に表示されるインジケータが見えない場合の対処


> Issue では、とりあえずカスタム CSS で対処できるということで close です。サマリとして対処方法を Issue にも追記しておきました。
[The indicator on the markdown preview is not visible when the dark theme and the background is white #19962](https://github.com/Microsoft/vscode/issues/19962#issuecomment-278890197)


タイトルが長い。。。
VS Code 1.9 では Markdown エディタとプレビューのスクロールがシンクする機能が追加され、とても便利になりました。

プレビュー側では、マウスカーソルを適当な部分に重ねると、行の先頭に灰色の縦ラインが表示され、それがインジケータとしてエディタ側のカーソル位置と連動し、プレビュー側でダブルクリックすることでエディタ側の該当箇所にカーソルが移動したりします。

![2017-02-05-13-16-35.png](https://qiita-image-store.s3.amazonaws.com/0/65800/fe10f823-3e68-9e45-db6c-24f54cdf654b.png "2017-02-05-13-16-35.png")

とても便利です。

でも、`settings.json` の `markdown.styles` を利用し、独自のプレビュースタイルを実現するべくCSS を設定している場合、`background-color` を `white` などだとインジケータが見えなくなってしまいます。


こんな感じで、github.com なんかをまねて背景を白に文字を黒にしている場合です:

```css
/* 背景を白に */
body {
	background-color: white;
}

/* 文字を黒っぽく */
.vscode-dark {
	color: rgb(30, 30, 30);
}
```

![2017-02-05-13-21-01.png](https://qiita-image-store.s3.amazonaws.com/0/65800/bd77f6b0-df96-9156-65e9-e1ea697384ac.png "2017-02-05-13-21-01.png")

見えない。表示されているはずだけど見えない。

## インジケータに利用される CSS

インジケータの色は CSS で実現されているので、これを変更してしまえばいいんじゃないかなっと。
プレビュー側のインジケータの配色に利用される CSS の class は、標準テーマ別に全部で 3 つ用意されていました。

標準のテーマ:

* .vscode-light: Light, Light+ など
* .vscode-dark: Dark, Dark+, Kimbie Dark など
* .vscode-high-contrast: High Contrast

標準テーマ用の CSS:

<https://github.com/Microsoft/vscode/blob/master/extensions/markdown/media/markdown.css>


```css

/*  Light, Light+ など */
.vscode-light.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 0, 0.15);
}

.vscode-light.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(0, 0, 0, 0.40);
}

/* Dark, Dark+, Kimbie Dark など */
.vscode-dark.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 255, 255, 0.4);
}

.vscode-dark.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 255, 255, 0.60);
}

/* High Contrast */
.vscode-high-contrast.showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(255, 160, 0, 0.7);
}

.vscode-high-contrast.showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 160, 0, 1);
}
```

配色については、

* .code-active-line:before は、 Markdown Editor 側でカーソルが置かれている位置を示す色
* .code-line:hover:before は、マウスカーソルが重なった時の利用されるインジケータの色

となっていました。

個時的には、標準テーマの Dark+ を使っているのですが、なるほどなるほどこれだと `background-color` を `white` にしちゃうと見えなくなってしまいますね。


### テーマを無視して色を設定する

あとは、標準テーマを使っているなら、上記の CSS を `markdown.styles` で指定する CSS ファイルにコピーして、好きな色に変更しても良いかと思いますし、下記のように全部のテーマに適用するようなやり方でも良いかと思います。


```css
[class*="vscode-"].showEditorSelection .code-active-line:before {
	border-left: 3px solid rgba(0, 0, 255, 1);
}

[class*="vscode-"].showEditorSelection .code-line:hover:before {
	border-left: 3px solid rgba(255, 0, 0, 1);
}
```

上記の配色は、分かり易くするために Markdown Editor 側でカーソルが置かれている位置を <font color=blue>青</font>で、プレビュー側でマウスカーソルが重なった時に表示されるインジケータの色を <font color=red>赤</font> にしてみました。

![2017-02-05-14.53.41.png](https://qiita-image-store.s3.amazonaws.com/0/65800/3d6c6f95-5e77-f9a9-1af0-ebb41a82428f.png "2017-02-05-14.53.41.png")

表示されるようになりました。
やったね