remark-highlight.js でブログのコードにシンタックスハイライトを反映させたい

Question

前提・実現したいこと

Next.jsでブログを作っています．

remark で Markdown をレンダリングする際に remark-highlight.js でコードにシンタックスハイライトを反映させたいです．

発生している問題・エラーメッセージ

npm install remark-highlight.js を行い，以下のようにコードを書きました．

該当のソースコード

// lib/posts.ts

import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'
import highlight from 'remark-highlight.js'

export async function getPostData(id: string) {
  const fullPath = path.join(postsDirectory, `${id}.md`)
  const fileContents = fs.readFileSync(fullPath, 'utf8')

  // Use gray-matter to parse the post metadata section
  const matterResult = matter(fileContents)

  // Use remark to convert markdown into HTML string
  const processedContent = await remark()
    .use(highlight)
    .use(html)
    .process(matterResult.content)
  const contentHtml = processedContent.toString()

  // Combine the data with the id
  return {
    id,
    contentHtml,
    ...(matterResult.data as { date: string; title: string; coverImage: string })
  }
}

~~~javascript
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
~~~

もちろん Markdown のプレビューではシンタックスは反映されますが，ブログには反映されませんでした．

試したこと

import highlight from 'remark-highlight.js'

を記述した際に，

「モジュール 'remark-highlight.js' の宣言ファイルが見つかりませんでした。」

という警告が出たので global.d.ts に

declare module 'remark-highlight.js';

を追記しました．追記したところ，警告は無くなりましたが結果は変わりませんでした．

補足情報（FW/ツールのバージョンなど）

バージョンは以下のようになっています．

             :
    "gray-matter": "^4.0.2",
    "next": "^9.5.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "remark": "^12.0.1",
    "remark-highlight.js": "^6.0.0",
    "remark-html": "^12.0.0"
             :

どなたかご教授いただけますと幸いです．

Answer 1

もしかすると、そのパッケージは<code>タグなどにクラス名を付与してくれるだけで、
実際に色をつけるには別途テーマを読み込む必要があるのではないでしょうか?

例えば、これが良い方法なのか分かりませんが、

npm install highlight.js

を実行後、_app.tsx内に

import 'highlight.js/styles/tomorrow-night.css';

のように書いて試してみてください。

Comments

[To-bu]

回答ありがとうございます。
nskhei様が仰ったようにしたところうまくいきました！

パッケージのreadmeをもっとしっかりと読むべきでした。
ありがとうございました。