Learn How To Use The Modern Syntax Highlighter Shiki 式

Learn how to use Shiki to syntax highlight code and write your own transformers to customize the generated HTML.

🔴 Patreon:   / joyofcode  
𝕏 Twitter:   / joyofcodedev  
💬 Discord:   / discord  
🔥 Uses: https://www.joyofcode.xyz/uses

🔗 Shiki: https://shiki.style/
🔗 Shiki Magic Move: https://shiki-magic-move.netlify.app/
🔗 The Evolution of Shiki: https://nuxt.com/blog/shiki-v1
🔗 VS Code Syntax Highlight Guide: https://code.visualstudio.com/api/lan...

🔖 Timestamps

0:00 Intro
0:08 What Is Shiki?
2:48 How to Set Up Shiki
3:45 Using Shiki For Syntax Highlighting
6:41 Creating A Custom Shiki Syntax Highlighter
8:09 Using Multiple Themes
10:52 Using Shiki To Syntax Highlight Code Blocks In Markdown
12:51 Shiki Fine-Grained Bundle
13:13 How To Add Line Highlighting And Line Numbers
16:39 Shiki Twoslash Integration
17:44 Using Shiki Decorations To Select Ranges Of Code
19:24 Creating Your Own Shiki Transformers
24:20 Outro

#joyofcode #shiki