Typoraのコードブロックに 言語 を表示させる

Markdown書くのに、Typora と Boostnote の間を行ったり来たりしている今日この頃
Typora 便利なんですが Qiita や Boostnote みたいにコードブロックの先頭に言語やファイル名を表示してほしい。

---

標準で入ってる GitHub のテーマ

これを

こうしたい

(GitHubのプレビューにはそんなのついてないよという指摘は横においておく)

ユーザーCSSでカスタマイズ

1. コードブロックの左上に言語を表示させるCSS

base.user.css

.md-fences .CodeMirror.cm-s-inner:not([lang=""]):before {
  content: attr(lang);
  color: #eee;
  background-color: #777;
  display: inline-block;
  padding: 2px 4px;
}

これを typoraの/themes フォルダに <適応させたいテーマ名>.user.cssという名前で保存

• 全部のテーマに適応したい場合は base.user.css
• 特定のテーマだけに適応したい場合は <テーマ名>.user.css

2. Typoraを再起動する

• Typora 公式のテーマギャラリーにあった Gitlab のテーマに適応させるとこんな感じ

いいかんじ
本当は c : は省略して hoge.c だけ表示させたいけどやり方わからないわ、CSSど素人にはこの辺が限界か

ちなみにTyporaでは言語の後にファイル名入れるときは : の後ろにスペース入れないとコードシンタックス効かないみたい
quiitaではスペース入れると逆に効かなくなる、ややこしい。

参考にしたサイト

マークダウンエディタTyporaにCSSを追加してテーマをカスタマイズする方法
Monospace - Typora Temes