RikSolo
/
eleventy-riksolo-com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
content/layouts/base.njk
View File

@ -8,63 +8,64 @@
<!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" />
<meta name="robots" content="index, follow" /> <meta name="robots" content="index, follow" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="English" /> <meta name="language" content="English" />
<meta name="google-site-verification" content="x17arJy33V33DYnmMYybZciXngFd8R8xn1UZRdp7qxo" /> <meta name="google-site-verification" content="x17arJy33V33DYnmMYybZciXngFd8R8xn1UZRdp7qxo" />
<link rel="canonical" href="{{site.url}}{{page.url | url}}" /> <link rel="canonical" href="{{site.url}}{{page.url | url}}" />
{%if tags.includes("blogpost")%} {%if tags.includes("blogpost")%}
<meta property="og:type" content="article" /> <meta property="og:type" content="article" />
{%if description %} {%if description %}
<meta property="description" content="{{description}}" /> <meta property="description" content="{{description}}" />
<meta property="og:description" content="{{description}}" /> <meta property="og:description" content="{{description}}" />
{% endif %} {% endif %}
<meta property="og:title" content="{{title}}" /> <meta property="og:title" content="{{title}}" />
<meta property="og:url" content="{{site.url}}{{page.url | url}}" /> <meta property="og:url" content="{{site.url}}{{page.url | url}}" />
<meta property="og:sitename" content="{{site.title}}" /> <meta property="og:sitename" content="{{site.title}}" />
<meta property="og:image" content="{{site.url}}/img/RB-w.png" /> <meta property="og:image" content="{{site.url}}/img/RB-w.png" />
{%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="/">
<img src="/img/RB-w.png" alt="RB logo" eleventy:widths="100" /> <img src="/img/RB-w.png" alt="RB logo" eleventy:widths="100" />
Rik Berkelder Rik Berkelder
</a> </a>
<div class="nav-links"> <div class="nav-links">
<div class="d-inline-block"> <div class="d-inline-block">
{{navItem("Home", "/")}} {{navItem("Home", "/")}}
{{navItem("Blog", "/blog", false)}} {{navItem("Blog", "/blog", false)}}
</div> </div>
<div class="d-inline-block"> <div class="d-inline-block">
<span> | </span> <span> | </span>
{{navItem("Mastodon", "https://dook.business/@RikSolo")}} {{navItem("Mastodon", "https://dook.business/@RikSolo")}}
{{navItem("Instagram", "https://instagram.com/RikBerkelder", false)}} {{navItem("Instagram", "https://instagram.com/RikBerkelder", false)}}
</div>
</div> </div>
</div> </div>
{{content | safe}}
</div> </div>
{{content | safe}} <script src="//instant.page/5.2.0" type="module"
integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>
</div> <script data-goatcounter="https://goatcounter.riksolo.com/count" async
<script src="//instant.page/5.2.0" type="module" src="//goatcounter.riksolo.com/count.js"></script>
integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script> </body>
<script data-goatcounter="https://goatcounter.riksolo.com/count" async
src="//goatcounter.riksolo.com/count.js"></script>
</body>
</html> </html>

21
content/style.scss
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%;

14
eleventy.config.js
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",

1
package.json
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"
} }