From 45875b1fef2837416ec5f00bf6ab96f64edbc4f1 Mon Sep 17 00:00:00 2001
From: Akemi Izuko <akemi@noway.moe>
Date: Tue, 26 Dec 2023 03:46:58 -0700
Subject: [PATCH] Markdown: enable code highlighting

---
 astro.config.mjs           |  2 +-
 src/layouts/BlogPost.astro | 43 +++++++++++++++++++++++++++++++++++++-
 src/styles/global.css      |  2 ++
 3 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 706853a..0155cbe 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -5,7 +5,7 @@ import sitemap from '@astrojs/sitemap';
 import remarkGfm from "remark-gfm";
 import remarkRehype from "remark-rehype";
 import rehypePrettyCode from "rehype-pretty-code";
-import json from "./public/github_light.json" assert { type: "json" };
+import json from "./public/themes/github_light.json" assert { type: "json" };
 import tailwind from "@astrojs/tailwind";
 
 const options = {
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 313799c..e67c8d7 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -4,6 +4,7 @@ import BaseHead from '../components/BaseHead.astro';
 import Header from '../components/Header.astro';
 import Footer from '../components/Footer.astro';
 import FormattedDate from '../components/FormattedDate.astro';
+import { Code } from 'astro:components';
 
 type Props = CollectionEntry<'blog'>['data'];
 
@@ -48,6 +49,7 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
             .prose h1 {
                 font-size: 60px;
                 border-bottom: 2px solid #000;
+                margin-bottom: calc(var(--font-size) / 3);
             }
             .prose h2 {
                 font-size: 40px;
@@ -59,10 +61,49 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
             .prose h4, .prose h5, .prose h6 {
                 font-size: 22px;
             }
-            p {
+            .prose p {
                 line-height: 1.5;
                 font-family: var(--font-sans);
+                margin: 16px 0;
             }
+            .prose ul {
+                padding-left: 30px;
+            }
+            .prose li {
+                list-style-type: disc;
+            }
+            .prose img {
+                display: block;
+                margin: 30px auto;
+                border-radius: 22px;
+                filter: drop-shadow(0 4px 6px #444);
+            }
+            .prose pre {
+               background-color: #f6f6f6;
+               border-radius: 6px;
+               padding: 16px;
+               margin: 16px 0;
+               font-family: var(--font-mono);
+               filter: drop-shadow(0 2px 6px #ddd);
+           }
+           .prose pre > code[data-line-numbers] {
+               counter-reset: line;
+           }
+           .prose pre > code[data-line-numbers] > .line::before {
+               counter-increment: line;
+               content: counter(line);
+               display: inline-block;
+               margin-right: 2rem
+               width: 1rem;
+               text-align: left;
+               color: #7ca2dfad;
+           }
+           .prose pre > code > .line::before {
+               content: "";
+               display: inline-block;
+               width: 1rem;
+               text-align: right;
+           }
         </style>
     </head>
 
diff --git a/src/styles/global.css b/src/styles/global.css
index 93aac99..2914ffa 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -8,6 +8,8 @@
 
 :root {
     --font-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: 'Noto Mono', monospace;
+    --font-jp: "Source Han Sans", "源ノ角ゴシック", "Hiragino Sans", "HiraKakuProN-W3", "Hiragino Kaku Gothic ProN W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans", "Noto Sans CJK JP", "メイリオ", Meiryo, "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", "MS PGothic", "ＭＳ ゴシック", "MS Gothic", sans-serif;
     --box-shadow: 0 2px 6px rgba(#000, 25%), 0 8px 24px rgba(#000, 33%), 0 16px 32px rgba(#000, 33%);
     --font-size: 1em;
 }