From 5cea657cd48c172eed04ef633d5a8bf5e4068c16 Mon Sep 17 00:00:00 2001 From: Foster Hangdaan Date: Wed, 29 Nov 2023 14:55:46 -0500 Subject: [PATCH] Add highlight.js plugin for syntax highlighting Updated a bunch of styling to accomodate the new plugin. --- _config.ts | 12 ++++++++++++ _includes/styles/base.scss | 6 +++--- _includes/styles/color-palette.scss | 18 +++++++++++++----- deno.lock | 8 ++++++++ gpg-key.md | 2 +- 5 files changed, 37 insertions(+), 9 deletions(-) diff --git a/_config.ts b/_config.ts index 3c22d3c..71f1645 100644 --- a/_config.ts +++ b/_config.ts @@ -3,6 +3,11 @@ import jsx from "lume/plugins/jsx.ts"; import nav from "lume/plugins/nav.ts"; import sass from "lume/plugins/sass.ts"; import feed from "lume/plugins/feed.ts"; +import code_highlight from "lume/plugins/code_highlight.ts"; + +import lang_typescript from "npm:highlight.js/lib/languages/typescript"; +import lang_javascript from "npm:highlight.js/lib/languages/javascript"; +import lang_bash from "npm:highlight.js/lib/languages/bash"; const site = lume({ location: new URL("https://www.fosterhangdaan.com/"), @@ -37,5 +42,12 @@ site.use(feed({ description: "=description", } })); +site.use(code_highlight({ + languages: { + typescript: lang_typescript, + javascript: lang_javascript, + bash: lang_bash, + } +})); export default site; diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss index 4d685bf..9430a52 100644 --- a/_includes/styles/base.scss +++ b/_includes/styles/base.scss @@ -104,16 +104,16 @@ code { pre { margin-top: 1rem; margin-bottom: 1rem; - padding: 1rem; border-radius: 5px; display: block; - background-color: var(--color-bg--layer-01); overflow: auto; page-break-inside: avoid; word-wrap: break-word; font-family: var(--font--mono); - line-height: 1.4; + line-height: 1.5; + background-color: var(--color-bg--layer-01); code { + background-color: transparent !important; font-size: 1rem; padding: 0; border-radius: 0; diff --git a/_includes/styles/color-palette.scss b/_includes/styles/color-palette.scss index f1121b2..d552438 100644 --- a/_includes/styles/color-palette.scss +++ b/_includes/styles/color-palette.scss @@ -1,3 +1,7 @@ +/* Tokyo Night styles for highlight.js */ +@import "https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-dark.css"; +@import "https://unpkg.com/@highlightjs/cdn-assets@11.9.0/styles/tokyo-night-light.css" (prefers-color-scheme: light); + /* Tokyo night color palette */ :root { /* Dark Theme */ @@ -102,7 +106,11 @@ --tn-light--filter-13: invert(3%) sepia(3%) saturate(6957%) hue-rotate(202deg) brightness(93%) contrast(94%); --tn-light--filter-14: invert(65%) sepia(13%) saturate(196%) hue-rotate(189deg) brightness(92%) contrast(87%); --tn-light--filter-15: invert(94%) sepia(7%) saturate(122%) hue-rotate(193deg) brightness(92%) contrast(90%); - --tn-light--background-50: #d5d6db; + --tn-light--background-10: #e1e2e6; + --tn-light--background-20: #dfdfe3; + --tn-light--background-30: #dcdce1; + --tn-light--background-40: #d9dade; + --tn-light--background-50: var(--tn-light--15); --tn-light--background-60: #c5c6ce; --tn-light--background-70: #b4b6bf; --tn-light--background-80: #a4a6b1; @@ -148,8 +156,8 @@ --color-error: var(--color-red); --color-success: var(--tn-dark--04); --color-warn: var(--color-yellow); - --color-bg--layer-01: var(--tn-storm--background-40); - --color-bg--layer-02: var(--tn-storm--background-30); + --color-bg--layer-01: var(--tn-storm--background-50); + --color-bg--layer-02: var(--tn-storm--background-40); --color-headings: var(--color-cyan); --color-table-stripe: var(--tn-night--background-40); --filter-black: var(--tn-dark--filter-16); @@ -181,8 +189,8 @@ --color-error: var(--color-red); --color-success: var(--tn-light--04); --color-warn: var(--color-yellow); - --color-bg--layer-01: var(--tn-light--background-60); - --color-bg--layer-02: var(--tn-light--background-70); + --color-bg--layer-01: var(--tn-light--background-10); + --color-bg--layer-02: var(--tn-light--background-20); --color-headings: var(--color-cyan); --color-table-stripe: var(--tn-light--background-60); --filter-black: var(--tn-light--filter-13); diff --git a/deno.lock b/deno.lock index 976fc1e..1983604 100644 --- a/deno.lock +++ b/deno.lock @@ -3,6 +3,8 @@ "packages": { "specifiers": { "npm:date-fns@2.30.0": "npm:date-fns@2.30.0", + "npm:highlight.js": "npm:highlight.js@11.9.0", + "npm:highlight.js@11.9.0": "npm:highlight.js@11.9.0", "npm:markdown-it-attrs@4.1.6": "npm:markdown-it-attrs@4.1.6_markdown-it@13.0.1", "npm:markdown-it-deflist@2.1.0": "npm:markdown-it-deflist@2.1.0", "npm:markdown-it@13.0.1": "npm:markdown-it@13.0.1", @@ -95,6 +97,10 @@ "is-glob": "is-glob@4.0.3" } }, + "highlight.js@11.9.0": { + "integrity": "sha512-fJ7cW7fQGCYAkgv4CPfwFHrfd/cLS4Hau96JuJ+ZTOWhjnhoeN1ub1tFmALm/+lW5z4WCAuAV9bm05AP0mS6Gw==", + "dependencies": {} + }, "immutable@4.3.1": { "integrity": "sha512-lj9cnmB/kVS0QHsJnYKD1uo3o39nrbKxszjnqS9Fr6NB7bZzW45U6WSGBPKXDL/CvDKqDNPA4r3DoDQ8GTxo2A==", "dependencies": {} @@ -1634,6 +1640,7 @@ "https://deno.land/x/lume@v1.19.4/deps/flags.ts": "97508dafad1a70bd9b508efa5c17aa8483a296a8578a1a822cfcb6e28228aaee", "https://deno.land/x/lume@v1.19.4/deps/front_matter.ts": "557ccb3c28cdba416e4f7df3e6cc17eb5845eba3d1e29a00d94d5e38c1726c49", "https://deno.land/x/lume@v1.19.4/deps/fs.ts": "a8b9d4ecd35327c31fc215801d702059e20a852bab73f7fa65fd5d0a27ff9143", + "https://deno.land/x/lume@v1.19.4/deps/highlight.ts": "c9a1a6b055703d7240464dd276144e57b4d228356cc59a52012feb51b8bcbaa6", "https://deno.land/x/lume@v1.19.4/deps/http.ts": "8634c740f5ab4a08073b865e7865ec41ff380f212db33dc3c1a2f7556c3d3d98", "https://deno.land/x/lume@v1.19.4/deps/jsonc.ts": "07f32cc9e06e51139991291d0a7780ebf9bae10e239518264a3977c893be4bf7", "https://deno.land/x/lume@v1.19.4/deps/markdown_it.ts": "ef7e6f700c2163cedb2ff9ec7f12c2e31cfd34673ae20b63924038c09e2fd496", @@ -1649,6 +1656,7 @@ "https://deno.land/x/lume@v1.19.4/middlewares/reload.ts": "1162ee5fc3c7e1f6b5fb3da73a648fc71f0a64d30ca48f05ed066c8cb80adbb6", "https://deno.land/x/lume@v1.19.4/middlewares/reload_client.js": "34d75e01503fae8180796de882af42b1125fac88f22a010a99d5548de1ba7d72", "https://deno.land/x/lume@v1.19.4/mod.ts": "39889108bfda96444489c2d4cec1de3f3a4daee3f5182c20b3965b16a0703055", + "https://deno.land/x/lume@v1.19.4/plugins/code_highlight.ts": "2ee40053381e7fff1d50ae7cf60131fbb0e5f7bbffc8c8767f587b4350ad3c45", "https://deno.land/x/lume@v1.19.4/plugins/feed.ts": "3e8f38523156b450daf7d1b114d431074e7328e702f77f87e3d28495c4f3826f", "https://deno.land/x/lume@v1.19.4/plugins/json.ts": "ca6bf1bc6d42639f7bdf581dc9318832d8c2eaf83ae3ecdab6f02dfc738896bf", "https://deno.land/x/lume@v1.19.4/plugins/jsx.ts": "532a055f1c6c6f00d21d13cb658614d5f6fc56ea28266020d371ba5fb151461a", diff --git a/gpg-key.md b/gpg-key.md index 5360d15..cb9ca78 100644 --- a/gpg-key.md +++ b/gpg-key.md @@ -16,7 +16,7 @@ You can download my public key here: [Foster Hangdaan's Public Key](https://stat The key's fingerprint should match the one below: -``` +``` txt pub ed25519/E48D7F49A852F112 2023-07-14 [SC] Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112 uid Foster Hangdaan