add custom colors to markdown code block for syntax highlighting

js_modules/dagster-ui/packages/ui-core/src/ui/MarkdownWithPlugins.tsx

@@ -4,6 +4,9 @@ import rehypeSanitize, {defaultSchema} from 'rehype-sanitize';
 import gfm from 'remark-gfm';
 
 import 'highlight.js/styles/github.css';
+import {createGlobalStyle} from 'styled-components';
+import {browserColorScheme, colorAccentBlue, colorAccentRed} from '@dagster-io/ui-components/src/theme/color';
+import {Colors} from '@dagster-io/ui-components';
 
 const sanitizeConfig = {
   ...defaultSchema,
@@ -62,17 +65,50 @@ const sanitizeConfig = {
   },
 };
 
+const GlobalStyle = createGlobalStyle`
+.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_ {
+    color: ${Colors.accentRed()}
+}
+
+.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_ {
+    color: ${Colors.dataVizBlurple()}
+}
+
+.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable {
+    color: ${Colors.dataVizBlue()}
+}
+
+.hljs-meta .hljs-string,.hljs-regexp,.hljs-string {
+    color: ${Colors.accentBlue()}
+}
+
+.hljs-built_in,.hljs-symbol {
+    color: ${Colors.dataVizOrange()}
+}
+
+.hljs-code,.hljs-comment,.hljs-formula {
+    // color: ${Colors.dataVizGray()}
+}
+
+.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag {
+    color: ${Colors.dataVizGreen()}
+}
+`;
+
 interface Props {
   children: string;
 }
 
 export const MarkdownWithPlugins = (props: Props) => {
   return (
-    <ReactMarkdown
-      {...props}
-      remarkPlugins={[gfm]}
-      rehypePlugins={[rehypeHighlight, [rehypeSanitize, sanitizeConfig]]}
-    />
+    <>
+      <GlobalStyle />
+      <ReactMarkdown
+        {...props}
+        remarkPlugins={[gfm]}
+        rehypePlugins={[rehypeHighlight, [rehypeSanitize, sanitizeConfig]]}
+      />
+    </>
   );
 };