diff --git a/.eleventy.js b/.eleventy.js
index 4c24608a..02e1d74a 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,5 +1,6 @@
const pluginRss = require("@11ty/eleventy-plugin-rss")
const pluginNavigation = require("@11ty/eleventy-navigation")
+const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight")
const pluginSvgSprite = require("eleventy-plugin-svg-sprite")
const pluginPageAssets = require("eleventy-plugin-page-assets")
const markdownIt = require("markdown-it")
@@ -20,6 +21,7 @@ const CONTENT_GLOBS = {
module.exports = function (config) {
// Plugins
+ config.addPlugin(syntaxHighlight)
config.addPlugin(pluginRss)
config.addPlugin(pluginNavigation)
config.addPlugin(pluginSvgSprite, {
diff --git a/package-lock.json b/package-lock.json
index 2eb72a7a..cc957ec1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@babel/core": "^7.22.5",
"@babel/plugin-transform-modules-commonjs": "^7.22.5",
"@babel/preset-env": "^7.22.5",
@@ -228,6 +229,19 @@
"url": "https://opencollective.com/11ty"
}
},
+ "node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.0.tgz",
+ "integrity": "sha512-y9BUmP1GofmbJgxM1+ky/UpFCpD8JSOeLeKItUs0WApgnrHk9haHziW7lS86lbArX5SiCVo4zTTw9x53gvRCaA==",
+ "dev": true,
+ "dependencies": {
+ "prismjs": "^1.29.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/11ty"
+ }
+ },
"node_modules/@11ty/eleventy-utils": {
"version": "1.0.2",
"license": "MIT",
@@ -21756,6 +21770,15 @@
"node_modules/prettysize": {
"version": "2.0.0"
},
+ "node_modules/prismjs": {
+ "version": "1.29.0",
+ "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
+ "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+ "dev": true,
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/process-nextick-args": {
"version": "2.0.1",
"license": "MIT"
diff --git a/package.json b/package.json
index fc88d9c2..544fa720 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
},
"devDependencies": {
"@11ty/eleventy": "^2.0.1",
+ "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"@babel/core": "^7.22.5",
"@babel/plugin-transform-modules-commonjs": "^7.22.5",
"@babel/preset-env": "^7.22.5",
diff --git a/src/assets/styles/components/_content.scss b/src/assets/styles/components/_content.scss
index e168eba2..adc7d220 100644
--- a/src/assets/styles/components/_content.scss
+++ b/src/assets/styles/components/_content.scss
@@ -79,34 +79,11 @@
}
}
- pre {
- line-height: 1.75;
+ pre[class*="language-"] {
margin-top: 2rem;
margin-bottom: 1.5rem;
border-radius: $border-radius-8;
- padding-top: 0.75rem;
- padding-right: 0.75rem;
- padding-bottom: 0.75rem;
- padding-left: 0.75rem;
- color: var(--background-default);
- background-color: var(--text-primary);
- overflow-x: auto;
- font-weight: 400;
- font-size: 0.875rem;
-
- code {
- font-weight: inherit;
- background-color: transparent;
- border-width: 0;
- border-radius: 0;
- padding: 0;
- font-weight: inherit;
- color: inherit;
- font-size: inherit;
- font-family: inherit;
- line-height: inherit;
- }
- }
+ }
.footnotes-sep {
margin-top: 2.75rem;
@@ -133,10 +110,6 @@
}
}
- code {
- font-weight: 600;
- }
-
hr {
margin-top: 4rem;
margin-bottom: 4rem;
diff --git a/src/assets/styles/main.scss b/src/assets/styles/main.scss
index 8569d499..1dd5eecd 100755
--- a/src/assets/styles/main.scss
+++ b/src/assets/styles/main.scss
@@ -81,3 +81,4 @@
//--------------------
@import "vendor/raster.grid.custom";
+@import "vendor/prism-atom-dark";
diff --git a/src/assets/styles/vendor/prism-atom-dark.css b/src/assets/styles/vendor/prism-atom-dark.css
new file mode 100644
index 00000000..179bffac
--- /dev/null
+++ b/src/assets/styles/vendor/prism-atom-dark.css
@@ -0,0 +1,143 @@
+/**
+ * atom-dark theme for `prism.js`
+ * Based on Atom's `atom-dark` theme: https://github.com/atom/atom-dark-syntax
+ * @author Joe Gibson (@gibsjose)
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+ color: #c5c8c6;
+ text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+ font-family: Inconsolata, Monaco, Consolas, "Courier New", Courier,
+ monospace;
+ direction: ltr;
+ text-align: left;
+ white-space: pre;
+ word-spacing: normal;
+ word-break: normal;
+ line-height: 1.5;
+
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+ padding: 1em;
+ margin: 0.5em 0;
+ overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+ background: #1d1f21;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+ padding: 0.1em;
+ border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: #7c7c7c;
+}
+
+.token.punctuation {
+ color: #c5c8c6;
+}
+
+.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.keyword,
+.token.tag {
+ color: #96cbfe;
+}
+
+.token.class-name {
+ color: #ffffb6;
+ text-decoration: underline;
+}
+
+.token.boolean,
+.token.constant {
+ color: #99cc99;
+}
+
+.token.symbol,
+.token.deleted {
+ color: #f92672;
+}
+
+.token.number {
+ color: #ff73fd;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #a8ff60;
+}
+
+.token.variable {
+ color: #c6c5fe;
+}
+
+.token.operator {
+ color: #ededed;
+}
+
+.token.entity {
+ color: #ffffb6;
+ cursor: help;
+}
+
+.token.url {
+ color: #96cbfe;
+}
+
+.language-css .token.string,
+.style .token.string {
+ color: #87c38a;
+}
+
+.token.atrule,
+.token.attr-value {
+ color: #f9ee98;
+}
+
+.token.function {
+ color: #dad085;
+}
+
+.token.regex {
+ color: #e9c062;
+}
+
+.token.important {
+ color: #fd971f;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+
+.token.italic {
+ font-style: italic;
+}
diff --git a/src/layouts/base.njk b/src/layouts/base.njk
index 1f2a7281..fbc13ed3 100644
--- a/src/layouts/base.njk
+++ b/src/layouts/base.njk
@@ -44,7 +44,6 @@
-