From e6308dac88bf16e6848b648cdf415e23da3beacf Mon Sep 17 00:00:00 2001 From: Nathan Date: Thu, 14 Mar 2024 01:16:53 -0700 Subject: [PATCH] chore: ensure dark theme codeblock are not set to italic --- docz/docusaurus.config.js | 36 +++++++++++++++++++++++++++++++++++- 1 file changed, 35 insertions(+), 1 deletion(-) diff --git a/docz/docusaurus.config.js b/docz/docusaurus.config.js index fb58b5f..bb2596a 100644 --- a/docz/docusaurus.config.js +++ b/docz/docusaurus.config.js @@ -1,6 +1,28 @@ // @ts-check // Note: type annotations allow type checking and IDEs autocompletion +/** @typedef { import('prism-react-renderer').PrismTheme['styles'] } PrismThemeStyle */ +/** @typedef { import('prism-react-renderer').PrismTheme['styles'][number]['style'] } PrismThemeEntry */ + +/** + Updates styles array from prisma theme based off token type + @type {(theme: PrismThemeStyle, replace: Record) => PrismThemeStyle} +*/ +const updateThemeStyles = (styles, replace) => { + const copy = structuredClone(styles) + + const types = Object.keys(replace) + copy.forEach(style => { + types.forEach((type) => { + if (style.types.includes(type)) { + style.style = { ...style.style, ...replace[type]} + } + }) + }) + + return copy +} + const lightCodeTheme = require('prism-react-renderer/themes/github'); const darkCodeTheme = require('prism-react-renderer/themes/dracula'); @@ -145,7 +167,19 @@ const config = { }, prism: { theme: lightCodeTheme, - darkTheme: darkCodeTheme, + darkTheme: { + // Dracula dark theme by default has keyword and variable font style set to italic + // reset to normal to be consistent with the light theme (github) + ...darkCodeTheme, + styles: updateThemeStyles(/** @type {any} */ (darkCodeTheme.styles), { + 'keyword': { + fontStyle: "normal" + }, + 'variable': { + fontStyle: "normal" + } + }) + }, additionalLanguages: [ "visual-basic", "swift", "java", "php", "csharp", "perl", "ruby", "cpp", "applescript", "liquid", "rust", "dart", "wolfram", "matlab", "stata", "zig" ], }, liveCodeBlock: {