のうらリリースノート

 コードブロックの表示を整えた。

修正前のUI

 例えば以下のようなテキストを入力すると

 以下のような表示になる。

 コードブロックの部分は黒背景だが、個人的にはハイライトが見づらいと感じていた。GitHubのコードブロックのように明るい背景にした。
 「npm run dev」の部分も`npm run dev`と書いているが、Astroでビルドするとインラインコードであることが分かりにくい。

CSS更新

 というわけでStrapiのPreviewとAstroのCSS設定を更新する。

- import 'highlight.js/styles/solarized-dark.css';
+ import 'highlight.js/styles/github.css';

 まずテーマをGitHubのテーマに変更する。

 続いてCSS追加。

.article-content pre {
  margin: 12px 0 16px;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: #f3f4f6;
  max-width: 100%;
  overflow-x: auto;
  line-height: 1.55;
  tab-size: 2;
}
.article-content pre code {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 0.95em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
}

 上記はコードブロック「<pre><code>...</code></pre>」用。

.article-content :not(pre) > code {
  display: inline;
  padding: 0.1em 0.4em;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #f3f4f6;
  color: #dc2626;
  font-size: 0.92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  word-break: break-word;
}

 こっちはインラインコード「<p>これは <code>inline code</code> です</p>」用。コードブロックとの重複を防ぐために:not(pre) > codeとしている。

/* Fallback token colors when highlight.js theme styles are overridden */
pre .hljs-comment,
pre .hljs-quote {
  color: #6e7781;
  font-style: italic;
}
pre .hljs-keyword,
pre .hljs-selector-tag,
pre .hljs-title,
pre .hljs-section,
pre .hljs-type {
  color: #8250df;
}
pre .hljs-string,
pre .hljs-attr,
pre .hljs-meta,
pre .hljs-number,
pre .hljs-literal {
  color: #0a3069;
}
pre .hljs-addition {
  color: #1a7f37;
  background-color: #dafbe1;
}
pre .hljs-deletion {
  color: #cf222e;
  background-color: #ffebe9;
}

新UI

 修正後のUIはこちら。

 うん、見やすい。