diff --git a/.eleventy.js b/.eleventy.js
index 24302af..67bc02c 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -35,6 +35,7 @@ const markdownClassMapping = {
video: ['max-w-full', 'rounded-lg', 'max-h-600px', 'contrast-more:contrast-50'], // (contrast-more-50 here undoes the content contrast boost elsewhere)
ul: ['list-disc', 'ml-4', 'text-subtext0'],
li: ['text-subtext0'],
+ code: ['hljs']
};
setup(hljs);
@@ -44,7 +45,7 @@ const md = markdownit({
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
- return hljs.highlight(str, { language: lang }).value;
+ return hljs.highlight(str, { language: lang }).value + `${lang}`;
} catch (__) { }
}
diff --git a/_includes/base-header.html b/_includes/base-header.html
index 05fc35b..dea19b2 100644
--- a/_includes/base-header.html
+++ b/_includes/base-header.html
@@ -28,7 +28,7 @@
-
+
diff --git a/package-lock.json b/package-lock.json
index de61167..188d04e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,14 +14,14 @@
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
- "@catppuccin/highlightjs": "^0.1.4",
+ "@catppuccin/highlightjs": "^1.0.1",
"@catppuccin/tailwindcss": "^0.1.6",
"@divriots/jampack": "^0.23.3",
"autoprefixer": "^10.3.7",
"cheerio": "^1.0.0-rc.12",
"cssnano": "^5.0.8",
"dayjs": "^1.11.10",
- "highlight.js": "^11.9.0",
+ "highlight.js": "^11.11.0",
"highlightjs-glimmer": "^2.2.1",
"install": "^0.13.0",
"npm": "^10.5.0",
@@ -332,9 +332,9 @@
}
},
"node_modules/@catppuccin/highlightjs": {
- "version": "0.1.4",
- "resolved": "https://registry.npmjs.org/@catppuccin/highlightjs/-/highlightjs-0.1.4.tgz",
- "integrity": "sha512-PEzMrpE7VvXFLvQuNAomTcvAuXUJlBlcqvSqhHYFapSxBKye+auNokemssEVuv053KH7Go44Aa4sE+rZNOM5cQ==",
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/@catppuccin/highlightjs/-/highlightjs-1.0.1.tgz",
+ "integrity": "sha512-wnagsNQbJroHQMalkprwRoapfGV1hHRx46d7GXp4kf6rlShImBlgpqPCt9OD471Gq4qpHdfFH/GJFIvY1CLqHA==",
"dev": true,
"funding": [
{
diff --git a/package.json b/package.json
index f29cdab..7b489f3 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"start:site": "npx @11ty/eleventy --serve",
"build": "npx @11ty/eleventy",
"postbuild": "run-s postbuild:*",
- "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin.variables.css ./_site",
+ "postbuild:highlighttheme": "cp ./node_modules/@catppuccin/highlightjs/css/catppuccin-variables.rgb.css ./_site",
"postbuild:styles": "npx tailwindcss -i styles.css -o _site/styles.css --env production",
"optimize": "rm -rf _site/_jampack && jampack _site",
"test": "echo \"Error: no test specified\" && exit 1",
@@ -31,14 +31,14 @@
"devDependencies": {
"@11ty/eleventy": "^3.0.0",
"@11ty/eleventy-plugin-syntaxhighlight": "^3.1.3",
- "@catppuccin/highlightjs": "^0.1.4",
+ "@catppuccin/highlightjs": "^1.0.1",
"@catppuccin/tailwindcss": "^0.1.6",
"@divriots/jampack": "^0.23.3",
"autoprefixer": "^10.3.7",
"cheerio": "^1.0.0-rc.12",
"cssnano": "^5.0.8",
"dayjs": "^1.11.10",
- "highlight.js": "^11.9.0",
+ "highlight.js": "^11.11.0",
"highlightjs-glimmer": "^2.2.1",
"install": "^0.13.0",
"npm": "^10.5.0",
diff --git a/repos/svgdir2sprite.md b/repos/svgdir2sprite.md
index 8f17551..ba05f05 100644
--- a/repos/svgdir2sprite.md
+++ b/repos/svgdir2sprite.md
@@ -39,13 +39,13 @@ svgdir2sprite('./src/svgs', './build/spritesheet.svg');
### Return SVG Spritesheet to the Console
-``` shell
+```bash
svgdir2sprite ./src/svgs
```
### Write SVG Spritesheet to File
-``` sh
+```bash
svgdir2sprite ./src/svgs ./build/spritesheet.svg
```
diff --git a/styles.css b/styles.css
index 43652c5..fa9e09c 100644
--- a/styles.css
+++ b/styles.css
@@ -56,24 +56,43 @@ pre, p > code {
font-family: "VictorMono", monospace;
font-variant-ligatures: contextual;
color: rgb(var(--ctp-text));
- outline: 1px solid rgb(var(--ctp-surface0));
- border-radius: 0.25rem;
}
p > code {
padding: 0 .25rem;
display: inline-block;
background-color: rgb(var(--ctp-mantle));
- color: rgb(var(--ctp-blue));
+ color: rgb(var(--ctp-red));
+ border: 1px solid rgb(var(--ctp-surface0));
+ border-radius: 0.25rem;
font-size: 0.875rem;
}
pre {
- padding: 0.5rem 0.75rem;
- margin: 0.5rem 0 ;
+ position: relative;
+ padding: 1rem 0.75rem;
+ margin: 1rem 0 ;
overflow: auto;
max-width: 100%;
white-space: pre-wrap;
page-break-inside: avoid;
background-color: rgb(var(--ctp-crust));
+ mask:
+ radial-gradient(0.56rem at 50% 0.75rem,#000 99%,#0000 101%) calc(50% - 0.5rem) 0/1rem 51% repeat-x,
+ radial-gradient(0.56rem at 50% -0.5rem,#0000 99%,#000 101%) 50% .25rem/1rem calc(51% - .25rem) repeat-x,
+ radial-gradient(0.56rem at 50% calc(100% - 0.75rem),#000 99%,#0000 101%) calc(50% - 0.5rem) 100%/1rem 51% repeat-x,
+ radial-gradient(0.56rem at 50% calc(100% + 0.5rem),#0000 99%,#000 101%) 50% calc(100% - .25rem)/1rem calc(51% - .25rem) repeat-x;
+
+ .hljs-language-icon {
+ position: absolute;
+ top: 0;
+ right: 0;
+ padding: .2rem .25rem;
+ color: rgb(var(--ctp-subtext1));
+ background-color: rgb(var(--ctp-base));
+ border-left: 1px solid rgb(var(--ctp-surface0));
+ border-bottom: 1px solid rgb(var(--ctp-surface0));
+ border-radius: 0 0 0 0.25rem;
+ font-size: 0.875rem;
+ }
}
.hljs-comment {