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
