Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add Markdown rendering with syntax highlighting * Use lazy loading for Markdown rendering * Use tailwind typography for Markdown styling * Remove unnecessary styling around code blocks * Use same style for all code blocks * render markdown in message * remove debug code * remove change in tailwind config * move import to top level * remove memo callback check * extract plugin * tweak style * render markdown in modal --------- Co-authored-by: mashdragon <122402293+mashdragon@users.noreply.github.com>
- Loading branch information
1 parent
d86bcfb
commit 07bc2f6
Showing
9 changed files
with
2,759 additions
and
121 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { SystemStyleObject } from "@chakra-ui/react"; | ||
| import { Prose } from "@nikolovlazar/chakra-ui-prose"; | ||
| import { memo } from "react"; | ||
| import { ReactMarkdown } from "react-markdown/lib/react-markdown"; | ||
| import { Prism as SyntaxHighlighter } from "react-syntax-highlighter"; | ||
| import { oneDark } from "react-syntax-highlighter/dist/cjs/styles/prism"; | ||
| import remarkGfm from "remark-gfm"; | ||
| interface RenderedMarkdownProps { | ||
| markdown: string; | ||
| } | ||
|
|
||
| const components = { | ||
| // eslint-disable-next-line @typescript-eslint/no-unused-vars | ||
| code({ node, inline, className, children, style, ...props }) { | ||
| const match = /language-(\w+)/.exec(className || ""); | ||
| const lang = match ? match[1] : ""; | ||
| return !inline ? ( | ||
| <SyntaxHighlighter style={oneDark} language={lang} {...props}> | ||
| {String(children).replace(/\n$/, "")} | ||
| </SyntaxHighlighter> | ||
| ) : ( | ||
| <code className={className} {...props}> | ||
| {children} | ||
| </code> | ||
| ); | ||
| }, | ||
| }; | ||
|
|
||
| const sx: SystemStyleObject = { | ||
| pre: { | ||
| bg: "transparent", | ||
| }, | ||
| code: { | ||
| before: { | ||
| content: `""`, // charka prose come with "`" by default | ||
| }, | ||
| bg: "gray.300", | ||
| p: 0.5, | ||
| borderRadius: "2px", | ||
| _dark: { | ||
| bg: "gray.700", | ||
| }, | ||
| }, | ||
| "p:only-child": { | ||
| my: 0, // ovoid margin when markdown only render 1 p tag | ||
| }, | ||
| p: { | ||
| whiteSpace: "pre-wrap", | ||
| display: "inline-block", | ||
| }, | ||
| display: "inline-block", | ||
| wordBreak: "break-word", | ||
| "> blockquote": { | ||
| borderInlineStartColor: "gray.300", | ||
| _dark: { | ||
| borderInlineStartColor: "gray.500", | ||
| }, | ||
| }, | ||
| "table tbody tr": { | ||
| borderBottomColor: "gray.400", | ||
| _dark: { | ||
| borderBottomColor: "gray.700", | ||
| }, | ||
| }, | ||
| "table thead tr": { | ||
| borderBottomColor: "gray.400", | ||
| borderBottomWidth: "1px", | ||
| _dark: { | ||
| borderBottomColor: "gray.700", | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const plugins = [remarkGfm]; | ||
|
|
||
| // eslint-disable-next-line react/display-name | ||
| const RenderedMarkdown = memo(({ markdown }: RenderedMarkdownProps) => { | ||
| return ( | ||
| <Prose as="div" sx={sx}> | ||
| <ReactMarkdown remarkPlugins={plugins} components={components}> | ||
| {markdown} | ||
| </ReactMarkdown> | ||
| </Prose> | ||
| ); | ||
| }); | ||
|
|
||
| export default RenderedMarkdown; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters