惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

J
Java Code Geeks
Jina AI
Jina AI
小众软件
小众软件
WordPress大学
WordPress大学
Last Week in AI
Last Week in AI
美团技术团队
V
V2EX
酷 壳 – CoolShell
酷 壳 – CoolShell
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
博客园 - 聂微东
博客园 - 【当耐特】
人人都是产品经理
人人都是产品经理
雷峰网
雷峰网
博客园 - 司徒正美
量子位
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
宝玉的分享
宝玉的分享
月光博客
月光博客
IT之家
IT之家
博客园 - 三生石上(FineUI控件)
大猫的无限游戏
大猫的无限游戏
T
Tailwind CSS Blog
博客园 - Franky

Anthony Fu

Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony Fu Anthony's Roads to Open Source - The Set Theory (React ver.) Mental Health in Open Source The Evolution of Shiki v1.0 The Magic in Shiki Magic Move Anthony's Roads to Open Source - The Progressive Path Anthony Fu Anthony Fu Anthony's Roads to Open Source - The Set Theory Now, and the Future of Nuxt Devtools Anthony's Roads to Open Source - The Set Theory Anthony Fu Anthony Fu Stable Diffusion QR Code 101 Refining AI Generated QR Code Stylistic QR Code with Stable Diffusion Anthony Fu How I Manage GitHub Notifications Anthony Fu
Anthony Fu
Anthony Fu · 2023-12-12 · via Anthony Fu

Here is an example of using TwoSlash with Shiki:

console.log((1 + 2 + 3 + 4).to
  • toExponential
  • toFixed
  • toLocaleString
  • toPrecision
  • toString
Fixed(2))
interface Todo { title: string } const todo: Readonly<Todo> = { title: 'Delete inactive users', } todo.title = 'Hello'

Cannot assign to 'title' because it is a read-only property.

Try hovering on each token to see the type information. Shiki runs oniguruma to give syntax highlighting, and TwoSlash runs typescript to give type information. Both are quite heavy libraries, but this is done ahead of time on building, it means that what you see here is completely static pure HTML and CSS!

The Shiki integration allows you to provide custom renderer of how the HTML been generated based on AST. This allows us to have dual themes support, and also the syntax highlighting for the type information.

Check @shikijs/twoslash and commit for the integration on antfu.me, for more information :)

The input code
```ts twoslash
// @errors: 2540
console.log((1 + 2 + 3 + 4).toFixed(2))
//                            ^|

interface Todo {
  title: string
}

const todo: Readonly<Todo> = {
  title: 'Delete inactive users',
//  ^?
}

todo.title = 'Hello'
```