correct markdown renderer for news

Author: Boltzmachine

app/page.tsx

@@ -8,6 +8,8 @@ import Image from "next/image";
 
 import { title, subtitle } from "@/components/primitives";
 import { newsList, News } from "@/config/news"
+import { remark } from 'remark';
+import html from 'remark-html';
 
 function ResearchDirection({ title, image }: { title: string; image: string }) {
   return (
@@ -35,52 +37,35 @@ function ResearchDirection({ title, image }: { title: string; image: string }) {
   );
 }
 
-
-function replaceMarkdownLinks(text: string): React.ReactNode[] {
-  const parts: React.ReactNode[] = [];
-  const regex = /\[([^\]]+)\]\(([^)]+)\)/g;
-  let lastIndex = 0;
-  let match;
-
-  while ((match = regex.exec(text)) !== null) {
-    const [fullMatch, title, url] = match;
-    const matchStart = match.index;
-
-    // Add text before the link
-    if (lastIndex < matchStart) {
-      parts.push(text.slice(lastIndex, matchStart));
-    }
-
-    // Add JSX Link component
-    parts.push(
-      <Link key={parts.length} href={url}>
-        {title}
-      </Link>
+function ExpandNews(news: News, index: number) {
+  // Custom renderer for <a> tags
+  function renderHtmlWithCustomLinks(htmlString: string) {
+    return (
+      <span
+        dangerouslySetInnerHTML={{
+          __html: htmlString.replace(
+            /<a /g,
+            '<a style="color:#0070f3;text-decoration;" '
+          ),
+        }}
+      />
     );
-
-    lastIndex = matchStart + fullMatch.length;
-  }
-
-  // Add remaining text after the last match
-  if (lastIndex < text.length) {
-    parts.push(text.slice(lastIndex));
   }
 
-  return parts;
-}
-
+  const htmlContent = remark().use(html).processSync(news.content).toString();
 
-function ExpandNews(news: News, index: number) {
-  return (<li key={index}>
-    <div style={{ display: 'flex', alignItems: 'flex-start' }}>
-      <span style={{ width: '100px', flexShrink: 0 }}>
-        <em>{news.date}</em>
-      </span>
-      <span style={{ marginLeft: '1em' }}>
-        {replaceMarkdownLinks(news.content)}
-      </span>
-    </div>
-  </li>)
+  return (
+    <li key={index}>
+      <div style={{ display: 'flex', alignItems: 'flex-start' }}>
+        <span style={{ width: '100px', flexShrink: 0 }}>
+          <em>{news.date}</em>
+        </span>
+        <span style={{ marginLeft: '1em' }}>
+          {renderHtmlWithCustomLinks(htmlContent)}
+        </span>
+      </div>
+    </li>
+  );
 }
 
 export default function Home() {

config/news.ts

@@ -11,7 +11,7 @@ export const newsList: News[] = [
   },
   {
     date: "Aug, 2025",
-    content: "Our paper *RephQA* received the ** Blue Sky Best Paper Award ** at ACM KDD 2025."
+    content: "Our paper *RephQA* received the *Blue Sky Best Paper Award* at ACM KDD 2025."
   },
   {
     date: "Jul, 2025",

package-lock.json

@@ -46,7 +46,9 @@
   "rehype-pretty-code": "^0.14.0",
   "rehype-stringify": "^10.0.1",
   "rehype-unwrap-images": "^1.0.0",
+  "remark": "^15.0.1",
   "remark-gfm": "^4.0.0",
+  "remark-html": "^16.0.1",
   "remark-math": "^6.0.0",
   "remark-mdx-images": "^3.0.0",
   "sharp": "^0.33.5",