feat: use inline syntax for context

2 files changed, 15 insertions, 16 deletions

diff --git a/src/demo/content.md b/src/demo/content.md
index ad61d33..41607a9 100644
--- a/src/demo/content.md
+++ b/src/demo/content.md
@@ -1,9 +1,5 @@
 ## Markdown
-[Markdown file](${url}) *(...
-```react
-fileName
-```
-)* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:
+[Markdown file](${url}) *(...`$fileName`)* that you can see on the left was parsed and rendered by **BENZIN**! :rocket:
 Switch between tabs on the header to explore other markdown templates. :recycle:
 Templates on the left are being loaded from the [GitHub](https://github.com), though this pane is generated from plaintext. :pen:
 ## How do I use this feature?
@@ -12,6 +8,6 @@ import Markdown from \'react-benzin\';
 const data = \'# Header\\nHello, *world!*\';
 ReactDOM.render(<Markdown data={data}/>, document.getElementById(\'root\'));
 ```
-```react
-tryButton
-```
+
+`$tryButton`
+
diff --git a/src/lib/Markdown/Markdown.tsx b/src/lib/Markdown/Markdown.tsx
index 9bc05a0..c91bc14 100644
--- a/src/lib/Markdown/Markdown.tsx
+++ b/src/lib/Markdown/Markdown.tsx
@@ -12,7 +12,7 @@ import Image from './Image';
 interface PropTypes {
   data?: string;
   url?: string;
-  context?: any;
+  context?: Record<string, any>;
 }
 
 const resolveUrls = (line: string, baseUrl: string): string => line.replace(
@@ -34,21 +34,24 @@ const Markdown: React.FC<PropTypes> = ({ data, url, context = {} }) => {
   }, [data, url]);
 
   const baseUrl = url?.slice(0, url.lastIndexOf('/')) || '';
-
   const sanitized = resolveUrls(markdown, baseUrl);
 
+  const WrappedInlineCode: React.FC = ({ children }) => {
+    if (typeof children === 'string' && children?.startsWith('$')) {
+      const symbol = children.slice(1);
+      return context[symbol] || null;
+    }
+    return <InlineCode>{children}</InlineCode>;
+  };
+
   const renderers = {
     heading: Heading,
-    inlineCode: InlineCode,
+    code: CodeBlock,
     link: Link,
     image: Image,
-    code: ({ language, value }: any) => {
-      if (language === 'react') return context[value] || null;
-      return CodeBlock({ value });
-    },
+    inlineCode: WrappedInlineCode,
   };
 
-
   return (
     <Typography>
       <ReactMarkdown