Fixed code block styles

astro.config.mjs

@@ -6,4 +6,17 @@ import mdx from '@astrojs/mdx'
 export default defineConfig({
   site: 'https://astro-blog-template.netlify.app',
   integrations: [mdx(), svelte()],
+  markdown: {
+    shikiConfig: {
+      theme: 'nord',
+    },
+    rehypePlugins: [
+      [
+        'rehype-external-links',
+        {
+          target: '_blank',
+        },
+      ],
+    ],
+  },
 })

package-lock.json

@@ -13,7 +13,8 @@
       "devDependencies": {
         "@astrojs/mdx": "^0.8.3",
         "@astrojs/svelte": "^1.0.0",
-        "astro": "^1.0.3"
+        "astro": "^1.0.3",
+        "rehype-external-links": "^2.0.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2557,6 +2558,18 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
+    "node_modules/is-absolute-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
+      "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -4775,6 +4788,24 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/rehype-external-links": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-2.0.0.tgz",
+      "integrity": "sha512-Nhq4Wq2TpNdZ1rYec0LThCOoVLkIz5CLhDSo7k4nFhhlwE5vYcRleAM92ozZx6CcWTvzalLCpxq4PQLMucI1Vw==",
+      "dev": true,
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "extend": "^3.0.0",
+        "is-absolute-url": "^4.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/rehype-parse": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-8.0.4.tgz",
@@ -8281,6 +8312,12 @@
       "integrity": "sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==",
       "dev": true
     },
+    "is-absolute-url": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-4.0.1.tgz",
+      "integrity": "sha512-/51/TKE88Lmm7Gc4/8btclNXWS+g50wXhYJq8HWIBAGUBnoAdRu1aXeh364t/O7wXDAcTJDP8PNuNKWUDWie+A==",
+      "dev": true
+    },
     "is-alphabetical": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
@@ -9766,6 +9803,20 @@
         "unified": "^10.0.0"
       }
     },
+    "rehype-external-links": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-external-links/-/rehype-external-links-2.0.0.tgz",
+      "integrity": "sha512-Nhq4Wq2TpNdZ1rYec0LThCOoVLkIz5CLhDSo7k4nFhhlwE5vYcRleAM92ozZx6CcWTvzalLCpxq4PQLMucI1Vw==",
+      "dev": true,
+      "requires": {
+        "@types/hast": "^2.0.0",
+        "extend": "^3.0.0",
+        "is-absolute-url": "^4.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "unified": "^10.0.0",
+        "unist-util-visit": "^4.0.0"
+      }
+    },
     "rehype-parse": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/rehype-parse/-/rehype-parse-8.0.4.tgz",

package.json

@@ -12,7 +12,8 @@
   "devDependencies": {
     "@astrojs/mdx": "^0.8.3",
     "@astrojs/svelte": "^1.0.0",
-    "astro": "^1.0.3"
+    "astro": "^1.0.3",
+    "rehype-external-links": "^2.0.0"
   },
   "dependencies": {
     "reading-time": "^1.5.0"

src/components/BaseHead.astro

@@ -1,6 +1,5 @@
 ---
 import '../styles/global.css'
-import '../styles/highlight.css'
 
 export interface Props {
   title: string;

src/styles/global.css

@@ -130,7 +130,6 @@ code {
   font-family: 'SF Mono', menlo, inconsolata, monospace;
   font-size: calc(1em - 2px);
   color: #555;
-  background-color: #f0f0f0;
   padding: 0.2em 0.4em;
   border-radius: 2px;
   -webkit-font-smoothing: antialiased;
@@ -140,6 +139,7 @@ code {
 pre {
   border-radius: 8px !important;
   margin: 1.2em 0 !important;
+  padding: 1.2em;
 }
 
 pre code {

src/styles/highlight.css

@@ -1,219 +0,0 @@
-code[class*="language-"], pre[class*="language-"] {
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	hyphens: none;
-	color: inherit;
-	text-shadow: none;
-	/* font-family: Roboto Mono, monospace; */
-	font-size: 1em;
-	line-height: 1.5em;
-	tab-size: 4;
-}
-
-code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection,
-code[class*="language-"] ::-moz-selection,
-pre[class*="language-"] ::-moz-selection {
-	text-shadow: none;
-	opacity: 1;
-	color: #eee;
-	background: #363636;
-}
-
-code[class*="language-"]::selection, pre[class*="language-"]::selection,
-code[class*="language-"] ::selection,
-pre[class*="language-"] ::selection {
-	text-shadow: none;
-	opacity: 1;
-	color: #eee;
-	background: #363636;
-}
-
-@media print {
-	code[class*="language-"], pre[class*="language-"] {
-		text-shadow: none !important;
-	}
-}
-
-:not(pre) > code[class*="language-"] {
-	white-space: normal;
-	color: #c3cee3;
-	background: #263238;
-	border-radius: 0.2em;
-	padding: 0.1em;
-}
-
-pre > code[class*="language-"] {
-	background: none;
-}
-
-pre[class*="language-"] {
-	overflow: auto;
-	position: relative;
-	color: #c3cee3;
-	background: #263238;
-	border-radius: 0;
-	margin: 0.5em 0;
-	padding: 1.25em 1em;
-}
-
-pre[class*="language-"].language-css > code, pre[class*="language-"].language-sass > code, pre[class*="language-"].language-scss > code {
-	color: #fd9170;
-}
-
-[class*="language-"] .namespace {
-	opacity: 0.7;
-}
-
-.token.atrule {
-	color: #c792ea;
-}
-
-.token.attr-name {
-	color: #ffcb6b;
-}
-
-.token.attr-value {
-	color: #c3e88d;
-}
-
-.token.attribute {
-	color: #c3e88d;
-}
-
-.token.boolean {
-	color: #c792ea;
-}
-
-.token.builtin {
-	color: #ffcb6b;
-}
-
-.token.cdata {
-	color: #80cbc4;
-}
-
-.token.char {
-	color: #80cbc4;
-}
-
-.token.class {
-	color: #ffcb6b;
-}
-
-.token.class-name {
-	color: #f2ff00;
-}
-
-.token.color {
-	color: #f2ff00;
-}
-
-.token.comment {
-	color: #546e7a;
-}
-
-.token.constant {
-	color: #c792ea;
-}
-
-.token.deleted {
-	color: #f07178;
-}
-
-.token.doctype {
-	color: #546e7a;
-}
-
-.token.entity {
-	color: #f07178;
-}
-
-.token.function {
-	color: #c792ea;
-}
-
-.token.hexcode {
-	color: #f2ff00;
-}
-
-.token.id {
-	color: #c792ea;
-	font-weight: bold;
-}
-
-.token.important {
-	color: #c792ea;
-	font-weight: bold;
-}
-
-.token.inserted {
-	color: #80cbc4;
-}
-
-.token.keyword {
-	color: #c792ea;
-	font-style: italic;
-}
-
-.token.number {
-	color: #fd9170;
-}
-
-.token.operator {
-	color: #89ddff;
-}
-
-.token.prolog {
-	color: #546e7a;
-}
-
-.token.property {
-	color: #80cbc4;
-}
-
-.token.pseudo-class {
-	color: #c3e88d;
-}
-
-.token.pseudo-element {
-	color: #c3e88d;
-}
-
-.token.punctuation {
-	color: #89ddff;
-}
-
-.token.regex {
-	color: #f2ff00;
-}
-
-.token.selector {
-	color: #f07178;
-}
-
-.token.string {
-	color: #c3e88d;
-}
-
-.token.symbol {
-	color: #c792ea;
-}
-
-.token.tag {
-	color: #f07178;
-}
-
-.token.unit {
-	color: #f07178;
-}
-
-.token.url {
-	color: #fd9170;
-}
-
-.token.variable {
-	color: #f07178;
-}