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

ShMcK · web-flow · commit d9e5d458f7df · 2020-03-07T20:06:08.000-08:00
addresses coderoad#125. inline code dark background
diff --git a/web-app/src/components/Markdown/index.tsx b/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
diff --git a/web-app/src/components/Markdown/prism.ts b/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'
diff --git a/web-app/src/components/Markdown/style.css b/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;
+}
diff --git a/web-app/stories/Step.stories.tsx b/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
 
