Next.js + Markdown なブログで Prism.js を使ってコードハイライティングしたい

Tailwind の prose だけだと、pre 内のコードがハイライト表示されずちょっとさみしい。読みやすくハイライト表示されるよう、Prism.js を導入してみた作業メモです。

rehype-prism-plus を追加

rehype-prism もありますが、 diff 表示などもできる rehype-prism-plus を導入してみます。

yarn add -D rehype-prism-plus

ハイライト表示用のスタイルを追加

• Prism themesからお好みのテーマの css
• rehype-prism-plus が生成する Line Number や diff の css

を組み合わせて・微調整を行って prism.css としてプロジェクト側から読み込みます。今回はこんな内容の css となりました。

import "../styles/prism.css";

表示確認

いろいろな言語やオプションを使って、表示確認を行っていきましょう。

css

.example {
  display: flex;
  align-items: center;
  height: calc(100vh - 2rem);
}

tsx で 行番号表示 + 行のハイライト

import Item from "../../compoments/item";
import React, { useEffect } from "react";

type Props = {
  item: Item;
};

export default function Example({ item }: Props) {
  useEffect(() => {
    console.log("This is Example");
  }, []);

  return (
    <>
      <div className="example-class">
        <Item content={item.content} />
      </div>
    </>
  );
}

json で diff

 {
   "private": true,
   "scripts": {
     "dev": "next",
-    "build": "next build",
+    "build": "next build && next export",
     "start": "next start",
     "typecheck": "tsc"
   },
   "dependencies": {
     "next": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.7.4"
   },
   "devDependencies": {
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
   },
   "browserslist": [
     "defaults"
   ]
 }

php

<?php
/**
 * Example function.
 *
 * @param $name string
 * @return void
 */
function the_example_function ($name = '' ){
  echo 'My name is' + $name + '';
}

良い感じ！ですが、

• ファイル名・言語名の表示
• コピーボタン

も欲しくなりますね。

ファイル名の表示