react-shiki/dist/index.js

Syntax highlighter component for react using shiki

import{useEffect as z,useMemo as b,useRef as D,useState as F}from"react";import B from"html-react-parser";import{getSingletonHighlighter as V}from"shiki";import{visit as w}from"unist-util-visit";import{bundledLanguages as M,isSpecialLang as A}from"shiki";function N(){return e=>{w(e,"element",(i,o,t)=>{i.tagName==="code"&&t.tagName!=="pre"&&(i.properties.inline=!0)})}}var P=e=>!(e.children||[]).filter(o=>o.type==="text").map(o=>o.value).join("").includes(`
`),k={pre(e){return"properties"in e&&(e.properties.tabindex="-1"),e}},R=(e,i,o)=>{let t=Date.now();clearTimeout(i.current.timeoutId);let r=Math.max(0,i.current.nextAllowedTime-t);i.current.timeoutId=setTimeout(()=>{e().catch(console.error),i.current.nextAllowedTime=t+o},r)},p=(e,i=[])=>{let o=new Set(Object.keys(M).map(a=>a.toLowerCase()));if(e==null||typeof e=="string"&&!e.trim())return{languageId:"plaintext",displayLanguageId:"plaintext",langsToLoad:void 0};if(typeof e=="object")return{languageId:e.name,displayLanguageId:e.name||null,langsToLoad:e};let t=e.toLowerCase(),r=a=>a?.toLowerCase()===t,n=i.find(a=>r(a.name)||r(a.scopeName)||r(a.scopeName?.split(".").pop())||a.aliases?.some(r)||a.fileTypes?.some(r));return n?{languageId:n.name||e,displayLanguageId:e,langsToLoad:n}:(o.has(t)||A(t))&&!n?{languageId:e,displayLanguageId:e,langsToLoad:e}:{languageId:"plaintext",displayLanguageId:e,langsToLoad:void 0}};function v(e){let i=typeof e=="object"&&"tokenColors"in e&&Array.isArray(e.tokenColors),o=typeof e=="object"&&e!==null&&!i,t=typeof e=="object"&&e!==null&&!i&&Object.entries(e).some(([r,n])=>r&&n&&r.trim()!==""&&n!==""&&(typeof n=="string"||i));return o?{isMultiTheme:!0,themeId:t?`multi-${Object.values(e).map(n=>(typeof n=="string"?n:n?.name)||"custom").sort().join("-")}`:"multi-default",multiTheme:t?e:null,themesToLoad:t?Object.values(e):[]}:{isMultiTheme:!1,themeId:typeof e=="string"?e:e?.name||"custom",singleTheme:e,themesToLoad:[e]}}var I={light:"github-light",dark:"github-dark"},H=(e,i,o,t={})=>{let[r,n]=F(null),a=t.customLanguages?Array.isArray(t.customLanguages)?t.customLanguages:[t.customLanguages]:[],g=a.map(l=>l.name||"").sort().join("-"),m=b(()=>[k,...t.transformers||[]],[t.transformers]),{isMultiTheme:c,themeId:f,multiTheme:T,singleTheme:y,themesToLoad:L}=b(()=>v(o),[o]),{languageId:s,langsToLoad:x}=b(()=>p(i,a),[i,g]),d=D({nextAllowedTime:0,timeoutId:void 0}),u=()=>{let{defaultColor:l,cssVariablePrefix:h}=t,S={lang:s,transformers:m},C=c?{themes:T||I,defaultColor:l,cssVariablePrefix:h}:{theme:y||I.dark};return{...S,...C}};return z(()=>{let l=!0,h=async()=>{if(!s)return;let S=await V({langs:[x],themes:L}),C=u(),E=S.codeToHtml(e,C);l&&n(B(E))};return t.delay?R(h,d,t.delay):h().catch(console.error),()=>{l=!1,clearTimeout(d.current.timeoutId)}},[e,s,f,g,m,t.delay,t.defaultColor,t.cssVariablePrefix]),r};function O(e,{insertAt:i}={}){if(!e||typeof document>"u")return;let o=document.head||document.getElementsByTagName("head")[0],t=document.createElement("style");t.type="text/css",i==="top"&&o.firstChild?o.insertBefore(t,o.firstChild):o.appendChild(t),t.styleSheet?t.styleSheet.cssText=e:t.appendChild(document.createTextNode(e))}O(`.relative{position:relative}.defaultStyles pre{overflow:auto;border-radius:.5rem;padding:1.25rem 1.5rem}.languageLabel{position:absolute;right:.75rem;top:.5rem;font-family:monospace;font-size:.75rem;letter-spacing:-.05em;color:#6b7280d9}
`);import{clsx as j}from"clsx";import{jsx as U,jsxs as $}from"react/jsx-runtime";var _=({language:e,theme:i,delay:o,transformers:t,defaultColor:r,cssVariablePrefix:n,addDefaultStyles:a=!0,style:g,langStyle:m,className:c,langClassName:f,showLanguage:T=!0,children:y,as:L="pre",customLanguages:s})=>{let x={delay:o,transformers:t,customLanguages:s,defaultColor:r,cssVariablePrefix:n},d=s?Array.isArray(s)?s:[s]:[],{displayLanguageId:u}=p(e,d),l=H(y,e,i,x);return $(L,{"data-testid":"shiki-container",className:j("relative","not-prose",a&&"defaultStyles",c),style:g,id:"shiki-container",children:[T&&u?U("span",{className:j("languageLabel",f),style:m,id:"language-label",children:u}):null,l]})};export{_ as default,P as isInlineCode,N as rehypeInlineCodeProperty,H as useShikiHighlighter};
//# sourceMappingURL=index.js.map