feat: Add codemirror syntax highlighting back in and move to a static color

[geoffgscott]

For some reason the ::selection does not seem to accept our .dark-mode, .light-mode variables. For now we will hard code a color.

This also adds syntax highlighting back in.

[changeset-bot]

🦋 Changeset detected

Latest commit: de24d96

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 14 packages

Name	Type
@scalar/fastify-api-reference	Patch
@scalar/api-client-proxy	Patch
@scalar/swagger-editor	Patch
@scalar/swagger-parser	Patch
@scalar/use-codemirror	Patch
@scalar/api-reference	Patch
@scalar/echo-server	Patch
@scalar/api-client	Patch
@scalar/components	Patch
@scalar/express-api-reference	Patch
@scalar/hono-api-reference	Patch
@scalar/nestjs-api-reference	Patch
@scalar/nextjs-api-reference	Patch
@scalar/api-client-react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[amritk]

should we just move to prism?

[relativeci]

Job #375: Bundle Size — 2.06MiB (+2.2%).

a1a8ba5(current) vs 1f2921f main#373(baseline)

Warning

Bundle contains 5 duplicate packages – View duplicate packages

Warning

Bundle introduced 2 new packages: @lezer/yaml, @codemirror/lang-yaml – View changed packages

Bundle metrics   4 changes 2 regressions

	Current Job #375	Baseline Job #373
Initial JS	2.06MiB(+2.2%)	2.02MiB
Initial CSS	0B	0B
Cache Invalidation	100%	0%
Chunks	1	1
Assets	1	1
Modules	1391(+0.07%)	1390
Duplicate Modules	0	0
Duplicate Code	0%	0%
Packages	206(+0.49%)	205
Duplicate Packages	5	5

Bundle size by type   1 change 1 regression

	Current Job #375	Baseline Job #373
JS	2.06MiB (+2.2%)	2.02MiB

---

View job #375 report View geoff/doc-1464-highlighting-in-r... branch activity View project dashboard

[marclave]

should we just move to prism?

im down for this! I still say let's merge this since it fixes a bunch of bugs and we can do follow up work to remove the couple of lang highlighting we have : )

[amritk]

wtb preview app

@hanspagel this PR has the same bundle issue

[github-actions]

Preview deployed to https://43dc58bf-d8d1-433a-9c5f-660c5700c11f--scalar-deploy-preview.netlify.app

[hanspagel]

Awesome PR! I’ve added some minor details that came to mind when reviewing.

Anyway, I’m too stupid to see what the added CodeMirror plugins do. If you could enlighten me, that would be great.

But let’s get this in!

[hanspagel]

Ah, and I just saw @marclave had another fix for the selection color here:

scalar/packages/use-codemirror/src/hooks/useCodeMirror.ts

Lines 260 to 263 in 3108786

	'.cm-selectionBackground, ::selection': {
	backgroundColor:
	'var(--theme-background-3, var(--default-theme-background-3))',
	},

Should we add this to the PR here instead of hard coding the color? 🤔

[marclave]

Ah, and I just saw @marclave had another fix for the selection color here:

scalar/packages/use-codemirror/src/hooks/useCodeMirror.ts

Lines 260 to 263 in 3108786

	'.cm-selectionBackground, ::selection': {
	backgroundColor:
	'var(--theme-background-3, var(--default-theme-background-3))',
	},

Should we add this to the PR here instead of hard coding the color? 🤔

woah i had no idea this was in main! we noticed css variables dont work in selection selectors

edit does this happen for you?

[geoffgscott]

Ah, and I just saw @marclave had another fix for the selection color here:

scalar/packages/use-codemirror/src/hooks/useCodeMirror.ts

Lines 260 to 263 in 3108786

	'.cm-selectionBackground, ::selection': {
	backgroundColor:
	'var(--theme-background-3, var(--default-theme-background-3))',
	},

Should we add this to the PR here instead of hard coding the color? 🤔

This approach does not work. I think just stale code in Marcs branch