Merge pull request #49 from ShMcK/fix/markdown

support markdown with other language/types

Author: ShMcK

package-lock.json

@@ -43,6 +43,7 @@
     "concurrently": "^5.0.0",
     "dotenv": "^8.2.0",
     "glob": "^7.1.5",
+    "graphql": "^14.5.8",
     "mocha": "^6.2.2",
     "prettier": "^1.18.2",
     "tslint": "^5.20.0",

package.json

@@ -55,6 +55,7 @@
     "@types/jest": "^24.0.21",
     "@types/markdown-it": "0.0.9",
     "@types/node": "^12.12.5",
+    "@types/prismjs": "^1.16.0",
     "@types/ramda": "^0.26.33",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.9.3",

web-app/package-lock.json

@@ -5,7 +5,8 @@ import markdownEmoji from 'markdown-it-emoji'
 import prism from 'markdown-it-prism'
 import * as React from 'react'
 
-import './prism.css'
+// load prism styles & language support
+import './prism'
 
 // markdown highlighter instance
 const md: MarkdownIt = new MarkdownIt({

web-app/package.json

@@ -0,0 +1,13 @@
+// Themes - more at https://prismjs.com/examples.html
+import 'prismjs/themes/prism-tomorrow.css'
+
+// Language support
+import 'prismjs/components/prism-bash'
+import 'prismjs/components/prism-clike'
+import 'prismjs/components/prism-css'
+import 'prismjs/components/prism-git'
+import 'prismjs/components/prism-javascript'
+import 'prismjs/components/prism-json'
+import 'prismjs/components/prism-sql'
+import 'prismjs/components/prism-typescript'
+// TODO: import all - current list only supports js related

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

@@ -84,7 +84,7 @@ storiesOf('Level', module)
       steps: [
         {
           id: 'L1:S1',
-          content: 'Should support markdown test\n ```js\nvar a = 1\n```\nwhew it works!',
+          content: 'Should support markdown test\n ```shell\nnpn install some-packagen```\nwhew it works!',
           setup: { commits: ['a4679b1'], commands: [], files: ['package.json'] },
           solution: {
             commits: ['7c64508'],