Add highlight.js plugin for syntax highlighting

Updated a bunch of styling to accomodate the new plugin.
This commit is contained in:
Foster Hangdaan 2023-11-29 14:55:46 -05:00
parent 8bfe718b41
commit 5cea657cd4
Signed by: foster
GPG key ID: E48D7F49A852F112
5 changed files with 29 additions and 9 deletions

View file

@ -3,6 +3,11 @@ import jsx from "lume/plugins/jsx.ts";
import nav from "lume/plugins/nav.ts"; import nav from "lume/plugins/nav.ts";
import sass from "lume/plugins/sass.ts"; import sass from "lume/plugins/sass.ts";
import feed from "lume/plugins/feed.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({ const site = lume({
location: new URL("https://www.fosterhangdaan.com/"), location: new URL("https://www.fosterhangdaan.com/"),
@ -37,5 +42,12 @@ site.use(feed({
description: "=description", description: "=description",
} }
})); }));
site.use(code_highlight({
languages: {
typescript: lang_typescript,
javascript: lang_javascript,
bash: lang_bash,
}
}));
export default site; export default site;

View file

@ -104,16 +104,16 @@ code {
pre { pre {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem;
border-radius: 5px; border-radius: 5px;
display: block; display: block;
background-color: var(--color-bg--layer-01);
overflow: auto; overflow: auto;
page-break-inside: avoid; page-break-inside: avoid;
word-wrap: break-word; word-wrap: break-word;
font-family: var(--font--mono); font-family: var(--font--mono);
line-height: 1.4; line-height: 1.5;
background-color: var(--color-bg--layer-01);
code { code {
background-color: transparent !important;
font-size: 1rem; font-size: 1rem;
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;

View file

@ -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 */ /* Tokyo night color palette */
:root { :root {
/* Dark Theme */ /* 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-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-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--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-60: #c5c6ce;
--tn-light--background-70: #b4b6bf; --tn-light--background-70: #b4b6bf;
--tn-light--background-80: #a4a6b1; --tn-light--background-80: #a4a6b1;
@ -148,8 +156,8 @@ :root {
--color-error: var(--color-red); --color-error: var(--color-red);
--color-success: var(--tn-dark--04); --color-success: var(--tn-dark--04);
--color-warn: var(--color-yellow); --color-warn: var(--color-yellow);
--color-bg--layer-01: var(--tn-storm--background-40); --color-bg--layer-01: var(--tn-storm--background-50);
--color-bg--layer-02: var(--tn-storm--background-30); --color-bg--layer-02: var(--tn-storm--background-40);
--color-headings: var(--color-cyan); --color-headings: var(--color-cyan);
--color-table-stripe: var(--tn-night--background-40); --color-table-stripe: var(--tn-night--background-40);
--filter-black: var(--tn-dark--filter-16); --filter-black: var(--tn-dark--filter-16);
@ -181,8 +189,8 @@ @media (prefers-color-scheme: light) {
--color-error: var(--color-red); --color-error: var(--color-red);
--color-success: var(--tn-light--04); --color-success: var(--tn-light--04);
--color-warn: var(--color-yellow); --color-warn: var(--color-yellow);
--color-bg--layer-01: var(--tn-light--background-60); --color-bg--layer-01: var(--tn-light--background-10);
--color-bg--layer-02: var(--tn-light--background-70); --color-bg--layer-02: var(--tn-light--background-20);
--color-headings: var(--color-cyan); --color-headings: var(--color-cyan);
--color-table-stripe: var(--tn-light--background-60); --color-table-stripe: var(--tn-light--background-60);
--filter-black: var(--tn-light--filter-13); --filter-black: var(--tn-light--filter-13);

BIN
deno.lock

Binary file not shown.

View file

@ -16,7 +16,7 @@ ## Obtaining My Key
The key's fingerprint should match the one below: The key's fingerprint should match the one below:
``` ``` txt
pub ed25519/E48D7F49A852F112 2023-07-14 [SC] pub ed25519/E48D7F49A852F112 2023-07-14 [SC]
Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112 Key fingerprint = DBD3 8E38 4B9E 1F4F 19F9 5BAE E48D 7F49 A852 F112
uid Foster Hangdaan <foster@hangdaan.email> uid Foster Hangdaan <foster@hangdaan.email>