Add support for code syntax highlighting

This commit is contained in:
Neil Brommer 2023-07-07 22:16:57 -07:00
parent ed1a3e3cfa
commit e284972969
9 changed files with 69 additions and 7 deletions

View file

@ -1,4 +1,5 @@
const eleventyNavigationPlugin = require("@11ty/eleventy-navigation");
const eleventySyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const eleventySass = require("eleventy-sass");
const mdDefList = require("markdown-it-deflist");
@ -7,10 +8,13 @@ module.exports = function (eleventyConfig) {
files: "./_site/css/**/*.css",
});
eleventyConfig.addPassthroughCopy({
"node_modules/prismjs/themes/prism.min.css": "css/prism.min.css",
"node_modules/prismjs/themes/prism-tomorrow.min.css": "css/prism-tomorrow.min.css",
"node_modules/feather-icons/dist/feather-sprite.svg": "images/feather-sprite.svg",
"src/js/site.js": "js/site.js"
});
eleventyConfig.addPlugin(eleventyNavigationPlugin);
eleventyConfig.addPlugin(eleventySyntaxHighlight);
eleventyConfig.addPlugin(eleventySass, {
sass: {
loadPaths: ["node_modules"],
@ -41,9 +45,7 @@ module.exports = function (eleventyConfig) {
collection.sort((a, b) => a.data.sectionOrder - b.data.sectionOrder)
);
eleventyConfig.addFilter("filterDrafts", collection => {
if (process.env.BUILD_DRAFTS === true) {
console.log("Skipping filtering drafts");
if (process.env.BUILD_DRAFTS) {
return collection;
}

View file

@ -14,7 +14,7 @@
}
},
"environment" : {
"BUILD_DRAFTS" : "false"
"BUILD_DRAFTS" : "true"
},
"openLogOnRun" : "fail",
"persistent" : true

39
package-lock.json generated
View file

@ -10,11 +10,13 @@
"license": "ISC",
"dependencies": {
"feather-icons": "^4.29.0",
"normalize.css": "^8.0.1"
"normalize.css": "^8.0.1",
"prismjs": "^1.29.0"
},
"devDependencies": {
"@11ty/eleventy": "^2.0.0",
"@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"eleventy-sass": "^2.2.3",
"markdown-it-deflist": "^2.1.0"
}
@ -123,6 +125,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.1",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@ -1865,6 +1880,14 @@
"node": ">= 4"
}
},
"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==",
"engines": {
"node": ">=6"
}
},
"node_modules/promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
@ -2513,6 +2536,15 @@
"dependency-graph": "^0.11.0"
}
},
"@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,
"requires": {
"prismjs": "^1.29.0"
}
},
"@11ty/eleventy-utils": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.1.tgz",
@ -3804,6 +3836,11 @@
"promise-each": "^2.2.0"
}
},
"prismjs": {
"version": "1.29.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="
},
"promise": {
"version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

View file

@ -14,11 +14,13 @@
"devDependencies": {
"@11ty/eleventy": "^2.0.0",
"@11ty/eleventy-navigation": "^0.3.5",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"eleventy-sass": "^2.2.3",
"markdown-it-deflist": "^2.1.0"
},
"dependencies": {
"feather-icons": "^4.29.0",
"normalize.css": "^8.0.1"
"normalize.css": "^8.0.1",
"prismjs": "^1.29.0"
}
}

View file

@ -14,6 +14,8 @@
{% endif %}
</title>
<link rel="stylesheet" href="{{ '/css/prism.min.css' }}" media="(prefers-color-scheme: light)">
<link rel="stylesheet" href="{{ '/css/prism-tomorrow.min.css' }}" media="(prefers-color-scheme: dark)">
<link rel="stylesheet" href="{{ '/css/site.css' | url }}">
</head>
<body>

View file

@ -35,6 +35,7 @@ header {
main {
width: 100%;
min-width: 0px;
max-width: 70em;
padding: 2rem;
margin-left: auto;

View file

@ -17,3 +17,17 @@ code {
border: solid 1px var(--primary-border-color);
border-radius: calc(var(--main-border-radius) / 2);
}
pre {
background: var(--code-background);
padding: 1em;
border: solid 1px var(--primary-border-color);
border-radius: calc(var(--main-border-radius) / 2);
code {
background: unset;
padding: unset;
border: unset;
border-radius: unset;
}
}

View file

@ -11,6 +11,9 @@ eleventyNavigation:
<section>
<h2><a href={{ post.url }}>{{ post.data.title }}</a></h2>
<div>
<svg class="icon">
<use href="/images/feather-sprite.svg#clock" />
</svg>
{{ post.date.toLocaleDateString("en-US") }}
</div>
<p>{{ post.data.description }}</p>

View file

@ -1,3 +1,4 @@
{
"tags": [ "posts" ]
"tags": [ "posts" ],
"date": "git Created"
}