? ????? Prism.js ??? ??? ? ?? ?? ??? ???? Next.js ???? ???? ??? ?????. ?? ??? ?? The remark-prism ???? ? ?? ??? ?? CSS/JavaScript? ?????.

Next.js ???? ????? ?? ?? ?? ? ??? ?????. ? ???? PRISM.JS ? The remark-prism ????? ???? ?? ?? ??, ? ?? ? ?? ? ?????? ???? ??? ?????. ?? ??? ???? ?????? ??? ???? ?????.

?? ?? :

? ???? Next.js ??? ???? ????? ??? ?? ??? ??? ?????. ???? ???? ?????? .js :

 NPM ?? ?? ??????

?? Prism.js ?? :

markdownToHtml ???? remark-prism ??????? (????? /lib ? ??) :

 "??"?? {??} ?? ??;
"warch-html"?? html ?? ??;
"??-???"?? ?? ??;

???? ?? ??? ?? MarkdownToHtml (Markdown) {
  const result = await ? ()
    .use (html, {sanitize : false})
    .use (wartingprism, {???? : [ "line-numbers"]})
    .Process (Markdown);
  return result.toString ();
}

??? ?? remark-html ??? ???? ? ?? ????. pages/_app.js :

 "Prismjs/Themes/Prism-Tomorrow.css"??;
"prismjs/????/??-???/??? ??-??? (CSS) ??;
"../styles/prism-overrides.css";

??? ???? ?? prism-overrides.css ????.

? ?? ?? :

line-numbers ????? ???? ??? ?? CSS? ??????? ( remark-prism readme? ??). prism-overrides.css ?? ?? ?? ??? ??? ? ????.

 .line-numbers span.line-numbers-rows {
  ?? -? : -1px;
}

?? ?? :

PRISM.JS ?? ????? ????? ?? ??? ?? ???? ?? remark-prism ? ?? ???? ????. ?? ??? CSS ? JavaScript? ?????. ? CSS? prism-overrides.css ? ??????.

 : ?? {
  -????? ? : RGB (0 0 / 0);
  -Highlight width : 0;
}

.line-numbers span.line-numbers-rows> span {
  ?? : ??;
}

.line-numbers span.line-numbers-rows> span :: ?? {
  ???: " ";
  ?? : var (-????? ? ????);
  ?? : var (-????? width);
  ?? : ??;
  ?? : 0;
}

?? ??? data-line ??? ??????<pre class="brush:php;toolbar:false"></pre> ?? (? : [data-line="3,8-10"] ). components/post-body.tsx ?? javaScript? ????? (??, ??? ??) :

 "React"?? {useEffect, useref} import;

// ...

const rootref = useref (null);

useeffect (() => {
  // ... (?? ??<pre class="brush:php;toolbar:false"> ??? ?? ??? ???? ?? ? ????? ??) ...
}, []);

// ... (??? ?? ??? ???? ???? ????? ????? ?? ??) ...

???? data-line ??? ?? ???? ?? ?? ?????<pre class="brush:php;toolbar:false"> ??? ?? ? CSS ??? ?? ??? ???? ???? ??? ?? ?? ?????.</pre>

? ????? ? ?? ?? :

? ??? ???? ?? ?? ????? .hide-numbers ??? ? CSS ??? ???? ?????? ????? ? ??? ?????.

??-?? ?? ?? :

?? ? ??? ????? ??? ??????. components/post-body.tsx ?? ??? ??? ??????<pre class="brush:php;toolbar:false"> &lt;code&gt;navigator.clipboard.writeText&lt;/code&gt; ? ???? &lt;code&gt;createCopyButton&lt;/code&gt; ??? ???? ??. CSS? ???? ??? ????????.</pre>

? ??? ? ???? Prism.js? Next.js ???? ???? ?? ? ?? ??????? ?????? ??? ???? ?????. ?? ? ??? ?? ???? ??? ???????.

? ??? ?? ???? ?????? ?? ????? (? ? ??!)? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!