tutorial summary in markdown

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

@@ -10,22 +10,49 @@ import './prism'
 // markdown highlighter instance
 const md: MarkdownIt = new MarkdownIt({
   breaks: true,
-  // highlight: syntaxHighlight,
   html: true,
   linkify: true,
 })
   // add emoji: https://github.com/markdown-it/markdown-it-emoji
   .use(markdownEmoji)
+  // add syntax highlighting through prism
   .use(prism, {
     defaultLanguage: 'js',
   })
 
+// const mdFeatures = [
+//   'table',
+//   'code',
+//   'fence',
+//   'blockquote',
+//   'hr',
+//   'list',
+//   'reference',
+//   'heading',
+//   'lheading',
+//   'html_block',
+//   'paragraph',
+//   'html_inline',
+//   'autolink',
+//   'link',
+//   'image',
+// ]
+
+// TODO: markdownIt with rules disabling most features
+// const minimalMarkdownIt = new MarkdownIt({
+//   breaks: false,
+//   html: true,
+//   linkify: false,
+// }).disable(mdFeatures)
+
 interface Props {
   children: string
+  minimal?: boolean
 }
 
 const Markdown = (props: Props) => {
   let html: string
+  // TODO: set md to minimal rule set if specified
   try {
     html = md.render(props.children)
   } catch (error) {

web-app/src/containers/New/TutorialList/TutorialItem.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import Card from '../../../components/Card'
+import Markdown from '../../../components/Markdown'
 
 const styles = {
   card: {
@@ -39,7 +40,7 @@ const LanguageIcon = () => (
 const TutorialItem = (props: Props) => (
   <Card onClick={props.onSelect} css={styles.card}>
     <h3>{props.title || 'Title'}</h3>
-    <p>{props.description || 'Description'}</p>
+    <Markdown minimal>{props.description || 'Description'}</Markdown>
     <div css={styles.languages}>
       <LanguageIcon />
     </div>