🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-shiki

Package Overview
Dependencies
Maintainers
1
Versions
16
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-shiki - npm Package Compare versions

Comparing version

0.5.3
to
0.6.0

7

dist/index.d.ts
import { ReactNode } from 'react';
import { LanguageRegistration as LanguageRegistration$1, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptionsCommon } from 'shiki';
import { LanguageRegistration as LanguageRegistration$1, StringLiteralUnion, BundledLanguage, SpecialLanguage, ThemeRegistrationAny, BundledTheme, CodeOptionsMultipleThemes, CodeToHastOptions } from 'shiki';
import { Element as Element$1 } from 'hast';

@@ -90,4 +90,5 @@

* Configuration options for the syntax highlighter
* Extends CodeToHastOptions to allow passing any Shiki options directly
*/
interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Pick<CodeToHastOptionsCommon, 'transformers'> {
interface HighlighterOptions extends ReactShikiOptions, Pick<CodeOptionsMultipleThemes<BundledTheme>, 'defaultColor' | 'cssVariablePrefix'>, Omit<CodeToHastOptions, 'lang' | 'theme' | 'themes'> {
}

@@ -235,4 +236,4 @@

*/
declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, }: ShikiHighlighterProps) => React.ReactElement;
declare const ShikiHighlighter: ({ language, theme, delay, transformers, defaultColor, cssVariablePrefix, addDefaultStyles, style, langStyle, className, langClassName, showLanguage, children: code, as: Element, customLanguages, ...shikiOptions }: ShikiHighlighterProps) => React.ReactElement;
export { type Element, type HighlighterOptions, type Language, type ShikiHighlighterProps, type Theme, type Themes, ShikiHighlighter as default, isInlineCode, rehypeInlineCodeProperty, useShikiHighlighter };

6

dist/index.js

@@ -1,4 +0,4 @@

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

8

package.json
{
"name": "react-shiki",
"description": "Syntax highlighter component for react using shiki",
"version": "0.5.3",
"version": "0.6.0",
"license": "MIT",

@@ -45,3 +45,4 @@ "author": {

"clsx": "^2.1.1",
"html-react-parser": "^5.2.3",
"dequal": "^2.0.3",
"hast-util-to-jsx-runtime": "^2.3.6",
"shiki": "^3.2.1",

@@ -57,2 +58,4 @@ "unist-util-visit": "^5.0.0"

"@vitejs/plugin-react": "^4.3.4",
"benny": "^3.7.1",
"html-react-parser": "^5.2.3",
"jsdom": "^26.0.0",

@@ -66,2 +69,3 @@ "tsup": "^8.4.0",

"test": "vitest",
"bench": "vitest bench",
"lint": "biome lint .",

@@ -68,0 +72,0 @@ "lint:fix": "biome lint --write .",

dist/index.js.map

Sorry, the diff of this file is not supported yet