Merge pull request #134 from ShMcK/feature/dark-code-block

addresses #125. inline code dark background

Author: ShMcK

web-app/src/components/Markdown/index.tsx

@@ -66,7 +66,7 @@ const Markdown = (props: Props) => {
 		</div>`
   }
   // TODO sanitize markdown or HTML
-  return <div dangerouslySetInnerHTML={{ __html: html }} />
+  return <span className="coderoad-markdown" dangerouslySetInnerHTML={{ __html: html }} />
 }
 
 export default Markdown

web-app/src/components/Markdown/prism.ts

@@ -11,3 +11,6 @@ import 'prismjs/components/prism-typescript'
 import 'prismjs/themes/prism-tomorrow.css'
 
 // TODO import all - current list only supports js related
+
+// resolve unsupported style cases
+import './style.css'

web-app/src/components/Markdown/style.css

@@ -0,0 +1,6 @@
+.coderoad-markdown :not(pre) > code {
+  background-color: black;
+  color: white;
+  border-radius: 2px;
+  padding: 0.1rem;
+}

web-app/stories/Step.stories.tsx

@@ -9,6 +9,9 @@ const stepText =
   'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
 
 const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
+
+  Inline code: \`<h1>HTML</h1>\`, \`function someFunc() { var a = 1; return a; }\`
+
   \`\`\`javascript
   var a = 12