Markdown: enable code highlighting

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 = {

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>
 

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;
 }