fix: prism styles

.eleventy.js

@@ -1,21 +1,22 @@
-import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
-import tablerIcons from '@cdransf/eleventy-plugin-tabler-icons'
+import { createRequire } from 'module'
+import dotenvFlow from 'dotenv-flow'
+import filters from './config/filters/index.js'
+import htmlmin from 'html-minifier-terser'
 import markdownIt from 'markdown-it'
 import markdownItAnchor from 'markdown-it-anchor'
 import markdownItFootnote from 'markdown-it-footnote'
-import htmlmin from 'html-minifier-terser'
-import filters from './config/filters/index.js'
+import markdownItPrism from 'markdown-it-prism'
+import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
+import tablerIcons from '@cdransf/eleventy-plugin-tabler-icons'
 import { copyErrorPages, minifyJsComponents } from './config/events/index.js'
 import { processContent, albumReleasesCalendar } from './config/collections/index.js'
 import { cssConfig } from './config/plugins/css-config.js'
 import { DateTime } from 'luxon'
 
 // load .env
-import dotenvFlow from 'dotenv-flow'
 dotenvFlow.config()
 
 // get app version
-import { createRequire } from 'module'
 const require = createRequire(import.meta.url)
 const appVersion = require('./package.json').version
 
@@ -75,6 +76,7 @@ export default async function (eleventyConfig) {
     }),
   })
   md.use(markdownItFootnote)
+  md.use(markdownItPrism)
   eleventyConfig.setLibrary('md', md)
 
   // filters

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "25.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "25.0.0",
+      "version": "1.0.1",
       "license": "MIT",
       "dependencies": {
         "@cdransf/api-text": "^1.5.0",
@@ -32,6 +32,7 @@
         "markdown-it": "^14.1.0",
         "markdown-it-anchor": "^9.2.0",
         "markdown-it-footnote": "^4.0.0",
+        "markdown-it-prism": "^2.3.0",
         "postcss": "^8.4.47",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.1.0",
@@ -2863,6 +2864,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/markdown-it-prism": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/markdown-it-prism/-/markdown-it-prism-2.3.0.tgz",
+      "integrity": "sha512-ePtHY80gZyeje4bn3R3SL0jpd1C9HFaYffJW2Ma0YD+tspqa2v9TuVwUyFwboFu4jnFNcO8oPQROgbcYJbmBvw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prismjs": "1.29.0"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "25.0.0",
+  "version": "1.0.1",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "scripts": {
@@ -45,6 +45,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-anchor": "^9.2.0",
     "markdown-it-footnote": "^4.0.0",
+    "markdown-it-prism": "^2.3.0",
     "postcss": "^8.4.47",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",

src/assets/styles/plugins/prism.css

@@ -32,6 +32,10 @@ pre,
   border: 1px solid var(--gray-300);
 }
 
+pre > code {
+  padding: 0;
+}
+
 .namespace {
   opacity: 0.7;
 }
@@ -42,72 +46,66 @@ pre,
 }
 
 .token {
-  &.comment,
-  &.prolog,
-  &.doctype,
-  &.cdata {
-    color: var(--gray-500);
-  }
+  color: var(--blue-200);
+}
 
-  &.punctuation {
-    color: var(--gray-300);
-  }
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: var(--gray-500);
+}
 
-  &.property,
-  &.tag,
-  &.constant,
-  &.symbol,
-  &.deleted {
-    color: var(--blue-200);
-  }
+.token.punctuation {
+  color: var(--gray-300);
+}
 
-  &.boolean,
-  &.number {
-    color: var(--blue-400);
-  }
+.token.boolean,
+.token.number {
+  color: var(--blue-400);
+}
 
-  &.selector,
-  &.attr-name,
-  &.string,
-  &.char,
-  &.builtin,
-  &.inserted {
-    color: #6fff6f;
-  }
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #6fff6f;
+}
 
-  &.operator,
-  &.entity,
-  &.url,
-  &.variable {
-    color: #99ccff;
-  }
+.token.operator,
+.token.entity,
+.token.url,
+.token.variable {
+  color: #99ccff;
+}
 
-  &.atrule,
-  &.attr-value,
-  &.function,
-  &.class-name {
-    color: #ff8f66;
-  }
+.token.atrule,
+.token.attr-value,
+.token.function,
+.token.class-name {
+  color: #ff8f66;
+}
 
-  &.keyword {
-    color: #00ffff;
-  }
+.token.keyword {
+  color: #00ffff;
+}
 
-  &.regex,
-  &.important {
-    color: #ff7373;
-  }
+.token.regex,
+.token.important {
+  color: #ff7373;
+}
 
-  &.italic {
-    font-style: italic;
-  }
+.token.italic {
+  font-style: italic;
+}
 
-  &.entity {
-    cursor: help;
-  }
+.token.entity {
+  cursor: help;
+}
 
-  &.important,
-  &.bold {
-    font-weight: var(--font-weight-bold);
-  }
+.token.important,
+.token.bold {
+  font-weight: var(--font-weight-bold);
 }