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
it's curretly way too hard to add a code snippet into your website. choosing the syntax highlighter is the worse.
I suggest: an Async Server Component which uses shikiji to highlight code, well integrated with BaseHub's API for code snippet blocks, and which exposes primitives (potentially ala radix, or ala our RichText) to:
have line numbers
have file names
have "copy code" button
highlight specific lines
RichText style is more fit for syntax highlighting because the code follows a strict order.
An initial api design could be something like this:
<CodeSnippet.Rootlanguage=""theme=""code={code}><header><p>filename.tsx</p><CodeSnippet.CopyButton>Copy to clipboard</CodeSnippet.CopyButton></header><pre><CodeSnippet.Highlightercomponents={{line: ({ children, number, isHighlighted })=><span>{}</span>,token: ({ type, children, style })=>{// type can be "keyword", "string", "comment", etc... see how they do it in https://prismjs.com/return<spanstyle={style}>{children}</span>}}}/></pre></CodeSnippet.Root>
<CodeSnippet.Highlighter>'s components are optional. If you set theme, they'll come with styles, and you're always free to add your own if you want.
you can do <CodeSnippet.Root language="" theme="" code={code} highlightedLines={[1, 4]} /> alone and it should work i guess. Meaning, if no children sent, will render default Highlighter.
The text was updated successfully, but these errors were encountered:
it's curretly way too hard to add a code snippet into your website. choosing the syntax highlighter is the worse.
I suggest: an Async Server Component which uses
shikiji
to highlight code, well integrated with BaseHub's API for code snippet blocks, and which exposes primitives (potentially ala radix, or ala ourRichText
) to:RichText style is more fit for syntax highlighting because the code follows a strict order.
An initial api design could be something like this:
<CodeSnippet.Highlighter>
's components are optional. If you settheme
, they'll come with styles, and you're always free to add your own if you want.you can do
<CodeSnippet.Root language="" theme="" code={code} highlightedLines={[1, 4]} />
alone and it should work i guess. Meaning, if no children sent, will render default Highlighter.The text was updated successfully, but these errors were encountered: