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 | Bin 189376 -> 189936 bytes gpg-key.md | 2 +- 5 files changed, 29 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 @@ :root { --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 @@ :root { --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 @@ @media (prefers-color-scheme: light) { --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 976fc1e5b8de02630db8c764219eab9618d5ed59..1983604435fa21615897aacd1d175c26ebe770c7 100644 GIT binary patch delta 439 zcmX?bocqIR?g{0|8JX!BIY3;ZmsPA}rJ$5okZXl3=3r>3XQ^kPq{F2E1~?Vq);sZl z)W+s+enAXlCl?BmL?gNxaB(fm};J!W@cb$Y?zjmWRPl_W}cLkmX>Uh mY+-I@o@QzRwAdJ^D#bY2WctE`Oj^_JFEep$kGjB=CJX>eu8Fb$ delta 41 zcmV+^0M`HT%L~BA3y^n{KLHG}^otLJIuVCD5dpV45d!qMx2(znSO>R?(gJ1^b;A(r 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 @@ ## Obtaining My Key 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