From d1352d961bb3de97c07a8451a378507439434211 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Wed, 1 Jul 2020 09:09:46 +1000
Subject: [PATCH] Added message component for markdown inline code

---
 src/components/Markdown.js | 12 +++++++++++-
 src/theme.js               |  6 ++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/Markdown.js b/src/components/Markdown.js
index 7af125e..6cef620 100644
--- a/src/components/Markdown.js
+++ b/src/components/Markdown.js
@@ -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} />;
 }
diff --git a/src/theme.js b/src/theme.js
index 2e4cc10..471e16c 100644
--- a/src/theme.js
+++ b/src/theme.js
@@ -284,4 +284,10 @@ export default {
       },
     },
   },
+  messages: {
+    warning: {
+      backgroundColor: "#d65c64",
+      borderLeftColor: "#ff939b",
+    },
+  },
 };