Add highlight.js plugin for syntax highlighting
Updated a bunch of styling to accomodate the new plugin.
This commit is contained in:
parent
8bfe718b41
commit
5cea657cd4
GPG key ID:
E48D7F49A852F112
5 changed files with 37 additions and 9 deletions
12
_config.ts
12
_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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
8
deno.lock
generated
8
deno.lock
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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 <foster@hangdaan.email>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue