add custom themes

reaviz · Jul 30, 2024 · 1a7df7a · 1a7df7a
1 parent 919f937
commit 1a7df7a
Show file tree

Hide file tree

Showing 5 changed files with 1,012 additions and 3 deletions.
diff --git a/src/Markdown/CodeHighlighter.tsx b/src/Markdown/CodeHighlighter.tsx
@@ -1,8 +1,8 @@
 import React, { FC, PropsWithChildren, ReactElement } from 'react';
 import { Button, cn } from 'reablocks';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import CopyIcon from '@/assets/copy.svg?react';
+import { dark } from './themes';
 
 export interface CodeHighlighterProps extends PropsWithChildren {
   /**
@@ -24,14 +24,20 @@ export interface CodeHighlighterProps extends PropsWithChildren {
    * Icon to show for copy.
    */
   copyIcon?: ReactElement;
+
+  /**
+   * The theme to use for the code block.
+   */
+  theme?: Record<string, string>;
 }
 
 export const CodeHighlighter: FC<CodeHighlighterProps> = ({
   className,
   children,
   copyClassName,
   copyIcon = <CopyIcon />,
-  language
+  language,
+  theme = dark
 }) => {
   const match = language?.match(/language-(\w+)/);
   const lang = match ? match[1] : 'text';
@@ -62,7 +68,7 @@ export const CodeHighlighter: FC<CodeHighlighterProps> = ({
       )}
       <SyntaxHighlighter
         language={lang}
-        style={oneDark}
+        style={theme}
       >
         {children}
       </SyntaxHighlighter>

diff --git a/src/Markdown/index.ts b/src/Markdown/index.ts
@@ -2,3 +2,4 @@ export * from './Markdown';
 export * from './Table';
 export * from './CodeHighlighter';
 export * from './plugins';
+export * from './themes';