You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Is your feature request related to a problem? Please describe.
I'm using this great small library to syntax highlight yaml. I'm working with Vite. It worked OK for me during pnpm run dev but I found out after deployment, built with pnpm run build, the library was trying to dynamic import the language file. Since the build didn't include the dynamic import anymore (not sure how dev and built versions differ), it was 404'ing on the yaml.js since it wasn't in the bundle.
I found this issue that mentioned a workaround for vite, using a plugin to help with dynamic imports. I wanted to avoid that step.
In short, my workaround solution is like this:
// 🔥 1. import the syntax you need, use * as languageSyntax to import it and later use it// note: this is not using any special vite features!import*asyamlSyntaxfrom"../../node_modules/@speed-highlight/core/dist/languages/yaml";// 🔥 2. set language and the module syntax; the loadLanguage function has a bit of a misleading type; should also accept this moduleloadLanguage("yaml",yamlSyntaxasunknownasShjLanguage);
I think this is intended, and I think it's worth documenting a little more explicitly.
I have a full example below too, for future readers.
Source code example
importContentCopyIconfrom"@mui/icons-material/ContentCopy";import{Box,Button,useTheme}from"@mui/material";import{ShjLanguage,highlightText,loadLanguage,}from"@speed-highlight/core";importjsYamlfrom"js-yaml";import{useEffect,useState}from"react";importdarkThemefrom"../../node_modules/@speed-highlight/core/dist/themes/github-dark.css?inline";importlightThemefrom"../../node_modules/@speed-highlight/core/dist/themes/github-light.css?inline";// 🔥 1. import the syntax you need, use * as languageSyntax to import it and later use it// note: this is not using any special vite features!import*asyamlSyntaxfrom"../../node_modules/@speed-highlight/core/dist/languages/yaml";// 🔥 2. set language and the module syntax; the loadLanguage function has a bit of a misleading type; should also accept this moduleloadLanguage("yaml",yamlSyntaxasunknownasShjLanguage);interfaceYamlDisplayProps{yaml: string;}exportfunctionYamlDisplay({ yaml }: YamlDisplayProps){const[text,setText]=useState<string|null>(null);const[css,setCss]=useState<string|null>(null);consttheme=useTheme();constmode=theme.palette.mode;constcontent=yaml
? jsYaml.dump(JSON.parse(JSON.stringify(yaml)))
: "";useEffect(()=>{// 🔥 3. use highlightText, use the same key as beforehighlightText(content,"yaml",undefined,{hideLineNumbers: false,}).then((output)=>{setText(output);if(mode==="light"){setCss(lightTheme);}else{setCss(darkTheme);}});},[content,mode]);if(!yaml){return<p>noyamltodisplay</p>;}return(<>{css&&(<styletype="text/css"dangerouslySetInnerHTML={{__html: css}}/>)}<Boxsx={{position: "relative"}}><Boxsx={{position: "absolute",top: 0,right: 0,p: 2,}}><ButtonstartIcon={<ContentCopyIcon/>}onClick={()=>{navigator.clipboard.writeText(content);}}>Copy</Button></Box>{text&&(<pre><code><Boxcomponent="div"// 🔥 3. set the class name to match the languageclassName="shj-lang-yaml"// 🔥 4. set the text/html that was produced by the highlighterdangerouslySetInnerHTML={{__html: text}}/></code></pre>)}</Box></>);}
Describe the solution you'd like
I think the types could use an update to make it clearer at the typescript level level how to achieve this, and if the docs had an example of this it would also help too.
Describe alternatives you've considered
The alternative would have been to use the vite plugin mentioned in the issue.
Additional context
The text was updated successfully, but these errors were encountered:
Is your feature request related to a problem? Please describe.
I'm using this great small library to syntax highlight yaml. I'm working with Vite. It worked OK for me during
pnpm run dev
but I found out after deployment, built withpnpm run build
, the library was trying to dynamic import the language file. Since the build didn't include the dynamic import anymore (not sure how dev and built versions differ), it was 404'ing on theyaml.js
since it wasn't in the bundle.I found this issue that mentioned a workaround for vite, using a plugin to help with dynamic imports. I wanted to avoid that step.
In short, my workaround solution is like this:
I think this is intended, and I think it's worth documenting a little more explicitly.
I have a full example below too, for future readers.
Source code example
Describe the solution you'd like
I think the types could use an update to make it clearer at the typescript level level how to achieve this, and if the docs had an example of this it would also help too.
Describe alternatives you've considered
The alternative would have been to use the vite plugin mentioned in the issue.
Additional context
The text was updated successfully, but these errors were encountered: