diff --git a/astro.config.mjs b/astro.config.mjs index b44ca8d..a53a212 100644 --- a/astro.config.mjs +++ b/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', + }, + ], + ], + }, }) diff --git a/package-lock.json b/package-lock.json index 77be380..ef4f0b1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 199eb54..c0462eb 100644 --- a/package.json +++ b/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" diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro index b8894fb..134e2d8 100644 --- a/src/components/BaseHead.astro +++ b/src/components/BaseHead.astro @@ -1,6 +1,5 @@ --- import '../styles/global.css' -import '../styles/highlight.css' export interface Props { title: string; diff --git a/src/styles/global.css b/src/styles/global.css index 87dfb76..ff51f62 100644 --- a/src/styles/global.css +++ b/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 { diff --git a/src/styles/highlight.css b/src/styles/highlight.css deleted file mode 100644 index 6ba8b0b..0000000 --- a/src/styles/highlight.css +++ /dev/null @@ -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; -}