diff --git a/site/package.json b/site/package.json index dc9457a0da627..6a6f323d7a7e0 100644 --- a/site/package.json +++ b/site/package.json @@ -64,6 +64,7 @@ "react-i18next": "12.0.0", "react-markdown": "8.0.3", "react-router-dom": "6.4.1", + "react-syntax-highlighter": "15.5.0", "remark-gfm": "3.0.1", "sourcemapped-stacktrace": "1.1.11", "tzdata": "1.0.30", @@ -93,6 +94,7 @@ "@types/react": "18.0.15", "@types/react-dom": "18.0.6", "@types/react-helmet": "6.1.5", + "@types/react-syntax-highlighter": "15.5.5", "@types/semver": "7.3.12", "@types/superagent": "4.1.15", "@types/ua-parser-js": "0.7.36", diff --git a/site/src/components/Markdown/Markdown.tsx b/site/src/components/Markdown/Markdown.tsx index fece615c4af03..639d0257067af 100644 --- a/site/src/components/Markdown/Markdown.tsx +++ b/site/src/components/Markdown/Markdown.tsx @@ -11,7 +11,7 @@ import ReactMarkdown from "react-markdown" import { Prism as SyntaxHighlighter } from "react-syntax-highlighter" import gfm from "remark-gfm" import { colors } from "theme/colors" -import darcula from "react-syntax-highlighter/dist/cjs/styles/prism/darcula" +import { darcula } from "react-syntax-highlighter/dist/cjs/styles/prism" export interface MarkdownProps { children: string @@ -41,13 +41,14 @@ export const Markdown: FC<{ children: string }> = ({ children }) => { return
{children}}, - code: ({ node, inline, className, children, ...props }) => { + code: ({ node, inline, className, children, style, ...props }) => { const match = /language-(\w+)/.exec(className || "") return !inline && match ? (