add highlight.js

burnworks · Mar 10, 2024 · 462ddbb · 462ddbb
1 parent 8c53a0b
commit 462ddbb
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/src/components/Code.astro b/src/components/Code.astro
@@ -11,13 +11,13 @@ const { html , css } = Astro.props;
     <details>
         <summary class="py-4 font-bold text-lg">HTML</summary>
         <div class="prose max-w-none">
-            <pre tabindex="0" class="lang-html prettyprint linenums"><code set:text={html} /></pre>
+            <pre tabindex="0" class="language-html"><code set:text={html} /></pre>
         </div>
     </details>
     <details>
         <summary class="py-4 font-bold text-lg">CSS</summary>
         <div class="prose max-w-none">
-            <pre tabindex="0" class="lang-css prettyprint linenums"><code set:text={css} /></pre>
+            <pre tabindex="0" class="language-css"><code set:text={css} /></pre>
         </div>
     </details>
 </div>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -18,22 +18,20 @@ const { title , description } = Astro.props;
 		<meta name="description" content={description} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="icon" type="image/x-icon" href="./favicon.ico" />
+		<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css" rel="stylesheet" />
 	</head>
 	<body class="font-body flex flex-col min-h-dvh text-gray-900">
 		<slot />
 	</body>
+	<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+	<script is:inline src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/a11y-dark.min.js"></script>
+	<script is:inline>hljs.highlightAll();</script>  
 </html>
 <style is:global>
 	a {
 		@apply text-gray-800 underline;
 	}
 	pre {
 		@apply font-code;
-
-		&.prettyprinted {
-			.com {
-				@apply text-gray-300;
-			}
-		}
 	}
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -27,5 +27,4 @@ const description = "HTML の details 要素を使用したアコーディオン
 		<Sample05 />
 	</main>
 	<Footer />
-	<script is:inline src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
 </Layout>