add syntax highlighting for code blocks

web-app/package.json

@@ -4,9 +4,9 @@
   "private": true,
   "dependencies": {
     "@alifd/next": "^1.15.12",
-    "highlight.js": "^9.15.8",
     "markdown-it": "^9.0.1",
     "markdown-it-emoji": "^1.4.0",
+    "markdown-it-prism": "^2.0.2",
     "moment": "^2.24.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",

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

@@ -1,30 +1,24 @@
-import syntaxHighlighter from 'highlight.js'
 import MarkdownIt from 'markdown-it'
 // @ts-ignore no types for package
 import markdownEmoji from 'markdown-it-emoji'
+// @ts-ignore no types for package
+import prism from 'markdown-it-prism'
 import * as React from 'react'
 
-// syntax highlighting https://github.com/markdown-it/markdown-it
-const syntaxHighlight = (str: string, lang: string) => {
-  if (lang && syntaxHighlighter.getLanguage(lang)) {
-    try {
-      return syntaxHighlighter.highlight(lang, str).value
-    } catch (__) {
-      // ignore
-    }
-  }
-  return '' // use external default escaping
-}
+import './prism.css'
 
 // markdown highlighter instance
 const md = new MarkdownIt({
   breaks: true,
-  highlight: syntaxHighlight,
+  // highlight: syntaxHighlight,
   html: true,
   linkify: true,
 })
   // add emoji: https://github.com/markdown-it/markdown-it-emoji
   .use(markdownEmoji)
+  .use(prism, {
+    defaultLanguage: 'js',
+  })
 
 interface Props {
   children: string

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

@@ -0,0 +1,125 @@
+/* PrismJS 1.16.0
+https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+typescript+jsx+tsx */
+/**
+ * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
+ * Based on https://github.com/chriskempson/tomorrow-theme
+ * @author Rose Pritchard
+ */
+
+code[class*="language-"],
+pre[class*="language-"] {
+	color: #ccc;
+	background: none;
+	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+	font-size: 1em;
+	text-align: left;
+	white-space: pre;
+	word-spacing: normal;
+	word-break: normal;
+	word-wrap: normal;
+	line-height: 1.5;
+
+	-moz-tab-size: 4;
+	-o-tab-size: 4;
+	tab-size: 4;
+
+	-webkit-hyphens: none;
+	-moz-hyphens: none;
+	-ms-hyphens: none;
+	hyphens: none;
+
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+	padding: 1em;
+	margin: .5em 0;
+	overflow: auto;
+}
+
+:not(pre) > code[class*="language-"],
+pre[class*="language-"] {
+	background: #2d2d2d;
+}
+
+/* Inline code */
+:not(pre) > code[class*="language-"] {
+	padding: .1em;
+	border-radius: .3em;
+	white-space: normal;
+}
+
+.token.comment,
+.token.block-comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: #999;
+}
+
+.token.punctuation {
+	color: #ccc;
+}
+
+.token.tag,
+.token.attr-name,
+.token.namespace,
+.token.deleted {
+	color: #e2777a;
+}
+
+.token.function-name {
+	color: #6196cc;
+}
+
+.token.boolean,
+.token.number,
+.token.function {
+	color: #f08d49;
+}
+
+.token.property,
+.token.class-name,
+.token.constant,
+.token.symbol {
+	color: #f8c555;
+}
+
+.token.selector,
+.token.important,
+.token.atrule,
+.token.keyword,
+.token.builtin {
+	color: #cc99cd;
+}
+
+.token.string,
+.token.char,
+.token.attr-value,
+.token.regex,
+.token.variable {
+	color: #7ec699;
+}
+
+.token.operator,
+.token.entity,
+.token.url {
+	color: #67cdcc;
+}
+
+.token.important,
+.token.bold {
+	font-weight: bold;
+}
+.token.italic {
+	font-style: italic;
+}
+
+.token.entity {
+	cursor: help;
+}
+
+.token.inserted {
+	color: green;
+}
+

web-app/stories/Step.stories.tsx

@@ -27,8 +27,12 @@ storiesOf('Tutorial SideBar', module)
     <Step
       content={object('content', {
         text: `Markdown included \`code\`, *bold*, & _italics_.
-\`\`\`
+\`\`\`javascript
 var a = 12
+
+function example(a) {
+  return a + 1
+}
 \`\`\`
 
 Headers can be added: