vscode-textmate
shiki
Our great sponsors
vscode-textmate | shiki | |
---|---|---|
5 | 26 | |
540 | 8,552 | |
2.8% | 15.6% | |
5.5 | 9.8 | |
4 months ago | 8 days 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.
vscode-textmate
-
Building a syntax highlighting extension for VS Code
Luckily, there is a project that has fitted my needs perfectly: vscode-grammar-test. It’s a command line tool that builds on the VS Code regex engine and grammar file parser and allows to run unit tests directly against a given grammar file.
-
Dark mode with Shiki and Code Hike
Shiki does this because the underlying library vscode-textmate or vscode-oniguruma returns black if the value is not a valid color. This explains why Code Hike uses blackish color codes instead of variables. But what if we write a variable directly into the theme instead of the color code.
-
How to get font colors but not syntax highlighting for a file in custom language?
Thank you for the response! I feared that I might have to create a vscode extension for the language. I'm assuming I can use this json file to build textmate grammar for Stks ? Do you suggest any specific resources for learning textmate grammar and regex? I'm especially unfamiliar with regex. Thanks again
-
NEW VSCode extension "Blockman" to highlight nested code blocks
I see now. Thanks for the hint!
-
Show HN: Ray.so – Create beautiful images of your code
There are lots of different approaches you could take. For sourcecodeshots, I run it through VSCode's tokenizer (https://github.com/microsoft/vscode-textmate) and then use node-canvas to generate the image one line at a time.
It's a very imperative process and fairly slow on a cpu, but the nice thing is that I can run the same code in the browser to speed up development. The Rust project, https://github.com/Aloxaf/silicon, mentioned in another part of the comments is probably faster, but I didn't find it when I was searching for a solution.
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!
What are some alternatives?
tree-sitter-vue - Vue grammar for tree-sitter
PrismJS - Lightweight, robust, elegant syntax highlighting.
silicon - Create beautiful image of your source code.
Highlight.js - JavaScript syntax highlighter with language auto-detection and zero dependencies.
carbonate - Github Action to format fenced code blocks in github issues as images. Originally created as part of DEV Github Actions hackathon: https://dev.to/callmekatootie/jazz-up-the-code-blocks-in-github-issues-52e6
next-mdx-remote - Load mdx content from anywhere through getStaticProps in next.js
usfm-grammar - An elegant USFM parser.
codehike - Marvellous code walkthroughs
carbon - :black_heart: Create and share beautiful images of your source code
mdx - Markdown for the component era
vscode-oniguruma - Oniguruma Bindings for VS Code
remark - markdown processor powered by plugins part of the @unifiedjs collective