syntax hightlighting

This commit is contained in:
Djeeberjr 2022-05-11 00:38:41 +02:00
parent 774ead0ed0
commit e9df76a681
4 changed files with 479 additions and 21 deletions

32
package-lock.json generated
View File

@ -8,7 +8,8 @@
"name": "s3-share", "name": "s3-share",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"sirv-cli": "^2.0.0" "sirv-cli": "^2.0.0",
"svelte-highlight": "^6.0.1"
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-commonjs": "^17.0.0",
@ -587,6 +588,14 @@
"node": ">=4" "node": ">=4"
} }
}, },
"node_modules/highlight.js": {
"version": "11.5.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz",
"integrity": "sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw==",
"engines": {
"node": ">=12.0.0"
}
},
"node_modules/import-fresh": { "node_modules/import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -1375,6 +1384,14 @@
"svelte": "^3.24.0" "svelte": "^3.24.0"
} }
}, },
"node_modules/svelte-highlight": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.0.1.tgz",
"integrity": "sha512-FOe0ePVoP59VO7e0cAXZ7OMooXEuC/lh0FK4Zr++3qRzNWm14a/ljICBTGZXqD+/l3mAIB5EzkVu3Nc/TZEyuA==",
"dependencies": {
"highlight.js": "11.5.0"
}
},
"node_modules/svelte-preprocess": { "node_modules/svelte-preprocess": {
"version": "4.10.6", "version": "4.10.6",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz",
@ -2004,6 +2021,11 @@
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
"dev": true "dev": true
}, },
"highlight.js": {
"version": "11.5.0",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.5.0.tgz",
"integrity": "sha512-SM6WDj5/C+VfIY8pZ6yW6Xa0Fm1tniYVYWYW1Q/DcMnISZFrC3aQAZZZFAAZtybKNrGId3p/DNbFTtcTXXgYBw=="
},
"import-fresh": { "import-fresh": {
"version": "3.3.0", "version": "3.3.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@ -2585,6 +2607,14 @@
"typescript": "*" "typescript": "*"
} }
}, },
"svelte-highlight": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-6.0.1.tgz",
"integrity": "sha512-FOe0ePVoP59VO7e0cAXZ7OMooXEuC/lh0FK4Zr++3qRzNWm14a/ljICBTGZXqD+/l3mAIB5EzkVu3Nc/TZEyuA==",
"requires": {
"highlight.js": "11.5.0"
}
},
"svelte-preprocess": { "svelte-preprocess": {
"version": "4.10.6", "version": "4.10.6",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz", "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-4.10.6.tgz",

View File

@ -11,6 +11,8 @@
"devDependencies": { "devDependencies": {
"@rollup/plugin-commonjs": "^17.0.0", "@rollup/plugin-commonjs": "^17.0.0",
"@rollup/plugin-node-resolve": "^11.0.0", "@rollup/plugin-node-resolve": "^11.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"@tsconfig/svelte": "^2.0.0",
"rollup": "^2.3.4", "rollup": "^2.3.4",
"rollup-plugin-css-only": "^3.1.0", "rollup-plugin-css-only": "^3.1.0",
"rollup-plugin-livereload": "^2.0.0", "rollup-plugin-livereload": "^2.0.0",
@ -19,12 +21,11 @@
"svelte": "^3.0.0", "svelte": "^3.0.0",
"svelte-check": "^2.0.0", "svelte-check": "^2.0.0",
"svelte-preprocess": "^4.0.0", "svelte-preprocess": "^4.0.0",
"@rollup/plugin-typescript": "^8.0.0",
"typescript": "^4.0.0",
"tslib": "^2.0.0", "tslib": "^2.0.0",
"@tsconfig/svelte": "^2.0.0" "typescript": "^4.0.0"
}, },
"dependencies": { "dependencies": {
"sirv-cli": "^2.0.0" "sirv-cli": "^2.0.0",
"svelte-highlight": "^6.0.1"
} }
} }

View File

