From 2311498575a8b7bdd3047609dd12f49052d91c26 Mon Sep 17 00:00:00 2001 From: Anatoly Kopyl Date: Sat, 5 Oct 2024 12:29:54 +0300 Subject: [PATCH] Better code blocks --- package-lock.json | 544 ++++++++++++++++++++++++++++ package.json | 3 + shikiHighlighter.js | 37 ++ src/routes/blog/+layout.svelte | 38 +- src/routes/blog/prism-one-dark.css | 440 ---------------------- src/routes/blog/this-blog/+page.svx | 20 +- svelte.config.js | 8 +- 7 files changed, 629 insertions(+), 461 deletions(-) create mode 100644 shikiHighlighter.js delete mode 100644 src/routes/blog/prism-one-dark.css diff --git a/package-lock.json b/package-lock.json index 94b019e..b5b62ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@iconify-json/material-symbols": "^1.2.1", "@iconify-json/mdi": "^1.2.0", "@mavrin/remark-typograf": "^2.2.0", + "@shikijs/transformers": "^1.21.0", "@sveltejs/enhanced-img": "^0.3.8", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", @@ -27,6 +28,8 @@ "mdsvex": "^0.12.3", "postcss": "^8.4.47", "postcss-nested": "^6.2.0", + "rehype-highlight-code-lines": "^1.0.4", + "shiki": "^1.21.0", "svelte": "^4.2.7", "svelte-check": "^4.0.0", "tailwindcss": "^3.4.13", @@ -1550,6 +1553,66 @@ "win32" ] }, + "node_modules/@shikijs/core": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.21.0.tgz", + "integrity": "sha512-zAPMJdiGuqXpZQ+pWNezQAk5xhzRXBNiECFPcJLtUdsFM3f//G95Z15EHTnHchYycU8kIIysqGgxp8OVSj1SPQ==", + "dev": true, + "dependencies": { + "@shikijs/engine-javascript": "1.21.0", + "@shikijs/engine-oniguruma": "1.21.0", + "@shikijs/types": "1.21.0", + "@shikijs/vscode-textmate": "^9.2.2", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.3" + } + }, + "node_modules/@shikijs/engine-javascript": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.21.0.tgz", + "integrity": "sha512-jxQHNtVP17edFW4/0vICqAVLDAxmyV31MQJL4U/Kg+heQALeKYVOWo0sMmEZ18FqBt+9UCdyqGKYE7bLRtk9mg==", + "dev": true, + "dependencies": { + "@shikijs/types": "1.21.0", + "@shikijs/vscode-textmate": "^9.2.2", + "oniguruma-to-js": "0.4.3" + } + }, + "node_modules/@shikijs/engine-oniguruma": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.21.0.tgz", + "integrity": "sha512-AIZ76XocENCrtYzVU7S4GY/HL+tgHGbVU+qhiDyNw1qgCA5OSi4B4+HY4BtAoJSMGuD/L5hfTzoRVbzEm2WTvg==", + "dev": true, + "dependencies": { + "@shikijs/types": "1.21.0", + "@shikijs/vscode-textmate": "^9.2.2" + } + }, + "node_modules/@shikijs/transformers": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/transformers/-/transformers-1.21.0.tgz", + "integrity": "sha512-aA+XGGSzipcvqdsOYL8l6Q2RYiMuJNdhdt9eZnkJmW+wjSOixN/I7dBq3fISwvEMDlawrtuXM3eybLCEC+Fjlg==", + "dev": true, + "dependencies": { + "shiki": "1.21.0" + } + }, + "node_modules/@shikijs/types": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.21.0.tgz", + "integrity": "sha512-tzndANDhi5DUndBtpojEq/42+dpUF2wS7wdCDQaFtIXm3Rd1QkrcVgSSRLOvEwexekihOXfbYJINW37g96tJRw==", + "dev": true, + "dependencies": { + "@shikijs/vscode-textmate": "^9.2.2", + "@types/hast": "^3.0.4" + } + }, + "node_modules/@shikijs/vscode-textmate": { + "version": "9.2.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.2.2.tgz", + "integrity": "sha512-TMp15K+GGYrWlZM8+Lnj9EaHEFmOen0WJBrfa17hF7taDOYthuPPV0GWzfd/9iMij0akS/8Yw2ikquH7uVi/fg==", + "dev": true + }, "node_modules/@sveltejs/adapter-node": { "version": "5.2.5", "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-5.2.5.tgz", @@ -1680,12 +1743,30 @@ "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz", "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==" }, + "node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dev": true, + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==", "dev": true }, + "node_modules/@types/mdast": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz", + "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==", + "dev": true, + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@types/resolve": { "version": "1.20.2", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.20.2.tgz", @@ -1915,6 +1996,12 @@ "url": "https://opencollective.com/eslint" } }, + "node_modules/@ungap/structured-clone": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz", + "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==", + "dev": true + }, "node_modules/@vue/compiler-core": { "version": "3.5.10", "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.10.tgz", @@ -2153,6 +2240,16 @@ "node": ">= 0.4" } }, + "node_modules/bail": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", + "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/balanced-match": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", @@ -2263,6 +2360,16 @@ } ] }, + "node_modules/ccount": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz", + "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -2279,6 +2386,26 @@ "url": "https://github.com/chalk/chalk?sponsor=1" } }, + "node_modules/character-entities-html4": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz", + "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/character-entities-legacy": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz", + "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -2368,6 +2495,16 @@ "simple-swizzle": "^0.2.2" } }, + "node_modules/comma-separated-tokens": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", + "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/commander": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", @@ -2470,6 +2607,15 @@ "node": ">=0.10.0" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/detect-libc": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.3.tgz", @@ -2484,6 +2630,19 @@ "resolved": "https://registry.npmjs.org/devalue/-/devalue-5.0.0.tgz", "integrity": "sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==" }, + "node_modules/devlop": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", + "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==", + "dev": true, + "dependencies": { + "dequal": "^2.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/didyoumean": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", @@ -2797,6 +2956,12 @@ "node": ">=0.10.0" } }, + "node_modules/extend": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz", + "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==", + "dev": true + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -3083,6 +3248,58 @@ "node": ">= 0.4" } }, + "node_modules/hast-util-to-html": { + "version": "9.0.3", + "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz", + "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-whitespace": "^3.0.0", + "html-void-elements": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "property-information": "^6.0.0", + "space-separated-tokens": "^2.0.0", + "stringify-entities": "^4.0.0", + "zwitch": "^2.0.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/hast-util-to-html/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true + }, + "node_modules/hast-util-whitespace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", + "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/html-void-elements": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", + "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/ignore": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz", @@ -3220,6 +3437,18 @@ "node": ">=8" } }, + "node_modules/is-plain-obj": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz", + "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==", + "dev": true, + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/is-reference": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz", @@ -3407,6 +3636,27 @@ "@jridgewell/sourcemap-codec": "^1.5.0" } }, + "node_modules/mdast-util-to-hast": { + "version": "13.2.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz", + "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.0", + "@types/mdast": "^4.0.0", + "@ungap/structured-clone": "^1.0.0", + "devlop": "^1.0.0", + "micromark-util-sanitize-uri": "^2.0.0", + "trim-lines": "^3.0.0", + "unist-util-position": "^5.0.0", + "unist-util-visit": "^5.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/mdn-data": { "version": "2.0.30", "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz", @@ -3436,6 +3686,95 @@ "node": ">= 8" } }, + "node_modules/micromark-util-character": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz", + "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-symbol": "^2.0.0", + "micromark-util-types": "^2.0.0" + } + }, + "node_modules/micromark-util-encode": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz", + "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/micromark-util-sanitize-uri": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz", + "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ], + "dependencies": { + "micromark-util-character": "^2.0.0", + "micromark-util-encode": "^2.0.0", + "micromark-util-symbol": "^2.0.0" + } + }, + "node_modules/micromark-util-symbol": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz", + "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, + "node_modules/micromark-util-types": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz", + "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==", + "dev": true, + "funding": [ + { + "type": "GitHub Sponsors", + "url": "https://github.com/sponsors/unifiedjs" + }, + { + "type": "OpenCollective", + "url": "https://opencollective.com/unified" + } + ] + }, "node_modules/micromatch": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", @@ -3591,6 +3930,18 @@ "node": ">= 6" } }, + "node_modules/oniguruma-to-js": { + "version": "0.4.3", + "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz", + "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==", + "dev": true, + "dependencies": { + "regex": "^4.3.2" + }, + "funding": { + "url": "https://github.com/sponsors/antfu" + } + }, "node_modules/optionator": { "version": "0.9.4", "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz", @@ -3662,6 +4013,12 @@ "node": ">=6" } }, + "node_modules/parse-numeric-range": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/parse-numeric-range/-/parse-numeric-range-1.3.0.tgz", + "integrity": "sha512-twN+njEipszzlMJd4ONUYgSfZPDxgHhT9Ahed5uTigpQn90FggW4SA/AIPq/6a149fTbE9qBEcSwE3FAEp6wQQ==", + "dev": true + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -3966,6 +4323,16 @@ "node": ">=6" } }, + "node_modules/property-information": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz", + "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -4028,6 +4395,24 @@ "url": "https://github.com/sponsors/jonschlinkert" } }, + "node_modules/regex": { + "version": "4.3.3", + "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz", + "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==", + "dev": true + }, + "node_modules/rehype-highlight-code-lines": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/rehype-highlight-code-lines/-/rehype-highlight-code-lines-1.0.4.tgz", + "integrity": "sha512-sDX8HZLfx+uFXGYP56XWR1pwt2tiQA6C/evATfLZPFD88EePKk+uzhwprLSxv/QHYWkAW6tLAgkTd23bd+BUaQ==", + "dev": true, + "dependencies": { + "@types/hast": "^3.0.4", + "parse-numeric-range": "^1.3.0", + "unified": "^11.0.5", + "unist-util-visit": "^5.0.0" + } + }, "node_modules/resolve": { "version": "1.22.8", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz", @@ -4213,6 +4598,20 @@ "node": ">=8" } }, + "node_modules/shiki": { + "version": "1.21.0", + "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.21.0.tgz", + "integrity": "sha512-apCH5BoWTrmHDPGgg3RF8+HAAbEL/CdbYr8rMw7eIrdhCkZHdVGat5mMNlRtd1erNG01VPMIKHNQ0Pj2HMAiog==", + "dev": true, + "dependencies": { + "@shikijs/core": "1.21.0", + "@shikijs/engine-javascript": "1.21.0", + "@shikijs/engine-oniguruma": "1.21.0", + "@shikijs/types": "1.21.0", + "@shikijs/vscode-textmate": "^9.2.2", + "@types/hast": "^3.0.4" + } + }, "node_modules/signal-exit": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", @@ -4255,6 +4654,16 @@ "node": ">=0.10.0" } }, + "node_modules/space-separated-tokens": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz", + "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", @@ -4320,6 +4729,20 @@ "url": "https://github.com/chalk/strip-ansi?sponsor=1" } }, + "node_modules/stringify-entities": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz", + "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==", + "dev": true, + "dependencies": { + "character-entities-html4": "^2.0.0", + "character-entities-legacy": "^3.0.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/strip-ansi": { "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", @@ -4725,6 +5148,26 @@ "node": ">=6" } }, + "node_modules/trim-lines": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz", + "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/trough": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz", + "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "node_modules/ts-api-utils": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz", @@ -4813,6 +5256,31 @@ "integrity": "sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==", "dev": true }, + "node_modules/unified": { + "version": "11.0.5", + "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz", + "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "bail": "^2.0.0", + "devlop": "^1.0.0", + "extend": "^3.0.0", + "is-plain-obj": "^4.0.0", + "trough": "^2.0.0", + "vfile": "^6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unified/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true + }, "node_modules/unist-util-is": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz", @@ -4832,6 +5300,25 @@ "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", "dev": true }, + "node_modules/unist-util-position": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz", + "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/unist-util-position/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true + }, "node_modules/unist-util-stringify-position": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", @@ -4994,6 +5481,20 @@ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", "dev": true }, + "node_modules/vfile": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz", + "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "vfile-message": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vfile-message": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", @@ -5008,6 +5509,39 @@ "url": "https://opencollective.com/unified" } }, + "node_modules/vfile/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "dev": true + }, + "node_modules/vfile/node_modules/unist-util-stringify-position": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz", + "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/vfile/node_modules/vfile-message": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz", + "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==", + "dev": true, + "dependencies": { + "@types/unist": "^3.0.0", + "unist-util-stringify-position": "^4.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, "node_modules/vite": { "version": "5.4.7", "resolved": "https://registry.npmjs.org/vite/-/vite-5.4.7.tgz", @@ -5237,6 +5771,16 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zwitch": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz", + "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==", + "dev": true, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } } } } diff --git a/package.json b/package.json index 1cbad47..0651024 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@iconify-json/material-symbols": "^1.2.1", "@iconify-json/mdi": "^1.2.0", "@mavrin/remark-typograf": "^2.2.0", + "@shikijs/transformers": "^1.21.0", "@sveltejs/enhanced-img": "^0.3.8", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", @@ -25,6 +26,8 @@ "mdsvex": "^0.12.3", "postcss": "^8.4.47", "postcss-nested": "^6.2.0", + "rehype-highlight-code-lines": "^1.0.4", + "shiki": "^1.21.0", "svelte": "^4.2.7", "svelte-check": "^4.0.0", "tailwindcss": "^3.4.13", diff --git a/shikiHighlighter.js b/shikiHighlighter.js new file mode 100644 index 0000000..f325079 --- /dev/null +++ b/shikiHighlighter.js @@ -0,0 +1,37 @@ +import {createHighlighter} from "shiki" +import {escapeSvelte} from "mdsvex" +import { + transformerNotationHighlight, + transformerNotationDiff +} from "@shikijs/transformers" + +const theme = 'material-theme' + +export const highlighter = await createHighlighter({ + themes: [theme], + langs: [ + 'javascript', + 'typescript', + 'html', + 'markdown', + 'mdx', + 'bash', + 'svelte', + 'yaml' + ] +}); + +export const shikiHighlighter = async (code, lang = 'text') => { + const html = escapeSvelte(highlighter.codeToHtml( + code, + { + lang, + theme, + transformers: [ + transformerNotationHighlight(), + transformerNotationDiff() + ] + } + )); + return `{@html \`${html}\` }`; +} diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte index b7a95a6..f019d04 100644 --- a/src/routes/blog/+layout.svelte +++ b/src/routes/blog/+layout.svelte @@ -1,5 +1,4 @@ @@ -31,20 +30,41 @@ import Navbar from "$lib/components/Navbar.svelte"; } :global(pre) { + @apply p-4 !my-4 overflow-auto rounded-lg relative; max-width: calc(100vw - 16px); } -:global(pre, code) { - @apply rounded-lg; -} - :global(pre code) { - @apply p-0; + @apply p-0 relative block; + + &:has(.diff) { + @apply ml-8; + } } :global(code) { - background: rgb(40, 44, 52); - color: rgb(209, 154, 102); - @apply px-2 py-0.5; + background: #263238; + color: #C3E88D; + @apply px-2 py-0.5 rounded; +} + +:global(code .highlighted) { + background: #334752; + display: inline-block; + width: calc(100% + 32px); + @apply px-4 -mx-4; +} + +:global(code .diff.add) { + background: #526a4f; + display: inline-block; + width: calc(100% + 64px); + @apply pr-4 -mr-4 pl-12 -ml-12; + + &:before { + position: absolute; + left: -32px; + content: '+'; + } } diff --git a/src/routes/blog/prism-one-dark.css b/src/routes/blog/prism-one-dark.css deleted file mode 100644 index ffde688..0000000 --- a/src/routes/blog/prism-one-dark.css +++ /dev/null @@ -1,440 +0,0 @@ -/** - * One Dark theme for prism.js - * Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax - */ - -/** - * One Dark colours (accurate as of commit 8ae45ca on 6 Sep 2018) - * From colors.less - * --mono-1: hsl(220, 14%, 71%); - * --mono-2: hsl(220, 9%, 55%); - * --mono-3: hsl(220, 10%, 40%); - * --hue-1: hsl(187, 47%, 55%); - * --hue-2: hsl(207, 82%, 66%); - * --hue-3: hsl(286, 60%, 67%); - * --hue-4: hsl(95, 38%, 62%); - * --hue-5: hsl(355, 65%, 65%); - * --hue-5-2: hsl(5, 48%, 51%); - * --hue-6: hsl(29, 54%, 61%); - * --hue-6-2: hsl(39, 67%, 69%); - * --syntax-fg: hsl(220, 14%, 71%); - * --syntax-bg: hsl(220, 13%, 18%); - * --syntax-gutter: hsl(220, 14%, 45%); - * --syntax-guide: hsla(220, 14%, 71%, 0.15); - * --syntax-accent: hsl(220, 100%, 66%); - * From syntax-variables.less - * --syntax-selection-color: hsl(220, 13%, 28%); - * --syntax-gutter-background-color-selected: hsl(220, 13%, 26%); - * --syntax-cursor-line: hsla(220, 100%, 80%, 0.04); - */ - -code[class*="language-"], -pre[class*="language-"] { - background: hsl(220, 13%, 18%); - color: hsl(220, 14%, 71%); - text-shadow: 0 1px rgba(0, 0, 0, 0.3); - font-family: "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace; - direction: ltr; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - line-height: 1.5; - -moz-tab-size: 2; - -o-tab-size: 2; - tab-size: 2; - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -/* Selection */ -code[class*="language-"]::-moz-selection, -code[class*="language-"] *::-moz-selection, -pre[class*="language-"] *::-moz-selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -code[class*="language-"]::selection, -code[class*="language-"] *::selection, -pre[class*="language-"] *::selection { - background: hsl(220, 13%, 28%); - color: inherit; - text-shadow: none; -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: 0.5em 0; - overflow: auto; - border-radius: 0.3em; -} - -/* Inline code */ -:not(pre) > code[class*="language-"] { - padding: 0.2em 0.3em; - border-radius: 0.3em; - white-space: normal; -} - -/* Print */ -@media print { - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -.token.comment, -.token.prolog, -.token.cdata { - color: hsl(220, 10%, 40%); -} - -.token.doctype, -.token.punctuation, -.token.entity { - color: hsl(220, 14%, 71%); -} - -.token.attr-name, -.token.class-name, -.token.boolean, -.token.constant, -.token.number, -.token.atrule { - color: hsl(29, 54%, 61%); -} - -.token.keyword { - color: hsl(286, 60%, 67%); -} - -.token.property, -.token.tag, -.token.symbol, -.token.deleted, -.token.important { - color: hsl(355, 65%, 65%); -} - -.token.selector, -.token.string, -.token.char, -.token.builtin, -.token.inserted, -.token.regex, -.token.attr-value, -.token.attr-value > .token.punctuation { - color: hsl(95, 38%, 62%); -} - -.token.variable, -.token.operator, -.token.function { - color: hsl(207, 82%, 66%); -} - -.token.url { - color: hsl(187, 47%, 55%); -} - -/* HTML overrides */ -.token.attr-value > .token.punctuation.attr-equals, -.token.special-attr > .token.attr-value > .token.value.css { - color: hsl(220, 14%, 71%); -} - -/* CSS overrides */ -.language-css .token.selector { - color: hsl(355, 65%, 65%); -} - -.language-css .token.property { - color: hsl(220, 14%, 71%); -} - -.language-css .token.function, -.language-css .token.url > .token.function { - color: hsl(187, 47%, 55%); -} - -.language-css .token.url > .token.string.url { - color: hsl(95, 38%, 62%); -} - -.language-css .token.important, -.language-css .token.atrule .token.rule { - color: hsl(286, 60%, 67%); -} - -/* JS overrides */ -.language-javascript .token.operator { - color: hsl(286, 60%, 67%); -} - -.language-javascript .token.template-string > .token.interpolation > .token.interpolation-punctuation.punctuation { - color: hsl(5, 48%, 51%); -} - -/* JSON overrides */ -.language-json .token.operator { - color: hsl(220, 14%, 71%); -} - -.language-json .token.null.keyword { - color: hsl(29, 54%, 61%); -} - -/* MD overrides */ -.language-markdown .token.url, -.language-markdown .token.url > .token.operator, -.language-markdown .token.url-reference.url > .token.string { - color: hsl(220, 14%, 71%); -} - -.language-markdown .token.url > .token.content { - color: hsl(207, 82%, 66%); -} - -.language-markdown .token.url > .token.url, -.language-markdown .token.url-reference.url { - color: hsl(187, 47%, 55%); -} - -.language-markdown .token.blockquote.punctuation, -.language-markdown .token.hr.punctuation { - color: hsl(220, 10%, 40%); - font-style: italic; -} - -.language-markdown .token.code-snippet { - color: hsl(95, 38%, 62%); -} - -.language-markdown .token.bold .token.content { - color: hsl(29, 54%, 61%); -} - -.language-markdown .token.italic .token.content { - color: hsl(286, 60%, 67%); -} - -.language-markdown .token.strike .token.content, -.language-markdown .token.strike .token.punctuation, -.language-markdown .token.list.punctuation, -.language-markdown .token.title.important > .token.punctuation { - color: hsl(355, 65%, 65%); -} - -/* General */ -.token.bold { - font-weight: bold; -} - -.token.comment, -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} - -.token.namespace { - opacity: 0.8; -} - -/* Plugin overrides */ -/* Selectors should have higher specificity than those in the plugins' default stylesheets */ - -/* Show Invisibles plugin overrides */ -.token.token.tab:not(:empty):before, -.token.token.cr:before, -.token.token.lf:before, -.token.token.space:before { - color: hsla(220, 14%, 71%, 0.15); - text-shadow: none; -} - -/* Toolbar plugin overrides */ -/* Space out all buttons and move them away from the right edge of the code block */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item { - margin-right: 0.4em; -} - -/* Styling the buttons */ -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span { - background: hsl(220, 13%, 26%); - color: hsl(220, 9%, 55%); - padding: 0.1em 0.4em; - border-radius: 0.3em; -} - -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > button:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > a:focus, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:hover, -div.code-toolbar > .toolbar.toolbar > .toolbar-item > span:focus { - background: hsl(220, 13%, 28%); - color: hsl(220, 14%, 71%); -} - -/* Line Highlight plugin overrides */ -/* The highlighted line itself */ -.line-highlight.line-highlight { - background: hsla(220, 100%, 80%, 0.04); -} - -/* Default line numbers in Line Highlight plugin */ -.line-highlight.line-highlight:before, -.line-highlight.line-highlight[data-end]:after { - background: hsl(220, 13%, 26%); - color: hsl(220, 14%, 71%); - padding: 0.1em 0.6em; - border-radius: 0.3em; - box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2); /* same as Toolbar plugin default */ -} - -/* Hovering over a linkable line number (in the gutter area) */ -/* Requires Line Numbers plugin as well */ -pre[id].linkable-line-numbers.linkable-line-numbers span.line-numbers-rows > span:hover:before { - background-color: hsla(220, 100%, 80%, 0.04); -} - -/* Line Numbers and Command Line plugins overrides */ -/* Line separating gutter from coding area */ -.line-numbers.line-numbers .line-numbers-rows, -.command-line .command-line-prompt { - border-right-color: hsla(220, 14%, 71%, 0.15); -} - -/* Stuff in the gutter */ -.line-numbers .line-numbers-rows > span:before, -.command-line .command-line-prompt > span:before { - color: hsl(220, 14%, 45%); -} - -/* Match Braces plugin overrides */ -/* Note: Outline colour is inherited from the braces */ -.rainbow-braces .token.token.punctuation.brace-level-1, -.rainbow-braces .token.token.punctuation.brace-level-5, -.rainbow-braces .token.token.punctuation.brace-level-9 { - color: hsl(355, 65%, 65%); -} - -.rainbow-braces .token.token.punctuation.brace-level-2, -.rainbow-braces .token.token.punctuation.brace-level-6, -.rainbow-braces .token.token.punctuation.brace-level-10 { - color: hsl(95, 38%, 62%); -} - -.rainbow-braces .token.token.punctuation.brace-level-3, -.rainbow-braces .token.token.punctuation.brace-level-7, -.rainbow-braces .token.token.punctuation.brace-level-11 { - color: hsl(207, 82%, 66%); -} - -.rainbow-braces .token.token.punctuation.brace-level-4, -.rainbow-braces .token.token.punctuation.brace-level-8, -.rainbow-braces .token.token.punctuation.brace-level-12 { - color: hsl(286, 60%, 67%); -} - -/* Diff Highlight plugin overrides */ -/* Taken from https://github.com/atom/github/blob/master/styles/variables.less */ -pre.diff-highlight > code .token.token.deleted:not(.prefix), -pre > code.diff-highlight .token.token.deleted:not(.prefix) { - background-color: hsla(353, 100%, 66%, 0.15); -} - -pre.diff-highlight > code .token.token.deleted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::-moz-selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .token.token.deleted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.deleted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.deleted:not(.prefix) *::selection { - background-color: hsla(353, 95%, 66%, 0.25); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix), -pre > code.diff-highlight .token.token.inserted:not(.prefix) { - background-color: hsla(137, 100%, 55%, 0.15); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix)::-moz-selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::-moz-selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::-moz-selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -pre.diff-highlight > code .token.token.inserted:not(.prefix)::selection, -pre.diff-highlight > code .token.token.inserted:not(.prefix) *::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix)::selection, -pre > code.diff-highlight .token.token.inserted:not(.prefix) *::selection { - background-color: hsla(135, 73%, 55%, 0.25); -} - -/* Previewers plugin overrides */ -/* Based on https://github.com/atom-community/atom-ide-datatip/blob/master/styles/atom-ide-datatips.less and https://github.com/atom/atom/blob/master/packages/one-dark-ui */ -/* Border around popup */ -.prism-previewer.prism-previewer:before, -.prism-previewer-gradient.prism-previewer-gradient div { - border-color: hsl(224, 13%, 17%); -} - -/* Angle and time should remain as circles and are hence not included */ -.prism-previewer-color.prism-previewer-color:before, -.prism-previewer-gradient.prism-previewer-gradient div, -.prism-previewer-easing.prism-previewer-easing:before { - border-radius: 0.3em; -} - -/* Triangles pointing to the code */ -.prism-previewer.prism-previewer:after { - border-top-color: hsl(224, 13%, 17%); -} - -.prism-previewer-flipped.prism-previewer-flipped.after { - border-bottom-color: hsl(224, 13%, 17%); -} - -/* Background colour within the popup */ -.prism-previewer-angle.prism-previewer-angle:before, -.prism-previewer-time.prism-previewer-time:before, -.prism-previewer-easing.prism-previewer-easing { - background: hsl(219, 13%, 22%); -} - -/* For angle, this is the positive area (eg. 90deg will display one quadrant in this colour) */ -/* For time, this is the alternate colour */ -.prism-previewer-angle.prism-previewer-angle circle, -.prism-previewer-time.prism-previewer-time circle { - stroke: hsl(220, 14%, 71%); - stroke-opacity: 1; -} - -/* Stroke colours of the handle, direction point, and vector itself */ -.prism-previewer-easing.prism-previewer-easing circle, -.prism-previewer-easing.prism-previewer-easing path, -.prism-previewer-easing.prism-previewer-easing line { - stroke: hsl(220, 14%, 71%); -} - -/* Fill colour of the handle */ -.prism-previewer-easing.prism-previewer-easing circle { - fill: transparent; -} diff --git a/src/routes/blog/this-blog/+page.svx b/src/routes/blog/this-blog/+page.svx index 4c58401..2fb2968 100644 --- a/src/routes/blog/this-blog/+page.svx +++ b/src/routes/blog/this-blog/+page.svx @@ -21,7 +21,7 @@ import CustomTabs from "./CustomTabs.svelte"
-```markdown +```svelte ### Пример статьи @@ -101,19 +101,19 @@ npm i -D mdsvex @mavrin/remark-typograf // svelte.config.js import adapter from "@sveltejs/adapter-auto"; import {vitePreprocess} from '@sveltejs/vite-plugin-svelte'; -import {mdsvex} from "mdsvex"; -import remarkTypograf from "@mavrin/remark-typograf"; +import {mdsvex} from "mdsvex"; // [!code ++] +import remarkTypograf from "@mavrin/remark-typograf"; // [!code ++] const config = { extensions: [ ".svelte", - ".svx" + ".svx" // [!code ++] ], preprocess: [ vitePreprocess(), - mdsvex({ - remarkPlugins: [remarkTypograf] - }) + mdsvex({ // [!code ++] + remarkPlugins: [remarkTypograf] // [!code ++] + }) // [!code ++] ], kit: { adapter: adapter() @@ -133,7 +133,7 @@ export default config; Помимо этого SVX поддерживает Frontmatter -- в начале файла напишем блок выделенный минусами. -```markdown +```yaml --- title: "Как сделан этот блог?" date: "2024-10-02" @@ -142,7 +142,7 @@ date: "2024-10-02" Теперь эти поля доступны как переменные как в документе, так и для экспорта внутри объекта `metadata`. -```markdown +```yaml --- title: "Как сделан этот блог?" date: "2024-10-02" @@ -175,7 +175,7 @@ export const load = async () => { А в файл `+page.svelte` используем переданный список. -```html +```svelte // src/routes/blog/+page.svelte