fix: code blocks rendering + consistent styling with ciphera-website /learn

- Convert MDX CodeBlock components to standard markdown code fences
- Add rehype-mdx-code-props to pass filename meta to code components
- Custom pre/code MDX components map fences to CodeBlock
- Add brand color badges (product + category) matching /learn layout
- Match prose styling: orange inline code, orange links, white strong
- Remove brand color background glow (not in /learn)
This commit is contained in:
Usman Baig
2026-03-29 01:01:56 +01:00
parent a992afe04b
commit 627613dc13
30 changed files with 235 additions and 79 deletions

48
package-lock.json generated
View File

@@ -47,6 +47,7 @@
"react-markdown": "^10.1.0",
"react-use-measure": "^2.1.7",
"recharts": "^2.15.0",
"rehype-mdx-code-props": "^3.0.1",
"remark-gfm": "^4.0.1",
"sonner": "^2.0.7",
"svg-dotted-map": "^2.0.1",
@@ -9918,6 +9919,18 @@
"node": ">= 12"
}
},
"node_modules/estree-util-value-to-estree": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/estree-util-value-to-estree/-/estree-util-value-to-estree-3.5.0.tgz",
"integrity": "sha512-aMV56R27Gv3QmfmF1MY12GWkGzzeAezAX+UplqHVASfjc9wNzI/X6hC0S9oxq61WT4aQesLGslWP9tKk6ghRZQ==",
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0"
},
"funding": {
"url": "https://github.com/sponsors/remcohaszing"
}
},
"node_modules/estree-util-visit": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/estree-util-visit/-/estree-util-visit-2.0.0.tgz",
@@ -10616,6 +10629,23 @@
"node": ">= 0.4"
}
},
"node_modules/hast-util-properties-to-mdx-jsx-attributes": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/hast-util-properties-to-mdx-jsx-attributes/-/hast-util-properties-to-mdx-jsx-attributes-1.1.1.tgz",
"integrity": "sha512-MMrAoGgvhYULEqMB/r6AlcVz1D3Cyml/9cMB2NIqZsIsEJ+XEXPMqH0gjba8dVs9AnQUYvPReAS+OIYx4ip+Ug==",
"license": "MIT",
"dependencies": {
"@types/estree": "^1.0.0",
"@types/hast": "^3.0.0",
"estree-util-value-to-estree": "^3.0.0",
"mdast-util-mdx-jsx": "^3.0.0",
"property-information": "^7.0.0",
"style-to-js": "^1.0.0"
},
"funding": {
"url": "https://github.com/sponsors/remcohaszing"
}
},
"node_modules/hast-util-to-estree": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/hast-util-to-estree/-/hast-util-to-estree-3.1.3.tgz",
@@ -14383,6 +14413,24 @@
"regjsparser": "bin/parser"
}
},
"node_modules/rehype-mdx-code-props": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/rehype-mdx-code-props/-/rehype-mdx-code-props-3.0.1.tgz",
"integrity": "sha512-BWWKn0N6r7/qd7lbLgv5J8of7imz1l1PyCNoY7BH0AOR9JdJlQIfA9cKqTZVEb2h2GPKh473qrBajF0i01fq3A==",
"license": "MIT",
"dependencies": {
"@types/hast": "^3.0.0",
"hast-util-properties-to-mdx-jsx-attributes": "^1.0.0",
"mdast-util-from-markdown": "^2.0.0",
"mdast-util-mdx": "^3.0.0",
"micromark-extension-mdxjs": "^3.0.0",
"unified": "^11.0.0",
"unist-util-visit-parents": "^6.0.0"
},
"funding": {
"url": "https://github.com/sponsors/remcohaszing"
}
},
"node_modules/rehype-recma": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/rehype-recma/-/rehype-recma-1.0.0.tgz",