@ -1,31 +1,38 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import Highlight from "svelte-highlight";
import highlightStyle from "svelte-highlight/styles/vs2015";
import getLangFromShare from "./getLangFromShare";
export let contentType: string; export let contentType: string;
export let filename: string; export let filename: string;
export let slug: string; export let slug: string;
let content = ""; async function loadShare() {
onMount(async () => {
const res = await fetch(`/s/${slug}`); const res = await fetch(`/s/${slug}`);
content = await res.text(); return await res.text();
}); }
async function loadLang() {
return await getLangFromShare(contentType,filename).then(v => v.default);
}
</script> </script>
<svelte:head>
{@html highlightStyle}
</svelte:head>
<div class="container" > <div class="container" >
<header>{filename}</header> <header>{filename}</header>
<pre><code>{ content }</code></pre>
{#await Promise.all([loadShare(), loadLang()])}
Loading...
{:then v}
<Highlight language={v[1]} code={v[0]} />
{/await}
</div> </div>
<style> <style>
code{
color: #c9d1d9;
}
pre{
padding: 1rem;
}
header{ header{
font-size: 1.5rem; font-size: 1.5rem;
font-weight: bold; font-weight: bold;

View File

@ -0,0 +1,420 @@
export default function getLangFromShare(contentType: string, filename: string) {
switch (contentType) {
case "application/json":
case "application/ld+json":
return import("svelte-highlight/languages/json");
case "application/xhtml+xml":
case "application/xml":
return import("svelte-highlight/languages/xml");
}
const ext = filename.split(".").pop().toLowerCase();
switch (ext) {
// case "":
// return import("svelte-highlight/languages/1c");
// case "":
// return import("svelte-highlight/languages/abnf");
// case "":
// return import("svelte-highlight/languages/accesslog");
case "actionscript":
return import("svelte-highlight/languages/actionscript");
case "ada":
return import("svelte-highlight/languages/ada");
// case "":
// return import("svelte-highlight/languages/angelscript");
// case "":
// return import("svelte-highlight/languages/apache");
// case "":
// return import("svelte-highlight/languages/applescript");
// case "":
// return import("svelte-highlight/languages/arcade");
// case "ino":
// return import("svelte-highlight/languages/arduino");
// case "":
// return import("svelte-highlight/languages/armasm");
// case "":
// return import("svelte-highlight/languages/asciidoc");
// case "":
// return import("svelte-highlight/languages/aspectj");
case "ahk":
return import("svelte-highlight/languages/autohotkey");
// case "":
// return import("svelte-highlight/languages/autoit");
// case "":
// return import("svelte-highlight/languages/avrasm");
// case "":
// return import("svelte-highlight/languages/awk");
// case "":
// return import("svelte-highlight/languages/axapta");
case "sh":
return import("svelte-highlight/languages/bash");
// case "":
// return import("svelte-highlight/languages/basic");
// case "":
// return import("svelte-highlight/languages/bnf");
case "bf":
return import("svelte-highlight/languages/brainfuck");
case "c":
case "h":
return import("svelte-highlight/languages/c");
// case "":
// return import("svelte-highlight/languages/cal");
// case "":
// return import("svelte-highlight/languages/capnproto");
// case "":
// return import("svelte-highlight/languages/ceylon");
// case "":
// return import("svelte-highlight/languages/clean");
// case "":
// return import("svelte-highlight/languages/clojure-repl");
case "clj":
case "cljs":
case "cljc":
case ".edn":
return import("svelte-highlight/languages/clojure");
case "cmake":
return import("svelte-highlight/languages/cmake");
case "coffee":
case "litcoffee":
return import("svelte-highlight/languages/coffeescript");
// case "":
// return import("svelte-highlight/languages/coq");
// case "":
// return import("svelte-highlight/languages/cos");
case "cpp":
return import("svelte-highlight/languages/cpp");
// case "":
// return import("svelte-highlight/languages/crmsh");
// case "":
// return import("svelte-highlight/languages/crystal");
case "cs":
return import("svelte-highlight/languages/csharp");
// case "":
// return import("svelte-highlight/languages/csp");
case "css":
return import("svelte-highlight/languages/css");
// case "":
// return import("svelte-highlight/languages/d");
case "dart":
return import("svelte-highlight/languages/dart");
// case "":
// return import("svelte-highlight/languages/delphi");
case "diff":
return import("svelte-highlight/languages/diff");
// case "":
// return import("svelte-highlight/languages/django");
// case "":
// return import("svelte-highlight/languages/dns");
// case "":
// return import("svelte-highlight/languages/dos");
// case "":
// return import("svelte-highlight/languages/dsconfig");
// case "":
// return import("svelte-highlight/languages/dts");
// case "":
// return import("svelte-highlight/languages/dust");
// case "":
// return import("svelte-highlight/languages/ebnf");
case "ex":
case "exs":
return import("svelte-highlight/languages/elixir");
case "elm":
return import("svelte-highlight/languages/elm");
// case "":
// return import("svelte-highlight/languages/erb");
// case "":
// return import("svelte-highlight/languages/erlang-repl");
// case "":
// return import("svelte-highlight/languages/erlang");
// case "":
// return import("svelte-highlight/languages/excel");
// case "":
// return import("svelte-highlight/languages/fix");
// case "":
// return import("svelte-highlight/languages/flix");
// case "":
// return import("svelte-highlight/languages/fortran");
case "fs":
case "fsi":
case "fsx":
case "fsscript":
return import("svelte-highlight/languages/fsharp");
// case "":
// return import("svelte-highlight/languages/gams");
// case "":
// return import("svelte-highlight/languages/gauss");
// case "":
// return import("svelte-highlight/languages/gcode");
// case "":
// return import("svelte-highlight/languages/gherkin");
// case "":
// return import("svelte-highlight/languages/glsl");
// case "":
// return import("svelte-highlight/languages/gml");
case "go":
return import("svelte-highlight/languages/go");
// case "":
// return import("svelte-highlight/languages/golo");
// case "":
// return import("svelte-highlight/languages/gradle");
// case "":
// return import("svelte-highlight/languages/graphql");
// case "":
// return import("svelte-highlight/languages/groovy");
// case "":
// return import("svelte-highlight/languages/haml");
// case "":
// return import("svelte-highlight/languages/handlebars");
case "hs":
case "lhs":
return import("svelte-highlight/languages/haskell");
case "hx":
return import("svelte-highlight/languages/haxe");
// case "":
// return import("svelte-highlight/languages/hsp");
// case "":
// return import("svelte-highlight/languages/http");
// case "":
// return import("svelte-highlight/languages/hy");
// case "":
// return import("svelte-highlight/languages/inform7");
case "ini":
return import("svelte-highlight/languages/ini");
// case "":
// return import("svelte-highlight/languages/irpf90");
// case "":
// return import("svelte-highlight/languages/isbl");
case "java":
return import("svelte-highlight/languages/java");
case "js":
return import("svelte-highlight/languages/javascript");
// case "":
// return import("svelte-highlight/languages/jboss-cli");
case "json":
return import("svelte-highlight/languages/json");
// case "":
// return import("svelte-highlight/languages/julia-repl");
// case "":
// return import("svelte-highlight/languages/julia");
// case "":
// return import("svelte-highlight/languages/kotlin");
// case "":
// return import("svelte-highlight/languages/lasso");
// case "":
// return import("svelte-highlight/languages/latex");
// case "":
// return import("svelte-highlight/languages/ldif");
// case "":
// return import("svelte-highlight/languages/leaf");
// case "":
// return import("svelte-highlight/languages/less");
// case "":
// return import("svelte-highlight/languages/lisp");
// case "":
// return import("svelte-highlight/languages/livecodeserver");
// case "":
// return import("svelte-highlight/languages/livescript");
// case "":
// return import("svelte-highlight/languages/llvm");
// case "":
// return import("svelte-highlight/languages/lsl");
case "lua":
return import("svelte-highlight/languages/lua");
case "md":
return import("svelte-highlight/languages/markdown");
// case "":
// return import("svelte-highlight/languages/mathematica");
// case "":
// return import("svelte-highlight/languages/matlab");
// case "":
// return import("svelte-highlight/languages/maxima");
// case "":
// return import("svelte-highlight/languages/mel");
// case "":
// return import("svelte-highlight/languages/mercury");
// case "":
// return import("svelte-highlight/languages/mipsasm");
// case "":
// return import("svelte-highlight/languages/mizar");
// case "":
// return import("svelte-highlight/languages/mojolicious");
// case "":
// return import("svelte-highlight/languages/monkey");
// case "":
// return import("svelte-highlight/languages/moonscript");
// case "":
// return import("svelte-highlight/languages/n1ql");
// case "":
// return import("svelte-highlight/languages/nestedtext");
// case "":
// return import("svelte-highlight/languages/nginx");
// case "":
// return import("svelte-highlight/languages/nim");
// case "":
// return import("svelte-highlight/languages/nix");
// case "":
// return import("svelte-highlight/languages/node-repl");
// case "":
// return import("svelte-highlight/languages/nsis");
case "h":
case "m":
case "mm":
return import("svelte-highlight/languages/objectivec");
// case "":
// return import("svelte-highlight/languages/ocaml");
// case "":
// return import("svelte-highlight/languages/openscad");
// case "":
// return import("svelte-highlight/languages/oxygene");
// case "":
// return import("svelte-highlight/languages/parser3");
case "plx":
case "pl":
case "pm":
case "xs":
return import("svelte-highlight/languages/perl");
// case "":
// return import("svelte-highlight/languages/pf");
// case "":
// return import("svelte-highlight/languages/pgsql");
// case "":
// return import("svelte-highlight/languages/php-template");
case "php":
return import("svelte-highlight/languages/php");
case "txt":
return import("svelte-highlight/languages/plaintext");
// case "":
// return import("svelte-highlight/languages/pony");
case "ps1":
return import("svelte-highlight/languages/powershell");
// case "":
// return import("svelte-highlight/languages/processing");
// case "":
// return import("svelte-highlight/languages/profile");
// case "":
// return import("svelte-highlight/languages/prolog");
// case "":
// return import("svelte-highlight/languages/properties");
case "protobuf":
return import("svelte-highlight/languages/protobuf");
// case "":
// return import("svelte-highlight/languages/puppet");
// case "":
// return import("svelte-highlight/languages/purebasic");
// case "":
// return import("svelte-highlight/languages/python-repl");
case "py":
return import("svelte-highlight/languages/python");
// case "":
// return import("svelte-highlight/languages/q");
// case "":
// return import("svelte-highlight/languages/qml");
case "r":
return import("svelte-highlight/languages/r");
// case "":
// return import("svelte-highlight/languages/reasonml");
// case "":
// return import("svelte-highlight/languages/rib");
// case "":
// return import("svelte-highlight/languages/roboconf");
// case "":
// return import("svelte-highlight/languages/routeros");
// case "":
// return import("svelte-highlight/languages/rsl");
case "rb":
return import("svelte-highlight/languages/ruby");
// case "":
// return import("svelte-highlight/languages/ruleslanguage");
case "rs":
return import("svelte-highlight/languages/rust");
// case "":
// return import("svelte-highlight/languages/sas");
// case "":
// return import("svelte-highlight/languages/scala");
// case "":
// return import("svelte-highlight/languages/scheme");
// case "":
// return import("svelte-highlight/languages/scilab");
case "scss":
return import("svelte-highlight/languages/scss");
case "sh":
return import("svelte-highlight/languages/shell");
// case "":
// return import("svelte-highlight/languages/smali");
// case "":
// return import("svelte-highlight/languages/smalltalk");
// case "":
// return import("svelte-highlight/languages/sml");
case "sqf":
return import("svelte-highlight/languages/sqf");
case "sql":
return import("svelte-highlight/languages/sql");
// case "":
// return import("svelte-highlight/languages/stan");
// case "":
// return import("svelte-highlight/languages/stata");
// case "":
// return import("svelte-highlight/languages/step21");
// case "":
// return import("svelte-highlight/languages/stylus");
// case "":
// return import("svelte-highlight/languages/subunit");
case "swift":
return import("svelte-highlight/languages/swift");
// case "":
// return import("svelte-highlight/languages/taggerscript");
// case "":
// return import("svelte-highlight/languages/tap");
// case "":
// return import("svelte-highlight/languages/tcl");
// case "":
// return import("svelte-highlight/languages/thrift");
// case "":
// return import("svelte-highlight/languages/tp");
// case "":
// return import("svelte-highlight/languages/twig");
case "ts":
return import("svelte-highlight/languages/typescript");
// case "":
// return import("svelte-highlight/languages/vala");
// case "":
// return import("svelte-highlight/languages/vbnet");
// case "":
// return import("svelte-highlight/languages/vbscript-html");
case "vbs":
return import("svelte-highlight/languages/vbscript");
// case "":
// return import("svelte-highlight/languages/verilog");
// case "":
// return import("svelte-highlight/languages/vhdl");
// case "":
// return import("svelte-highlight/languages/vim");
// case "":
// return import("svelte-highlight/languages/wasm");
// case "":
// return import("svelte-highlight/languages/wren");
// case "":
// return import("svelte-highlight/languages/x86asm");
// case "":
// return import("svelte-highlight/languages/xl");
// case "":
// return import("svelte-highlight/languages/xml");
// case "":
// return import("svelte-highlight/languages/xquery");
case "yml":
case "yaml":
return import("svelte-highlight/languages/yaml");
// case "":
// return import("svelte-highlight/languages/zephir");
}
switch (filename) {
case "Dockerfile":
return import("svelte-highlight/languages/dockerfile");
case "Makefile":
return import("svelte-highlight/languages/makefile");
}
return import("svelte-highlight/languages/plaintext");
}