mirror of
https://github.com/supabase/supabase.git
synced 2026-10-24 20:47:33 +08:00
8bcbe3dcc7
## Problem new surfaces display code blocks their own way while docs has the full implementation but it lives inside `apps/docs` ## Solution - moves the docs code block parts to `ui-patterns/CodeBlock` as separate imports - kb code blocks now show line numbers, which matches docs | state | preview | | -------|------| | before | <img width="913" height="509" alt="image" src="https://github.com/user-attachments/assets/76ff0096-433a-4b06-9eca-1d79c4940e24" /> | | after | <img width="913" height="509" alt="image" src="https://github.com/user-attachments/assets/4f5d91d9-13df-44a0-9e65-edf605773c5f" /> | <!-- ## 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. visit /[docs/guides/database/tables#enabling-row-level-security ](https://docs-git-feat-shared-code-block-parts-supabase.vercel.app/docs/guides/database/tables#enabling-row-level-security)code blocks, line numbers, colors in light and dark mode, copy, and word wrap match 2. visit [/docs/guides/auth/passwords](https://docs-git-feat-shared-code-block-parts-supabase.vercel.app/docs/guides/auth/passwords) hover over a typed identifier tooltip should still show 3. visit a kb guide with code, for example [/kb/guides/migrate-from-mysql](https://kb-git-feat-shared-code-block-parts-supabase.vercel.app/kb/guides/migrate-from-mysql) 4. visit the [design system code block page](https://design-system-git-feat-shared-code-block-parts-supabase.vercel.app/design-system/docs/fragments/code-block) ## 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)
25 lines
840 B
CSS
25 lines
840 B
CSS
.shiki-wrapper {
|
|
--tab-flare-ring:
|
|
transparent 6.75px, var(--border-color-default) 7.25px, var(--border-color-default) 7.75px,
|
|
transparent 8.25px;
|
|
--tab-flare-fill: transparent 6.75px, var(--background-color-200) 7.25px;
|
|
--tab-flare-left:
|
|
radial-gradient(circle at 0 0, var(--tab-flare-ring)),
|
|
radial-gradient(circle at 0 0, var(--tab-flare-fill));
|
|
--tab-flare-right:
|
|
radial-gradient(circle at 100% 0, var(--tab-flare-ring)),
|
|
radial-gradient(circle at 100% 0, var(--tab-flare-fill));
|
|
}
|
|
|
|
.codeblock-drop-shadow {
|
|
filter: var(--drop-shadow-codeblock, none);
|
|
}
|
|
|
|
.code-sample-source :is(.shiki, .code-sample-surface) {
|
|
mask:
|
|
linear-gradient(#000 0 0),
|
|
var(--source-notch-mask) right -2px bottom -2px / var(--source-notch-mask-width) 42px no-repeat;
|
|
mask-composite: exclude;
|
|
mask-clip: no-clip;
|
|
}
|