松竹梅

highlight.jsでシンタックスハイライト導入完了

投稿日

私の場合ブログの返ってくるcontentをhtml-react-parserでComponent化していた。

ConvertHtml.jsに下記を入力

"use client";

import React, { useEffect } from "react";
import hljs from "highlight.js";
import "highlight.js/styles/github-dark.css";

export default function ConvertHtml({ htmlstr }) {
  const contentReact = parse(htmlstr, {
    replace: (node) => {
      if (node.name === "img") {
        const { src, alt, width, height } = node.attribs;
        return (
          <Image
            src={src}
            alt=""
            width={width}
            height={height}
            sizes="(min-width: 768px) 768px, 100vw"
            style={{ width: "100%", height: "auto" }}
          />
        );
　　　　　　　　　　　　///ここを新たに追加///
      } else if (node.name === "code") {
        useEffect(() => {
          hljs.highlightAll();
        }, [htmlstr]);
      }
      /////////////////
    },
  });
  return <>{contentReact}</>;
}

今まで白背景にただの黒文字で味気なかったので技術ブログっぽくなった。

デザインにgithub-darkを選んだのはテキとー

Categories