TOO LAGGY

Author: The-Infinitys

package-lock.json

@@ -22,6 +22,7 @@
     "rehype-format": "^5.0.1",
     "rehype-highlight": "^7.0.2",
     "rehype-parse": "^9.0.1",
+    "rehype-pretty-code": "^0.14.1",
     "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",

package.json

@@ -38,7 +38,7 @@ React の JSX と組み合わせることで、**よりモダンで保守性の
 
 #### TypeScriptの例
 
-```tsx
+```tsx title="example.tsx" showLineNumbers
 "use client";
 
 import { useState, useEffect } from "react";

public/article-2025/04/renewed-with-nextjs/article.md

@@ -77,7 +77,7 @@ html {
   margin-bottom: 16px;
 }
 
-.article-content {
+.article-container>.article-detail>.article-content {
   display: flex;
   align-items: stretch;
   flex-direction: column;
@@ -86,20 +86,52 @@ html {
   padding: 2px;
 }
 
-.article-content pre {
+.article-container>.article-detail>.article-content pre {
   padding: 0;
   border: 2px solid var(--primary);
-  border-radius: 16px;
+  border-radius: 0 0 16px 16px;
   width: 100%;
   overflow: scroll;
   font-family: monospace;
+}
 
+.article-container>.article-detail>.article-content figcaption[data-rehype-pretty-code-title] {
+  background-color: var(--background);
+  color: var(--foreground);
+  border-radius: 16px 16px 0 0;
+  border: 2px solid var(--primary);
+  padding:4px;
+}
+.article-container>.article-detail>.article-content code[data-line-numbers] {
+  counter-reset: line;
+}
+ 
+.article-container>.article-detail>.article-content code[data-line-numbers] > [data-line]::before {
+  display: inline-block;
+  width: 12px;
+  margin-right: 1rem;
+  color: gray;
+  text-align: right;
+  content: counter(line);
+  counter-increment: line;
+}
+ 
+.article-container>.article-detail>.article-content code[data-line-numbers-max-digits="2"] > [data-line]::before {
+  width: 1.25rem;
+}
+ 
+.article-container>.article-detail>.article-content code[data-line-numbers-max-digits="3"] > [data-line]::before {
+  width: 1.75rem;
+}
+ 
+.article-container>.article-detail>.article-content code[data-line-numbers-max-digits="4"] > [data-line]::before {
+  width: 2.25rem;
 }
 
-.article-content h1,
-.article-content h2,
-.article-content h3,
-.article-content h4 {
+.article-container>.article-detail>.article-content h1,
+.article-container>.article-detail>.article-content h2,
+.article-container>.article-detail>.article-content h3,
+.article-container>.article-detail>.article-content h4 {
   line-height: 2;
   padding-left: 10px;
   margin: 10px 0 20px -5px;
@@ -108,31 +140,31 @@ html {
   animation: article-h-borders 5s linear infinite;
 }
 
-.article-content h1[id],
-.article-content h2[id],
-.article-content h3[id],
-.article-content h4[id],
-.article-content h5[id],
-.article-content h6[id] {
+.article-container>.article-detail>.article-content h1[id],
+.article-container>.article-detail>.article-content h2[id],
+.article-container>.article-detail>.article-content h3[id],
+.article-container>.article-detail>.article-content h4[id],
+.article-container>.article-detail>.article-content h5[id],
+.article-container>.article-detail>.article-content h6[id] {
   scroll-margin-top: 64px;
   /* 固定ヘッダーの高さに応じて調整 */
 }
 
-.article-content h5,
-.article-content h6,
+.article-container>.article-detail>.article-content h5,
+.article-container>.article-detail>.article-content h6,
 .article-content p {
   color: var(--foreground);
   font-weight: 500;
 }
 
-.article-content h1::before,
-.article-content h2::before,
-.article-content h3::before,
-.article-content h4::before,
-.article-content h1::after,
-.article-content h2::after,
-.article-content h3::after,
-.article-content h4::after {
+.article-container>.article-detail>.article-content h1::before,
+.article-container>.article-detail>.article-content h2::before,
+.article-container>.article-detail>.article-content h3::before,
+.article-container>.article-detail>.article-content h4::before,
+.article-container>.article-detail>.article-content h1::after,
+.article-container>.article-detail>.article-content h2::after,
+.article-container>.article-detail>.article-content h3::after,
+.article-container>.article-detail>.article-content h4::after {
   background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00) 0 / 200%;
   content: "";
   display: block;

src/app/[article_year]/[month]/[aid]/page.css

@@ -70,7 +70,7 @@ export default async function ArticlePage({
           />
         )}
         <div
-          className="article-content "
+          className="article-content"
           dangerouslySetInnerHTML={{
             __html: article.content.replace(
               /<h([1-6])>(.*?)<\/h[1-6]>/g,

src/app/[article_year]/[month]/[aid]/page.tsx

@@ -1,7 +1,7 @@
 import fs from "fs";
 import path from "path";
 import matter from "gray-matter";
-import rehypeHighlight from "rehype-highlight";
+import rehypePrettyCode from "rehype-pretty-code";
 import rehypeFormat from "rehype-format";
 import remarkParse from "remark-parse";
 import remarkRehype from "remark-rehype";
@@ -90,7 +90,7 @@ export async function toHTML(
       const processedContent = await unified()
         .use(remarkParse)
         .use(remarkRehype)
-        .use(rehypeHighlight)
+        .use(rehypePrettyCode)
         .use(rehypeFormat)
         .use(rehypeStringify)
         .process(content);