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.

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>
   );

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]]}
+      />
+    </>
   );
 };