highlight.js を使ってコードをおしゃれに表示する（Next.js）

Next.js

microCMS

2026/01/24

2026/01/31

PRを含みます

highlight.jsをインストール

まずhighlight.jsをインストールする

npm install highlight.js

articleコンポーネントの修正

記事を表示するためのarticleコンポーネントを修正する。自分の場合は以下のようにした

"use client";

import { useEffect } from "react";
// --- highlight.js のインポート ---
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark.css"; // 好みのテーマを選べる
// ------------------------------
import Link from "next/link";
import Image from "next/image";
import Script from "next/script";
// ...（他のインポートはそのまま）

export default function Article({ data, relatedContents }: Props) {
  
  useEffect(() => {
    // 1. コードハイライトの適用
    hljs.highlightAll();

    // 2. コピーボタンの作成（preタグの中にボタンを配置）
    const blocks = document.querySelectorAll("pre");
    blocks.forEach((block) => {
      // すでにボタンがある場合は作らない
      if (block.querySelector(".copy-button")) return;

      const button = document.createElement("button");
      button.innerText = "Copy";
      button.className = styles.copyButton; // CSSでデザイン

      button.addEventListener("click", async () => {
        const text = block.querySelector("code")?.innerText || "";
        await navigator.clipboard.writeText(text);
        button.innerText = "Copied!";
        setTimeout(() => (button.innerText = "Copy"), 2000);
      });

      block.style.position = "relative";
      block.appendChild(button);
    });

    // 既存の X(Twitter) 処理
    // @ts-ignore
    if (window.twttr && window.twttr.widgets) {
      // @ts-ignore
      window.twttr.widgets.load();
    }
  }, [data]);

  // ...（中間の処理はそのまま）

  return (
    <>
      <Script src="https://platform.twitter.com/widgets.js" strategy="lazyOnload" />
      {/* 既存のコンテンツ表示部分 */}
    </>
  );
}

CSS (index.module.css) の追加

コードブロックの見た目と、コピーボタンの位置を調整した

/* コードブロック全体の枠 */
.content pre {
  background-color: #1a1b26; /* テーマに合わせた背景色 */
  padding: 1.5rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5rem 0;
  position: relative;
}

/* コピーボタンのスタイル */
.copyButton {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.copyButton:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* コード内のフォント */
.content code {
  font-family: 'Fira Code', 'Cascadia Code', Consolas, monospace;
  font-size: 0.9rem;
  line-height: 1.5;
}