zenn-content-css-dark とは

zenn-content-cssのダークテーマ用のパッケージです。

https://www.npmjs.com/package/zenn-content-css-dark

zenn-content-cssとは

zenn-markdown-htmlというパッケージで markdown から変換された HTML に使う CSS のパッケージです。

基本的にはzenn.devの記事のレイアウトを整えるのに使用されている CSS のようです。

zenn-content-cssとzenn-markdown-htmlの詳細 ↓
https://github.com/zenn-dev/zenn-editor

パッケージ公開の経緯

zenn-content-cssは zenn.dev で使用されていることもあり、ダークテーマには対応していません。

https://github.com/zenn-dev/zenn-community/issues/267#issuecomment-1668958615

したがって、以下のようにテーブルなどのカラーをダークカラーの背景で使用すると違和感がありました。

ダークカラーの背景で zenn-content-css を使用した際の表示例

zenn-content-cssの違和感のある CSS クラスのみ上書きすることもできそうでしたが、どうせならパッケージとして公開することにしました。

実装内容

基本的にindex.scssに定義されているカラーパレットを変更しています。

/* カラーパレット */
$white: rgb(255 255 255);
$zinc-400: rgb(161 161 170);
$zinc-500: rgb(113 113 122);
$zinc-600: rgb(82 82 91);
$zinc-700: rgb(63 63 70);
$zinc-800: rgb(39 39 42);
$zinc-900: rgb(24 24 27);
$blue-400: rgb(96 165 250);
$red-500: rgb(239 68 68);
$red-800: rgb(153 27 27);
$yellow-500: rgb(234 179 8);
$yellow-700: rgb(161 98 7);

/* 目的別カラー変数 */
$text-color: $white;
$text-color-darker: $zinc-400;
$border-color: $zinc-600;
$link-text-color: $blue-400;
...

カラーについては Tailwind で使用されているカラーを使用しています。

使用方法

import "zenn-content-css-dark";

スタイルを適用したい要素に class="znc-dark" を指定します。

<div class="znc-dark">
  <!-- html parsed from markdown comes here. -->
</div>

デモ

以下はzenn-content-css-darkのデモになります。

(このブログはzenn-content-css-darkを使用して記事を書いています。)

中見出し

小見出し

これは普通のテキストです。

太字

イタリック

取り消し線

引用文
このように記述できます。

• リストアイテム 1
• リストアイテム 2
  • サブアイテム 1
  • サブアイテム 2
  • サブアイテム 3

1. 番号付きリスト 1
2. 番号付きリスト 2
   1. サブリスト 1
   2. サブリスト 2

これがinline codeです。

// コードブロック
console.log("Hello!");

- console.log("hello");
+ console.log("good morning");

リンク

キャプション

埋め込み

Zenn

https://zenn.dev/zenn/articles/markdown-guide#コンテンツの埋め込み

X

https://twitter.com/jack/status/20

https://x.com/jack/status/20

YouTube

https://www.youtube.com/watch?v=WRVsOCh907o

GitHub

https://github.com/octocat/Hello-World/blob/master/README

https://github.com/octocat/Spoon-Knife/blob/main/README.md#L1-L3

コールアウト

Warning

Alert

アコーディオン

フッターノート^[1]