twk95/11ty-site
Public Access
1
0
Fork 0
Code Actions Packages Activity

feat: add syntax highlighting plugin and styles for code blocks

Browse Source
This commit is contained in:
Jesus Otero Lagunes
2025-08-24 22:44:22 -04:00
parent 9d0d27c7b5
commit 43f290526b
5 changed files with 151 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eleventy.js
View File

@@ -1,5 +1,6 @@
module.exports = function(eleventyConfig) { module.exports = function(eleventyConfig) {
const { createProxyMiddleware } = require('http-proxy-middleware'); const { createProxyMiddleware } = require('http-proxy-middleware');
const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
// Pass through static assets from the "src" directory // Pass through static assets from the "src" directory
eleventyConfig.addPassthroughCopy("src/css"); eleventyConfig.addPassthroughCopy("src/css");
@@ -10,6 +11,8 @@ module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' }); eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' }); eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' });
eleventyConfig.addPlugin(syntaxHighlight);
// Add a filter for readable dates using vanilla JS // Add a filter for readable dates using vanilla JS
eleventyConfig.addFilter("readableDate", dateObj => { eleventyConfig.addFilter("readableDate", dateObj => {
// The toLocaleDateString method can be used to format dates // The toLocaleDateString method can be used to format dates

21
package-lock.json generated
View File

@@ -10,6 +10,7 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@11ty/eleventy": "^2.0.1", "@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.21.2", "express": "^4.21.2",
"fs-extra": "^11.3.1" "fs-extra": "^11.3.1"
@@ -107,6 +108,18 @@
"url": "https://opencollective.com/11ty" "url": "https://opencollective.com/11ty"
} }
}, },
"node_modules/@11ty/eleventy-plugin-syntaxhighlight": {
"version": "5.0.2",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-plugin-syntaxhighlight/-/eleventy-plugin-syntaxhighlight-5.0.2.tgz",
"integrity": "sha512-T6xVVRDJuHlrFMHbUiZkHjj5o1IlLzZW+1IL9eUsyXFU7rY2ztcYhZew/64vmceFFpQwzuSfxQOXxTJYmKkQ+A==",
"dependencies": {
"prismjs": "^1.30.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/11ty"
}
},
"node_modules/@11ty/eleventy-utils": { "node_modules/@11ty/eleventy-utils": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz",
@@ -2196,6 +2209,14 @@
"node": ">= 4" "node": ">= 4"
} }
}, },
"node_modules/prismjs": {
"version": "1.30.0",
"resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.30.0.tgz",
"integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
"engines": {
"node": ">=6"
}
},
"node_modules/promise": { "node_modules/promise": {
"version": "7.3.1", "version": "7.3.1",
"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",

7
package.json
View File

@@ -3,7 +3,7 @@
"version": "1.0.0", "version": "1.0.0",
"description": "An Eleventy project with Docker and VS Code debugging.", "description": "An Eleventy project with Docker and VS Code debugging.",
"scripts": { "scripts": {
"start": "eleventy --serve --watch", "start": "eleventy --serve",
"debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/eleventy --serve --watch", "debug": "node --inspect=0.0.0.0:9229 ./node_modules/.bin/eleventy --serve --watch",
"build": "eleventy" "build": "eleventy"
}, },
@@ -12,12 +12,13 @@
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@11ty/eleventy": "^2.0.1", "@11ty/eleventy": "^2.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.21.2", "express": "^4.21.2",
"fs-extra": "^11.3.1" "fs-extra": "^11.3.1"
}, },
"devDependencies": { "devDependencies": {
"nodemon": "^3.1.0", "http-proxy-middleware": "^3.0.0",
"http-proxy-middleware": "^3.0.0" "nodemon": "^3.1.0"
} }
} }

1
src/_includes/layout.njk
View File

@@ -47,6 +47,7 @@
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/css/style.css"> <link rel="stylesheet" href="/css/style.css">
<link rel="canonical" href="{{ site.url }}{{ page.url }}"> <link rel="canonical" href="{{ site.url }}{{ page.url }}">
<link rel="stylesheet" href="/css/prism-tomorrow.css">
</head> </head>
<body class="antialiased"> <body class="antialiased">
<!-- Header & Nav --> <!-- Header & Nav -->

122
src/css/prism-tomorrow.css Normal file
View File

@@ -0,0 +1,122 @@
/**
* prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
* Based on https://github.com/chriskempson/tomorrow-theme
* @author Rose Pritchard
*/
code[class*="language-"],
pre[class*="language-"] {
color: #ccc;
background: none;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: 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: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #999;
}
.token.punctuation {
color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
color: #e2777a;
}
.token.function-name {
color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
color: #67cdcc;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
.token.inserted {
color: green;
}