shiki
twoslash
Our great sponsors
| shiki | twoslash | |
|---|---|---|
| 26 | 5 | |
| 8,470 | 1,000 | |
| 14.7% | 4.8% | |
| 9.8 | 5.1 | |
| 5 days ago | 2 months ago | |
| TypeScript | TypeScript | |
| MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
shiki
- Shiki: A beautiful yet powerful syntax highlighter
-
VueJS turns 10 years old
Shiki (https://shiki.style) might be good enough for your usecase, use the latest beta versions as it's the new fresh esm rewrite.
-
GIGO and VS-code: the Battle With Microsoft
Finally the vanguard had arrived. A markdown renderer named Shiki.
-
Scraping Google Maps
Can I introduce you to our lord and savior Shiki? https://github.com/shikijs/shiki
-
Shiki Syntax Highlighter
Coincidentally, I recently looked into the slow startup time for shiki and it was mostly from parsing JSONC, not WASM: https://github.com/shikijs/shiki/issues/439.
-
Dark mode with Shiki and Code Hike
Warning: This article refers to versions of Code Hike before 0.8.0. Since version 0.8.0, Code Hike uses lighter instead of Shiki. The approach presented in this article uses shiki's color replacement method, which no longer works with lighter.
- What do you use to display code example on your personal blog, or in an article?
-
Nextra 2 – Next.js Static Site Generator
Prismjs was replaced by Shiki and rehype-pretty-code.
-
Want to create attractive, interactive docs? Use these amazing documentation tools and examples
The outcome I was (mostly) hoping for has been done by Shiki library! I take no credit for the idea btw, I am just glad that someone else (Pine) took it on!
twoslash
-
Shiki Syntax Highlighter
Shiki is awesome for code samples. It’s even better paired with a set of light/dark themes designed to be used together (and I really need to get around to open sourcing my solution for swapping inline styles with classes for that use case, it’s great for using Shiki without a client side runtime).
ALSO awesome is Shiki Twoslash[1], for displaying TypeScript editor feedback in code examples.
- Syntax Highlighting on the Web
-
Type Safe GroupBy In TypeScript
Major change was swapping the code rendering for https://github.com/shikijs/twoslash to get ts type info
- Add VSCode-like hovering type annotations to Markdown code samples powered by TypeScript compiler
-
Typescript hints in your code samples
Twoslash is a Shiki addon. It’s adding TypeScript compiler hints. Same as we can see in VS Code. You can check which
What are some alternatives?
PrismJS - Lightweight, robust, elegant syntax highlighting.
milkdown - 🍼 Plugin driven WYSIWYG markdown editor framework.
Highlight.js - JavaScript syntax highlighter with language auto-detection and zero dependencies.
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
next-mdx-remote - Load mdx content from anywhere through getStaticProps in next.js
remark-unwrap-texts - 📋 Unwraps text nodes in Markdown, is useful when publishing to platforms like DEV.to, Medium, Hashnode, etc.
codehike - Marvellous code walkthroughs
Visual Studio Code - Visual Studio Code
mdx - Markdown for the component era
Angular - Deliver web apps with confidence 🚀
remark - markdown processor powered by plugins part of the @unifiedjs collective
starry-night - Syntax highlighting, like GitHub