cecks

src/app/api/posts/route.ts

@@ -7,6 +7,7 @@ import matter from 'gray-matter';
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 import { JSDOM } from 'jsdom';
+import hljs from 'highlight.js';
 
 const postsDirectory = path.join(process.cwd(), 'posts');
 
@@ -26,6 +27,22 @@ function getFileCreationDate(filePath: string): Date {
   return stats.birthtime ?? stats.mtime;
 }
 
+const renderer = new marked.Renderer();
+renderer.code = (code, infostring, escaped) => {
+  const lang = (infostring || '').match(/\S*/)?.[0];
+  const highlighted = lang && hljs.getLanguage(lang)
+    ? hljs.highlight(code, { language: lang }).value
+    : hljs.highlightAuto(code).value;
+  const langClass = lang ? `language-${lang}` : '';
+  return `<pre><code class="hljs ${langClass}">${highlighted}</code></pre>`;
+};
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+  renderer,
+});
+
 async function getPostByPath(filePath: string, relPath: string) {
   const fileContents = fs.readFileSync(filePath, 'utf8');
   const { data, content } = matter(fileContents);
@@ -33,10 +50,6 @@ async function getPostByPath(filePath: string, relPath: string) {
 
   let processedContent = '';
   try {
-    marked.setOptions({
-      gfm: true,
-      breaks: true
-    });
     const rawHtml = marked.parse(content);
     const window = new JSDOM('').window;
     const purify = DOMPurify(window);