add syntax highlighting to code blocks

[LukeberryPi]

possibly: https://github.com/rehypejs/rehype-highlight

[LukeberryPi]

maybe better: https://github.com/huozhi/sugar-high

[CaioHVectorA]

Using sugar-high!

my Implementation: Get into page.tsx of /articles/[slug] remove article tag create new component as the article and set use client

"use client"

import { useEffect } from "react";
import { highlight } from "sugar-high";

export function Article({ html }: { html: string }) {
    const handleFormatCode = () => {
        const codes = document.querySelectorAll("pre code");
        codes.forEach((code) => {
        if (code.innerHTML.includes("span")) return;
          console.log(code.innerHTML)
          const html = highlight(code.innerHTML);
          // console.log(html)
          code.innerHTML = html;
        });
      }
      useEffect(handleFormatCode, [])
    return (
        <article dangerouslySetInnerHTML={{ __html: html }} />
    )
}

Ps: Had to add a .replace(/&lt;/g, "<").replace(/&gt;/g, ">") in my code to handle < and > characters unicodes...

[CaioHVectorA]

The replace dont working with less/greater than...

Worked switching code.innerHTML on highlight calling to code.textContent

[LukeberryPi]

hey @CaioHVectorA can you open a PR?

[CaioHVectorA]

surely!