Add roadmap rendering

components/md-renderer/mdx-components/blockquote.tsx

@@ -5,6 +5,7 @@ const BlockQuote = styled.blockquote`
   position: relative;
   background: #e8e8e8;
   border-radius: 5px;
+  margin-bottom: 18px;
 
   h1, h2, h3, h4, h5, h6 {
     margin-top: 0;

components/md-renderer/mdx-components/code.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Code as ChakraCode } from '@chakra-ui/react';
+
+type CodeType = {
+  children: React.ReactNode;
+}
+
+export default function Code(props: CodeType) {
+  return <ChakraCode bg='blue.500'>{props.children}</ChakraCode>;
+}

components/md-renderer/mdx-components/index.tsx

@@ -10,6 +10,7 @@ import { BadgeLink } from './badge-link';
 import Ul from './ul';
 import Li from './li';
 import PremiumBlock from './premium-block';
+import { Code } from '@chakra-ui/react';
 
 const MdxComponents = {
   p: P,
@@ -20,6 +21,7 @@ const MdxComponents = {
   table: Table,
   iframe: IFrame,
   img: Img,
+  code: Code,
   BadgeLink: BadgeLink,
   PremiumBlock: PremiumBlock,
   ul: Ul,