shadcn.io is not affiliated with official shadcn/ui
Code File Upload Block for Solid
A code file reader: three typed files (middleware.ts, routes.ts, .env.example) in tabs, each with a language badge from its extension, line count, encoding and size, numbered lines that stay put while code scrolls sideways, and Copy file.
Installation
Overview
Read a snippet's files together and copy one whole, with this code file panel for Solid with Ark UI. It is Snippetyard, a code-snippet library. Three typed files sit in Tabs; each panel shows a Badge with the language read from the extension, its line count, UTF-8 and its size, and a Copy Button that copies the file. Lines are numbered, the numbers stay in view while long lines scroll sideways, and a tiny tokenizer marks keywords, strings and comments by weight and style, with no highlighter library and no colour. A File Upload strip adds a fourth tab for a chosen file that lists its name, language and size. The panel is ruled by Guides, with a CSS entrance only. For snippet libraries, docs and review tools.
FAQ
How does the highlighting work?
A short function splits each line into comments, quoted strings, words and everything else, then marks keywords bold, strings dotted-underlined and comments italic. It is a few lines you can read, not a grammar, and it never changes the text.
Where does the language badge come from?
From the file name: .ts and .tsx are TypeScript, .js, .json and .md have their own names, .env files are Dotenv and anything else is Text.
What stays local in this demo?
The three files are typed. A chosen or dropped file is listed in a fourth tab by name, language and size with a note that it was not opened; its contents are never read.
How do I show my own files?
Replace FILES with your names and lines, or load them in and keep tokensOf. If you add a grammar library, keep the line-number column and the sideways scroll.