Roam Researchのコードブロック、Dark系用のCSS

こんにちは、Choimirai Schoolのサンミンです。

2021年11月にあったアップデートによって、Roam Research（以下、Roam）のコードブロックは、CodeMirrorを採用しています。

CodeMirror

この変更によってコードブロックとしての機能性は向上したものの、Dark系のテーマを利用されている方の中では、"コードブロックのコードが可読不可となった" という声も聞きます。

▲アップデート後のコードブロック

CodeMirrorのGitHubにはDark系のCSSが公開されていますのでこちらを参考にしますとRoamのコードブロックを改善できます。

theme-one-dark/one-dark.ts at main 揃 codemirror/theme-one-dark

一つのコード例をシェアしますので、[[roam/css]] に追加してどう変わるのか試してみてください。

/* CODEBLOCK */


/* OneDark CodeMirror theme from https://github.com/codemirror/theme-one-dark/blob/main/src/one-dark.ts */

@media (prefers-color-scheme: dark) {
  .cm-activeLine, 
  .cm-focused .cm-activeLine, 
  .cm-activeLineGutter, 
  .cm-focused .cm-activeLineGutter, 
  .ͼ2 .cm-activeLine, 
  .ͼ3 .cm-activeLine, 
  .ͼ2 .cm-activeLineGutter, 
  .ͼ3 .cm-activeLineGutter {
        background-color: #2c313a !important 
   }
  .rm-code-block {
      background-color: #21252b;
      color: #abb2bf;
      border-radius: 5px;
  }
  .ͼ2 .cm-content, .ͼ3 .cm-content {
      caret-color: #528bff;
  }
  .ͼ2 .cm-selectionBackground, 
  .ͼ3 .cm-selectionBackground, 
  .ͼ2.cm-focused .cm-selectionBackground, 
  .ͼ3.cm-focused .cm-selectionBackground, 
  .cm-content::selection {
        background-color: #3E4451;
  }
  .ͼ1 .cm-cursor, .ͼ3 .cm-cursor {
      border-left-color: #528bff;
  }
  .ͼ2 .cm-specialChar, .ͼ3 .cm-specialChar {
      color: #56b6c2;
  }
  .ͼ1 .cm-placeholder {
      color: #7d8799;
  }
  .ͼ1 .cm-foldPlaceholder {
      background-color: transparent;
      border-color: #7d8799;
      color: #7d8799;
  }
  .ͼ1 .cm-gutters, .ͼ2 .cm-gutters, .ͼ3 .cm-gutters {
      background-color: #21252b;
      color: #abb2bf;
      border-right: 1px solid #abb2bf 
  }
  .ͼ1 .cm-matchingBracket {
      background-color: #bad0f847;
      outline: 1px solid #515a6b;
  }
  .ͼ1 .cm-nonmatchingBracket {
      background-color: red;
  }
  .ͼa {
     /* keyword */
      color: #c678dd;
  }
  .ͼb {
     /* operator */
      color: #56b6c2;
  }
  .ͼc {
     /* color */
      color: #d19a66;
  }
  .ͼd {
     /* string */
      color: #98c379;
  }
  .ͼe {
     /* regexp */
      color: #56b6c2;
  }
  .ͼf {
     /* variable */
      color: #61afef;
  }
  .ͼg {
     /* ??? */
      color: #56b6c2;
  }
  .ͼh {
     /* property name */
      color: #e06c75;
  }
  .ͼi {
     /* typename, classname, etc. */
      color: #e5c07b;
  }
  .ͼj {
     /* ??? */
      color: #d19a66;
  }
  .ͼk {
     /* name */
      color: #e06c75;
  }
  .ͼl {
     /* comment */
      color: #7d8799;
  }
  .ͼm {
     /* ??? */
      color: #98c379;
  }
  .ͼn {
     /* ??? */
      color: #d19a66;
  }
}

筆者のRoamで、上記コードを [[roam/css]] へ追加した後の様子です。

Lightモードの場合は下記のように表示されます。

シェアしたCSSコードは好みに合わせ、色々と変更してみるのもいいと思います。