reuterShawn/shawn-reuter-blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed code block styles

Browse Source
This commit is contained in:
Maxi Ferreira 2022-08-12 11:35:44 -07:00
parent 9cbe6de22f
commit 7d27710b7c
6 changed files with 68 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
astro.config.mjs
View File

@ -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',
},
],
],
},
})

53
package-lock.json generated
View File

@ -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",

3
package.json
View File

@ -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"

1
src/components/BaseHead.astro
View File

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

2
src/styles/global.css
View File

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

219
src/styles/highlight.css
View File

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