2 files changed, 70 insertions, 2 deletions
diff --git a/src/lib/Markdown/Content.tsx b/src/lib/Markdown/Content.tsx
index b7829ed..2a9e2ee 100644
--- a/src/lib/Markdown/Content.tsx
+++ b/src/lib/Markdown/Content.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import CodeBlock from './CodeBlock';
+import Paragraph from './Paragraph';
 import { ParserPropTypes } from './types';
 
 
@@ -16,10 +17,10 @@ const Content: React.FC<ParserPropTypes> = ({ rawLines }) => {
   let result;
   if (denotesCodeBlock(line)) {
     const closeIndex = rawLines.findIndex(line => denotesCodeBlock(line));
-    const codeBlockLines = rawLines.splice(0, closeIndex);
+    const codeBlockLines = rawLines.splice(0, closeIndex + 1).slice(0, closeIndex);
     result = <CodeBlock rawLines={codeBlockLines} />
   } else {
-    result = <p> {line} </p>
+    result = <Paragraph data={line} />
   }
 
   return (
diff --git a/src/lib/Markdown/Paragraph.tsx b/src/lib/Markdown/Paragraph.tsx
new file mode 100644
index 0000000..f433cf5
--- /dev/null
+++ b/src/lib/Markdown/Paragraph.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+interface PropTypes {
+  data: string;
+}
+
+interface Closures {
+  [key: string]: string;
+}
+
+interface Patterns {
+  [key: string]: RegExp;
+}
+
+interface Styles {
+  [key: string]: React.CSSProperties;
+}
+
+
+const captureInside = (closure: string): any => {
+  return new RegExp(closure + '([^' + closure + ']+)' + closure);
+}
+const capture = (closure: string): any => {
+  return new RegExp('(' + closure + '[^' + closure + ']+' + closure + ')');
+}
+
+const closures: Closures = {
+  inlineCode: '`',
+  bold: '\\*\\*',
+};
+
+const styles: Styles = {
+  inlineCode: { background: '#444444', padding: '4px' },
+  bold: { fontWeight: 'bold' },
+};
+const patterns: Patterns = {};
+
+
+Object.keys(closures).forEach((key: string): void => {
+  patterns[key] = capture(closures[key]);
+});
+
+const matcher = new RegExp(Object.values(patterns).map(regex => regex.source).join('|'));
+
+Object.keys(closures).forEach((key: string): void => {
+  patterns[key] = captureInside(closures[key]);
+});
+
+
+const SyntaxSpan: React.FC<PropTypes> = ({ data }) => {
+  if (!data) return null;
+  for (let key in styles) {
+    const match = data.match(patterns[key]);
+    if (match) return <span style={styles[key]}>{match[1]}</span>;
+  };
+  return <>{data}</>;
+}
+
+const Paragraph: React.FC<PropTypes> = ({ data }) => {
+  let result;
+  result = data.split(matcher);
+  result = result.map(span => <SyntaxSpan data={span} />);
+  return <p> {result} </p>;
+}
+
+export default Paragraph;
+