From b5c8a022fc59d2e85946b2141c9716896386aae0 Mon Sep 17 00:00:00 2001 From: RikSolo Date: Thu, 13 Feb 2025 00:02:33 +0100 Subject: [PATCH] syntax highlighting --- content/layouts/base.njk | 99 ++++++++++++++++++++-------------------- content/style.scss | 21 ++++++++- eleventy.config.js | 14 ++++++ package-lock.json | 23 ++++++++++ package.json | 3 +- 5 files changed, 108 insertions(+), 52 deletions(-) diff --git a/content/layouts/base.njk b/content/layouts/base.njk index ad8992e..c463381 100644 --- a/content/layouts/base.njk +++ b/content/layouts/base.njk @@ -8,63 +8,64 @@ - - - - - + + + + + + - - - - - - + + + + + + - + - {%if tags.includes("blogpost")%} - - {%if description %} - - - {% endif %} - - - - - {%endif%} + {%if tags.includes("blogpost")%} + + {%if description %} + + + {% endif %} + + + + + {%endif%} - {% if title %}{{title}} | {% endif %}{{site.title}} - + {% if title %}{{title}} | {% endif %}{{site.title}} + - -
-
- -
-
- {{navItem("Home", "/")}} - {{navItem("Blog", "/blog", false)}} -
-
- | - {{navItem("Mastodon", "https://dook.business/@RikSolo")}} - {{navItem("Instagram", "https://instagram.com/RikBerkelder", false)}} + +
+
+ +
+
+ {{navItem("Home", "/")}} + {{navItem("Blog", "/blog", false)}} +
+
+ | + {{navItem("Mastodon", "https://dook.business/@RikSolo")}} + {{navItem("Instagram", "https://instagram.com/RikBerkelder", false)}} +
+
+ {{content | safe}}
- {{content | safe}} - -
- - - + + + \ No newline at end of file diff --git a/content/style.scss b/content/style.scss index fb03da7..9191e0b 100644 --- a/content/style.scss +++ b/content/style.scss @@ -14,11 +14,13 @@ $text-default: $white-light; $primary: $blue; $secondary: $blue-med; +$default-font-family: 'Inconsolata', serif; +$default-font-weight: 400; + body { color: $text-default; background-color: $grey-vdark; - font-family: 'Inconsolata', - monospace; + font-family: $default-font-family; line-height: 1.3rem; @@ -97,6 +99,21 @@ body { 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 { width: 100%; diff --git a/eleventy.config.js b/eleventy.config.js index e2bffff..60cc1cd 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -1,6 +1,8 @@ import * as sass from "sass"; import { eleventyImageTransformPlugin } from "@11ty/eleventy-img"; import { DateTime } from "luxon"; +import markdownit from "markdown-it"; +import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'; export default async function (eleventyConfig) { // 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"); } diff --git a/package-lock.json b/package-lock.json index 22fbb32..ea70d5a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@11ty/eleventy": "^3.0.0", "@11ty/eleventy-img": "^6.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "luxon": "^3.5.0", "sass": "^1.83.4" } @@ -221,6 +222,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==", + "license": "MIT", + "dependencies": { + "prismjs": "^1.29.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/11ty" + } + }, "node_modules/@11ty/eleventy-utils": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@11ty/eleventy-utils/-/eleventy-utils-1.0.3.tgz", @@ -2668,6 +2682,15 @@ "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": { "version": "7.3.1", "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", diff --git a/package.json b/package.json index 5c8d15c..216085b 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,8 @@ "dependencies": { "@11ty/eleventy": "^3.0.0", "@11ty/eleventy-img": "^6.0.1", + "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.0", "luxon": "^3.5.0", "sass": "^1.83.4" } -} \ No newline at end of file +}