twoslash
core
twoslash | core | |
---|---|---|
5 | 1 | |
1,006 | 111 | |
2.4% | 1.8% | |
5.1 | 3.9 | |
3 months ago | 4 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.
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.
1: https://github.com/shikijs/twoslash
- 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
core
-
Building an Astro Blog with View Transitions
You may also notice I have some embeds on my articles even though Markdown natively does not support embedding content. This is done by using a Remark plugin. Remark is a tool that can be used to parse and transform Markdown. In this case, I used a plugin called remark-embedder to add custom logic to replace links from specific websites (in this case, Youtube and CodeSandbox) with s containing the actual page; without the plugin, those would simply be text links and would make for a much less pleasing lecture, wouldn't you agree ?
You can obviously do more with remark than just that, so take a look at the plugins they offer. But how do you use with Astro? You simply add the plugins in yourastro.config.mjs
file (documentation on how to do that is here).This post was a bit chaotic, but I hope I was able to share a bit of what I did on my blog section (where you are hopefully reading this right now).
What are some alternatives?
milkdown - πΌ Plugin driven WYSIWYG markdown editor framework.
astro - The web framework for content-driven websites. βοΈ Star to support our work!
shiki - A beautiful yet powerful syntax highlighter
remark-wiki-link - Parse and render wiki links.
TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
remark - markdown processor powered by plugins part of the @unifiedjs collective
remark-unwrap-texts - π Unwraps text nodes in Markdown, is useful when publishing to platforms like DEV.to, Medium, Hashnode, etc.
rehype - HTML processor powered by plugins part of the @unifiedjs collective
Visual Studio Code - Visual Studio Code
Angular - Deliver web apps with confidence π
starry-night - Syntax highlighting, like GitHub
tailwind-nextjs-starter-blog - This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.