feat: sintax highlight in codes

allbertuu · Jan 17, 2024 · 46ede65 · 46ede65 · vercel · Jan 17, 2024
1 parent 8ef82f5
commit 46ede65
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/src/components/PostBody/index.tsx b/src/components/PostBody/index.tsx
@@ -43,7 +43,7 @@ export const PostBody: React.FC = () => {
   return (
     <div className="py-8 sm:px-10">
       {post && (
-        <Markdown className="prose prose-invert max-w-full prose-headings:border-b prose-headings:border-b-blue-300 prose-a:text-red-500/95 hover:prose-a:text-red-500/80 prose-blockquote:text-[#ffffff91] prose-img:w-[75%]">
+        <Markdown className="prose prose-invert max-w-full prose-headings:border-b prose-headings:border-b-blue-300 prose-a:text-red-500/95 hover:prose-a:text-red-500/80 prose-blockquote:text-[#ffffff91] prose-pre:bg-[#22272e] prose-img:w-[75%]">
           {post.body || DEFAULT_BODY}
         </Markdown>
       )}

diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -14,6 +14,12 @@ export default function Document() {
           href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&family=Titillium+Web:wght@400;600;700&display=swap"
           rel="stylesheet"
         />
+        <link
+          rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark-dimmed.min.css"
+        />
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+        <script>hljs.highlightAll();</script>
       </Head>
       <body className="bg-blue-700">
         <Main />