syntax highlighting

This commit is contained in:
Rik Berkelder 2025-02-13 00:02:33 +01:00
parent ccf20da6c1
commit b5c8a022fc
5 changed files with 108 additions and 52 deletions

View File

@ -8,11 +8,12 @@
<!doctype html> <!doctype html>
<html> <html>
<head> <head>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="/style.css" /> <link rel="stylesheet" type="text/css" href="/style.css" />
<link href="https://unpkg.com/prism-themes@1.9.0/themes/prism-nord.css" rel="stylesheet" />
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -36,9 +37,9 @@
{%endif%} {%endif%}
<title>{% if title %}{{title}} | {% endif %}{{site.title}}</title> <title>{% if title %}{{title}} | {% endif %}{{site.title}}</title>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="nav"> <div class="nav">
<a class="d-inline-block main-logo" href="/"> <a class="d-inline-block main-logo" href="/">
@ -65,6 +66,6 @@
integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script> integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
<script data-goatcounter="https://goatcounter.riksolo.com/count" async <script data-goatcounter="https://goatcounter.riksolo.com/count" async
src="//goatcounter.riksolo.com/count.js"></script> src="//goatcounter.riksolo.com/count.js"></script>
</body> </body>
</html> </html>

View File

@ -14,11 +14,13 @@ $text-default: $white-light;
$primary: $blue; $primary: $blue;
$secondary: $blue-med; $secondary: $blue-med;
$default-font-family: 'Inconsolata', serif;
$default-font-weight: 400;
body { body {
color: $text-default; color: $text-default;
background-color: $grey-vdark; background-color: $grey-vdark;
font-family: 'Inconsolata', font-family: $default-font-family;
monospace;
line-height: 1.3rem; line-height: 1.3rem;
@ -97,6 +99,21 @@ body {
margin: 0rem 1rem; margin: 0rem 1rem;
} }
pre[class*="language-"],
code[class*="language-"] {
font-family: $default-font-family !important;
font-weight: $default-font-weight;
tab-size: 2;
line-height: 1.3rem;
}
pre[class*="language-"] {
max-width: 100%;
background: $grey-dark !important;
border-radius: 0;
padding: 0.5rem;
}
.nav { .nav {
width: 100%; width: 100%;

View File

@ -1,6 +1,8 @@
import * as sass from "sass"; import * as sass from "sass";
import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img";
import { DateTime } from "luxon"; import { DateTime } from "luxon";
import markdownit from "markdown-it";
import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight';
export default async function (eleventyConfig) { export default async function (eleventyConfig) {
// Filters // Filters
@ -37,6 +39,18 @@ export default async function (eleventyConfig) {
`; `;
}); });
//Markdown
const md = markdownit({
html: true,
breaks: true
});
eleventyConfig.setLibrary("md", md);
// Syntax Highlighting
eleventyConfig.addPlugin(syntaxHighlight);
//File passthrough
eleventyConfig.addPassthroughCopy("content/robots.txt"); eleventyConfig.addPassthroughCopy("content/robots.txt");
} }

23
package-lock.json generated
View File

@ -11,6 +11,7 @@
"dependencies": { "dependencies": {
"@11ty/eleventy": "^3.0.0", "@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-img": "^6.0.1", "@11ty/eleventy-img": "^6.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"sass": "^1.83.4" "sass": "^1.83.4"
} }
@ -221,6 +222,19 @@
"url": "https://opencollective.com/11ty" "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==",
"license": "MIT",
"dependencies": {
"prismjs": "^1.29.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",
@ -2668,6 +2682,15 @@
"node": ">=12" "node": ">=12"
} }
}, },
"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==",
"license": "MIT",
"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",

View File

@ -15,6 +15,7 @@
"dependencies": { "dependencies": {
"@11ty/eleventy": "^3.0.0", "@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-img": "^6.0.1", "@11ty/eleventy-img": "^6.0.1",
"@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0",
"luxon": "^3.5.0", "luxon": "^3.5.0",
"sass": "^1.83.4" "sass": "^1.83.4"
} }