Added message component for markdown inline code
This commit is contained in:
parent
128d21bb20
commit
d1352d961b
@ -1,5 +1,5 @@
|
||||
import React from "react";
|
||||
import { Text, Image as UIImage, Link } from "theme-ui";
|
||||
import { Text, Image as UIImage, Link, Message } from "theme-ui";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
|
||||
function Paragraph(props) {
|
||||
@ -27,6 +27,15 @@ function ListItem(props) {
|
||||
return <Text as="li" variant="body2" {...props} />;
|
||||
}
|
||||
|
||||
function Code({ children, value }) {
|
||||
const variant = value.startsWith("Warning:") ? "warning" : "";
|
||||
return (
|
||||
<Message variant={variant} my={1} as="span" sx={{ display: "block" }}>
|
||||
{children}
|
||||
</Message>
|
||||
);
|
||||
}
|
||||
|
||||
function Markdown({ source }) {
|
||||
const renderers = {
|
||||
paragraph: Paragraph,
|
||||
@ -34,6 +43,7 @@ function Markdown({ source }) {
|
||||
image: Image,
|
||||
link: Link,
|
||||
listItem: ListItem,
|
||||
inlineCode: Code,
|
||||
};
|
||||
return <ReactMarkdown source={source} renderers={renderers} />;
|
||||
}
|
||||
|
@ -284,4 +284,10 @@ export default {
|
||||
},
|
||||
},
|
||||
},
|
||||
messages: {
|
||||
warning: {
|
||||
backgroundColor: "#d65c64",
|
||||
borderLeftColor: "#ff939b",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user