feat: update article rendering with new remark and rehype configurations, add copy button styles, and remove unused highlight.css

Author: The-Infinitys

package-lock.json

@@ -24,8 +24,10 @@
     "rehype-parse": "^9.0.1",
     "rehype-pretty-code": "^0.14.1",
     "rehype-stringify": "^10.0.1",
+    "remark": "^15.0.1",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.2",
+    "shiki": "^3.3.0",
     "unified": "^11.0.5"
   },
   "devDependencies": {

package.json

@@ -89,6 +89,7 @@ html {
 .article-container>.article-detail>.article-content pre {
   padding: 0;
   border: 2px solid var(--primary);
+  border-top: none;
   border-radius: 0 0 16px 16px;
   width: 100%;
   overflow: scroll;
@@ -100,13 +101,14 @@ html {
   color: var(--foreground);
   border-radius: 16px 16px 0 0;
   border: 2px solid var(--primary);
-  padding:4px;
+  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 {
+
+.article-container>.article-detail>.article-content code[data-line-numbers]>[data-line]::before {
   display: inline-block;
   width: 12px;
   margin-right: 1rem;
@@ -115,19 +117,37 @@ html {
   content: counter(line);
   counter-increment: line;
 }
- 
-.article-container>.article-detail>.article-content code[data-line-numbers-max-digits="2"] > [data-line]::before {
+
+.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 {
+
+.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 {
+
+.article-container>.article-detail>.article-content code[data-line-numbers-max-digits="4"]>[data-line]::before {
   width: 2.25rem;
 }
 
+.copy-button {
+  background-color: #0070f3;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  cursor: pointer;
+  margin-right: 8px;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+}
+
+.copy-button:hover {
+  background-color: #005bb5;
+}
+
 .article-container>.article-detail>.article-content h1,
 .article-container>.article-detail>.article-content h2,
 .article-container>.article-detail>.article-content h3,

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

@@ -90,10 +90,14 @@ export async function toHTML(
       const processedContent = await unified()
         .use(remarkParse)
         .use(remarkRehype)
-        .use(rehypePrettyCode)
+        .use(rehypePrettyCode, {
+          theme: "github-dark-high-contrast",
+          keepBackground: false,
+        })
         .use(rehypeFormat)
         .use(rehypeStringify)
         .process(content);
+
       return {
         ...article,
         content: processedContent.toString(),