[{"_1":2,"_212":-5,"_213":-5},"loaderData",{"_3":4,"_91":92,"_199":200,"_211":-5},"root",{"_5":6,"_32":33,"_58":59,"_89":90},"ctx",{"_7":8,"_18":19,"_20":-5,"_21":22,"_23":24,"_25":26,"_27":26,"_28":29,"_30":31},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"sessionClaims","sessionId","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","environmentVariableKeys",[],"user","preferences_keybindings","default","preferences_theme","light","preferences_fixers",false,"preferences_copilot","preferences_model","claude-3-5-haiku-20241022","notification_count",0,"ENV",{"_34":35,"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","2f1ccb131a13aa73adf80ad81406989cf85fa22f","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","API_URL","https://api.val.town","WORKER_FINGERPRINT","d0746fd0512e0614e3f717607f0da4cd","clerkState",{"_60":61},"__internal_clerk_state",{"_62":63,"_64":43,"_65":66,"_67":66,"_68":26,"_69":66,"_70":66,"_71":66,"_72":66,"_73":66,"_74":66,"_75":66,"_76":66,"_77":78,"_87":26,"_88":26},"__clerk_ssr_state",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__signInForceRedirectUrl","__signUpForceRedirectUrl","__signInFallbackRedirectUrl","__signUpFallbackRedirectUrl","__clerk_debug",{"_79":26,"_80":66,"_81":82,"_83":66,"_84":43,"_85":26,"_86":66},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","remixVersion",2,"routes/_app.v.$handle.$name",{"_93":94,"_95":96,"_94":97,"_194":-5,"_195":-5,"_196":197,"_129":130,"_137":138,"_100":101,"_98":99,"_118":-7,"_50":51,"_198":26},"type","val","author","7c0d1cad-83fd-4c0e-b722-56e2dba6627c",{"_98":99,"_95":96,"_100":101,"_102":-5,"_103":-5,"_104":105,"_106":107,"_108":109,"_110":111,"_112":26,"_113":111,"_114":115,"_116":117,"_118":119,"_120":26,"_121":31,"_122":31,"_123":31,"_124":31,"_125":31,"_126":31,"_127":-5,"_20":128,"_133":-5,"_134":-7,"_135":136,"_137":138,"_139":140},"name","highlight","valNameId","13a9b540-812b-11ef-9308-de64eea55b61","parentFolderId","isOwned","privacy","public","readme","# Highlight\n\nThis val exposes and endpoint that you can post code to and get back syntax highlighted\nhtml via [Shiki](https://shiki.style/). Shiki does server side highlighting, so it's \nperfect for val.town. You can switch themes by providing `?theme=` and specify\nthe language via `?lang=`\n\n## Example\n\nYou can play with a working example [here](https://www.val.town/v/just_be/highlightExample). \n\n```ts\nconst res = await fetch(`https://just_be-highlight.web.val.run?lang=${lang}&theme=${theme}`, {\n method: \"POST\",\n body: code,\n});\n\nconsole.log(await res.text())\n```\n\n## Why?\n\nI want to add syntax highlighting to my blog soon and I'm \nexperimenting with what it mean to offload parts of my rendering\nto val.town (behind a content-addressible cache, of course).","valType","http","currentVersion","3467db30-838e-11ef-88f4-de64eea55b61","legacyPrivate","id","code","import { createHighlighterCore } from \"npm:shiki/core\";\nimport { createOnigurumaEngine } from \"npm:shiki/engine/oniguruma\";\nimport { bundledLanguagesInfo, type DynamicImportLanguageRegistration } from \"npm:shiki/langs\";\nimport { bundledThemesInfo, type DynamicImportThemeRegistration } from \"npm:shiki/themes\";\nimport shikiWasm from \"npm:shiki/wasm\";\n\ninterface Theme {\n id: string;\n displayName: string;\n type: \"dark\" | \"light\";\n import: () => DynamicImportThemeRegistration;\n}\ntype ThemeMap = Record;\n\nconst themes: ThemeMap = bundledThemesInfo.reduce((themes: ThemeMap, theme: Theme) => {\n themes[theme.id] = theme;\n return themes;\n}, {});\n\ninterface Lang {\n id: string;\n name: string;\n aliases?: string[];\n import: () => DynamicImportLanguageRegistration;\n}\ntype LangMap = Record;\n\nconst langs: LangMap = bundledLanguagesInfo.reduce((langs: LangMap, lang: Lang) => {\n langs[lang.id] = lang;\n for (const alias of lang.aliases ?? []) {\n langs[alias] = lang;\n }\n return langs;\n}, {});\n\nconst highlighter = await createHighlighterCore({\n // `shiki/wasm` contains the wasm binary inlined as base64 string.\n engine: createOnigurumaEngine(shikiWasm),\n});\n\nexport default async function(req: Request): Promise {\n if (req.method !== \"POST\") return new Response(null, { status: 405 });\n const { searchParams } = new URL(req.url);\n const theme = searchParams.get(\"theme\") ?? \"nord\";\n const lang = searchParams.get(\"lang\");\n const code = await req.text();\n\n if (!code) {\n return new Response(\"No code to highlight\", { status: 400 });\n }\n\n if (!(theme in themes)) {\n return new Response(\"unknown theme\", { status: 422 });\n }\n\n if (!lang) {\n return new Response(\"lang param missing but required\", { status: 400 });\n }\n if (!(lang in langs)) {\n return new Response(\"unknown lang\", { status: 422 });\n }\n\n await Promise.all([highlighter.loadTheme(themes[theme].import()), highlighter.loadLanguage(langs[lang].import())]);\n\n return new Response(\n highlighter.codeToHtml(code, {\n lang,\n theme,\n transformers: [\n {\n pre(node: any) {\n node.properties[\"data-lang\"] = lang;\n },\n },\n ],\n }),\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}","createdAt",["D",1728183225956],"version",13,"currentUserHasLiked","likeCount","forkCount","referenceCount","dependencyCount","commentCount","prCount","mergedPr",{"_129":130,"_131":132},"handle","justbe","profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2F2YXRhcnMuZ2l0aHVidXNlcmNvbnRlbnQuY29tL3UvMzA4NzIyNT92PTQiLCJzIjoiODRqbjJSZG5jOWkyNUgrUXJIU0dRUWZnQmRrQ01LY2NxUTBUMm5nTEVQOCJ9","forkedVal","interval","slug","justbe/highlight","description","Highlight This val exposes and endpoint that you can post code to and get back syntax highlighted\nhtml via Shiki . Shiki does server side highlighting, so it's\nperfect for val.town. You can switch themes by providing ?theme= and specify\nthe language via ?lang= Example You can play with a working example here . const res = await fetch(`https://just_be-highlight.web.val.run?lang=${lang}&theme=${theme}`, {\n method: \"POST\",\n body: code,\n});\n\nconsole.log(await res.text()) Why? I want to add syntax highlighting to my blog soon and I'm\nexperimenting with what it mean to offload parts of my rendering\nto val.town (behind a content-addressible cache, of course).","versions",[141,144,148,152,156,160,164,168,172,176,180,184,187,191],{"_118":119,"_142":-5,"_116":143,"_113":111},"prId",["D",1728183225956],{"_118":145,"_142":-5,"_116":146,"_113":147},12,["D",1728183177979],"17cf4fda-838e-11ef-b1d9-de64eea55b61",{"_118":149,"_142":-5,"_116":150,"_113":151},11,["D",1728183078354],"dc6d96a4-838d-11ef-9c25-de64eea55b61",{"_118":153,"_142":-5,"_116":154,"_113":155},10,["D",1728183009743],"b3885814-838d-11ef-adf4-de64eea55b61",{"_118":157,"_142":-5,"_116":158,"_113":159},9,["D",1728082741299],"3ee2a7a6-82a4-11ef-ba99-de64eea55b61",{"_118":161,"_142":-5,"_116":162,"_113":163},8,["D",1728082625378],"f9c9f520-82a3-11ef-84a8-de64eea55b61",{"_118":165,"_142":-5,"_116":166,"_113":167},7,["D",1727927851106],"9d223346-813b-11ef-8101-de64eea55b61",{"_118":169,"_142":-5,"_116":170,"_113":171},6,["D",1727927000493],"a220e59c-8139-11ef-98cc-de64eea55b61",{"_118":173,"_142":-5,"_116":174,"_113":175},5,["D",1727926619194],"bedb3cb0-8138-11ef-adad-de64eea55b61",{"_118":177,"_142":-5,"_116":178,"_113":179},4,["D",1727926597375],"b1da2b3e-8138-11ef-8506-de64eea55b61",{"_118":181,"_142":-5,"_116":182,"_113":183},3,["D",1727926458370],"5eff9570-8138-11ef-8244-de64eea55b61",{"_118":90,"_142":-5,"_116":185,"_113":186},["D",1727923010694],"5805d75a-8130-11ef-ad61-de64eea55b61",{"_118":188,"_142":-5,"_116":189,"_113":190},1,["D",1727923005280],"54cbdcf6-8130-11ef-9438-de64eea55b61",{"_118":31,"_142":-5,"_116":192,"_113":193},["D",1727920748540],"13ac89f0-812b-11ef-9308-de64eea55b61","recentThread","breadcrumbs","comments",[],"isOwner","routes/_app.v.$handle.$name.versions.$(version)",{"_93":201,"_202":203,"_94":204},"single","redirect","/v/justbe/highlight/versions",{"_113":159,"_114":205,"_118":157,"_116":206,"_207":99,"_100":101,"_108":109,"_129":130,"_11":96,"_208":-5,"_209":-5,"_210":-5,"_198":26,"_135":136},"import { createHighlighterCore } from \"npm:shiki/core\";\nimport { createOnigurumaEngine } from \"npm:shiki/engine/oniguruma\";\nimport { bundledLanguagesInfo, type DynamicImportLanguageRegistration } from \"npm:shiki/langs\";\nimport { bundledThemesInfo, type DynamicImportThemeRegistration } from \"npm:shiki/themes\";\nimport shikiWasm from \"npm:shiki/wasm\";\n\ninterface Theme {\n id: string;\n displayName: string;\n type: \"dark\" | \"light\";\n import: () => DynamicImportThemeRegistration;\n}\ntype ThemeMap = Record;\n\nconst themes: ThemeMap = bundledThemesInfo.reduce((themes: ThemeMap, theme: Theme) => {\n themes[theme.id] = theme;\n return themes;\n}, {});\n\ninterface Lang {\n id: string;\n name: string;\n aliases?: string[];\n import: () => DynamicImportLanguageRegistration;\n}\ntype LangMap = Record;\n\nconst langs: LangMap = bundledLanguagesInfo.reduce((langs: LangMap, lang: Lang) => {\n langs[lang.id] = lang;\n for (const alias of lang.aliases ?? []) {\n langs[alias] = lang;\n }\n return langs;\n}, {});\n\nconst highlighter = await createHighlighterCore({\n // `shiki/wasm` contains the wasm binary inlined as base64 string.\n engine: createOnigurumaEngine(shikiWasm),\n});\n\nexport default async function(req: Request): Promise {\n if (req.method !== \"POST\") return new Response(null, { status: 405 });\n const { searchParams } = new URL(req.url);\n const theme = searchParams.get(\"theme\") ?? \"nord\";\n const lang = searchParams.get(\"lang\");\n const code = await req.text();\n\n if (!code) {\n return new Response(\"No code to highlight\", { status: 400 });\n }\n\n if (!(theme in themes)) {\n return new Response(\"unknown theme\", { status: 422 });\n }\n\n if (!lang) {\n return new Response(\"lang param missing but required\", { status: 400 });\n }\n if (!(lang in langs)) {\n return new Response(\"unknown lang\", { status: 422 });\n }\n\n await Promise.all([highlighter.loadTheme(themes[theme].import()), highlighter.loadLanguage(langs[lang].import())]);\n\n return new Response(\n highlighter.codeToHtml(code, {\n lang,\n theme,\n }),\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}",["D",1728082741299],"valName","deletedAt","messageId","threadId","routes/_app","actionData","errors"]

highlight

Version 9