Consistently style code blocks in tsconfig reference

[mkantor]

Use json tsconfig language identifier for all tsconfig snippets for uniform syntax highlighting on https://www.typescriptlang.org/tsconfig.

[jakebailey]

There's not really a need for this, all code blocks are formatted during build.

[mkantor]

@jakebailey I was inspired to suggest these changes when I noticed that code blocks on the live https://www.typescriptlang.org/tsconfig site are inconsistently highlighted.

For example, this one from explainFiles:

Uses different colors than this one from listEmittedFiles:

I do see now that indentation is irrelevant to what's actually displayed on the page. I could scrub 9ae2236 from this branch.

[mkantor]

I've removed the indentation tweaks, leaving only the changes that will affect syntax highlighting. @jakebailey mind taking another look when you have a chance?

[github-actions]

Azure Static Web Apps: Your stage site is ready! Visit it here: https://victorious-plant-05c166c10-3335.centralus.5.azurestaticapps.net

[jakebailey]

Looking at the preview, I think this may actually be a regression; the colors appear to have less contrast which may mean that this is somehow undoing some accessibility work we had to do to ensure that contrast is high enough. e.g. here, the top is json tsconfig, the bottom is jsonc:

To my eye, everything should really be jsonc. But I don't know that things are fully consistent yet with this PR either, unfortunately.

[mkantor]

I assumed the json tsconfig identifier was the preferred one because it's more specific, but aesthetically (and readability-wise) I agree with you and prefer the lighter keys. I'd be happy to switch them all to jsonc or whatever else is preferred (or maybe the color scheme for json tsconfig ought to be changed?).

[jakebailey]

To be honest I'm not sure who's in charge of the coloring, other than https://github.com/microsoft/TypeScript-Website/blob/v2/packages/typescriptlang-org/lib/themes/typescript-beta-dark.json which doesn't actually mention json at all, so it's entirely possible that the colors are a fluke.

[orta]

probably a side-effect of the hover implementation on the keys of the tsconfig, likely because you've seen the page it links to (as it would be linking back to the tsconfig reference page)

[mkantor]

I hadn't even noticed they were links!

The darker blue comes from here:

TypeScript-Website/packages/typescriptlang-org/src/components/layout/main.scss

Lines 138 to 140 in 3173c39

	a {
	color: var(--link-color);
	}

Locally I hacked in this override and now I see the lighter blue in those code blocks:

--- a/packages/typescriptlang-org/src/templates/markdown-twoslash.scss
+++ b/packages/typescriptlang-org/src/templates/markdown-twoslash.scss
@@ -137,6 +137,10 @@ pre code a {
   text-decoration: none;
 }
 
+.raised pre code a {
+  color: inherit;
+}
+
 pre .query {
   margin-bottom: 10px;
   color: #137998;

[jakebailey]

Oh, wow, I didn't know that either. Yeah, we should not let those links change based on clicked status.

[mkantor]

I've opened #3337 to make these links use syntax highlighter colors.