From a7ea4ba29cbc70f4a790197723d32a7c7fed03c4 Mon Sep 17 00:00:00 2001
From: Anurag Anjaria <anuthebananu@users.noreply.github.com>
Date: Tue, 17 Dec 2024 16:23:40 -0500
Subject: [PATCH] Add custom colors to markdown code block for syntax
 highlighting (#26554)

## Summary & Motivation
Default syntax highlighting colors from `highlight.js` were not always clearly visible in dark mode. Adding our custom colors improves the contrast and ensures we'll always have good contrast in light and dark mode.

## How I Tested These Changes
run `dagster dev` on the sample dbt project and look at dbt asset descriptions.

Below are screenshots of various sql code blocks from the dbt asset descriptions, illustrating the new colors in light and dark mode.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/b551ca49-bcf6-4f36-adf0-2389377b82fe.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/2c545b00-d04f-4178-aa0b-f32ac139c4ca.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/91bfe071-ca6d-4f15-862d-1af9ee5e0c11.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/2918b815-dd8d-4317-8f62-9c643133e117.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/dc19ca55-4e47-4f77-a90e-ab092aa0c1fa.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/DyC7O5ZxCGGdPTWXzKVQ/f5e48aae-177e-47b1-aab3-a79c6a986dc7.png)

## Changelog

> Insert changelog entry or delete this section.
---
 .../ui-core/src/pipelines/Description.tsx     |  2 +-
 .../ui-core/src/ui/MarkdownWithPlugins.tsx    | 46 ++++++++++++++++---
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx b/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
index d44e41b7178ed..ba9834a38808c 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/pipelines/Description.tsx
@@ -91,7 +91,7 @@ export const Description = ({maxHeight, description, fontSize}: IDescriptionProp
       )}
 
       <div ref={container} style={{overflowX: 'auto'}}>
-        <Markdown>{removeLeadingSpaces(description.replace('```', '```sql'))}</Markdown>
+        <Markdown>{removeLeadingSpaces(description)}</Markdown>
       </div>
     </Container>
   );
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ui/MarkdownWithPlugins.tsx b/js_modules/dagster-ui/packages/ui-core/src/ui/MarkdownWithPlugins.tsx
index 835c306b35374..d4050b7c3f0a2 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ui/MarkdownWithPlugins.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ui/MarkdownWithPlugins.tsx
@@ -1,8 +1,9 @@
+import {Colors} from '@dagster-io/ui-components';
 import ReactMarkdown from 'react-markdown';
 import rehypeHighlight from 'rehype-highlight';
 import rehypeSanitize, {defaultSchema} from 'rehype-sanitize';
 import gfm from 'remark-gfm';
-
+import {createGlobalStyle} from 'styled-components';
 import 'highlight.js/styles/github.css';
 
 const sanitizeConfig = {
@@ -62,17 +63,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]]}
+      />
+    </>
   );
 };