Files
supabase/apps/learn
Anthony Lio 0fe320e5e3 chore: shiki velite migration (#51579)
## Problem

design-system, ui-library and learn highlight code through
`@shikijs/compat` and `rehype-pretty-code` 0.9, which both predate shiki
1

compat has no v4 release, so these apps were stuck on shiki 1.6 and
couldn't pick up the injection fix from the previous pr

## Solution

- drops `@shikijs/compat`
- moves all three apps to `rehype-pretty-code`

<!--
## Preview links

If relevant, include links to changed pages for easy review access.

Copy the preview base URL from the Vercel bot comment on this PR. Use
the following table as an example template.

| Site | Live | Preview | Search for |
| -------------- |
-------------------------------------------------------------------------
|
------------------------------------------------------------------------------------------------------------
| ----------------------------- |
| WWW | [/blog/your-post](https://supabase.com/blog/your-post) |
[/blog/your-post](https://zone-www-dot-com-git-branch-name-supabase.vercel.app/blog/your-post)
| unique phrase from the change |
| Docs |
[/docs/guides/your-page](https://supabase.com/docs/guides/your-page) |
[/docs/guides/your-page](https://docs-git-branch-name-supabase.vercel.app/docs/guides/your-page)
| unique phrase from the change |
| Studio | [/dashboard](https://supabase.com/dashboard) |
[/dashboard](https://studio-git-branch-name-supabase.vercel.app/dashboard)
| unique phrase from the change |
| Design system | [/design-system](https://supabase.com/design-system) |
[/design-system](https://design-system-git-branch-name-supabase.vercel.app/design-system)
| unique phrase from the change |
| UI library | [/library](https://supabase.com/library) |
[/library](https://ui-library-git-branch-name-supabase.vercel.app/library)
| unique phrase from the change |
| Knowledge base |
[/kb/guides/your-page](https://supabase.com/kb/guides/your-page) |
[/kb/guides/your-page](https://kb-git-branch-name-supabase.vercel.app/kb/guides/your-page)
| unique phrase from the change |
-->

<!-- ## Additional context

Optionally add any other context or screenshots.

-->

## Review instructions

1. open
[/design-system/docs/accessibility](https://design-system-gd7xzujta-supabase.vercel.app/design-system/docs/accessibility)
on the preview and on production side by side _ highlighted lines should
keep the left border and background, and line numbers should line up
2. open
[/design-system/docs/components/chart](https://design-system-gd7xzujta-supabase.vercel.app/design-system/docs/components/chart)
_ highlighted words should have the gray pill, with no yellow background
or black text + code blocks with titles should still show the title
above the block
3. toggle light and dark mode on both pages _ token colors and the block
background should match production
4. open [ui-library
preview](https://ui-library-hmuv1teie-supabase.vercel.app/library/docs/starters/nextjs-starter)
and do a copy check
5. open a learn lesson with code `/foundations/authentication` and
compare it with production.

## Checklist

Check all before review:

- [x] I have read
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
- [x] If I wrote a new docs topic or edited an existing topic, I used
the `/write-the-docs` or `/edit-the-docs` skill, which applies the docs
[style
guide](https://github.com/supabase/supabase/tree/master/apps/docs/style-guide)
2026-10-14 12:46:03 +03:00
..
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30
2026-02-04 21:36:24 -03:30

Plan: Course 1: Supabase Foundations Learn the basics of Supabase: database, auth, and RLS. 5 chapters.

Course 2: Project: Smart Office 15 Build a realtime room-booking dashboard using Supabase. 15 chapters. Course 3: Supabase Internals: Performance & Scaling. Learn how to profile queries, tune indexes, and scale Postgres with Supabase. 20 chapters. Course 4: Supabase Internals: Debugging & Operations. Understand how to diagnose slow queries, use read replicas, and manage production workloads. 20 chapters.

——— This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Supabase types

To regenerate the Supabase database types, run

supabase gen types --local > registry/default/fixtures/database.types.ts