code highlighting

components/FileListing.tsx

@@ -17,6 +17,7 @@ import { VideoPreview } from './previews/VideoPreview'
 import { AudioPreview } from './previews/AudioPreview'
 import FourOhFour from './FourOhFour'
 import TextPreview from './previews/TextPreview'
+import MarkdownPreview from './previews/MarkdownPreview'
 
 // Disabling SSR for some previews (image gallery view, and PDF view)
 const ReactViewer = dynamic(() => import('react-viewer'), { ssr: false })
@@ -200,7 +201,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           return <div>code</div>
 
         case preview.markdown:
-          return <div>markdown</div>
+          return <MarkdownPreview file={resp} />
 
         case preview.video:
           return <VideoPreview file={resp} />

components/previews/MarkdownPreview.tsx

@@ -0,0 +1,56 @@
+import { useEffect, FunctionComponent } from 'react'
+import axios from 'axios'
+import useSWR from 'swr'
+import Prism from 'prismjs'
+import ReactMarkdown from 'react-markdown'
+import gfm from 'remark-gfm'
+import remarkMath from 'remark-math'
+import rehypeKatex from 'rehype-katex'
+
+import 'katex/dist/katex.min.css'
+import 'github-markdown-css/github-markdown.css'
+
+import FourOhFour from '../FourOhFour'
+import Loading from '../Loading'
+import DownloadBtn from '../DownloadBtn'
+
+const fetcher = (url: string) => axios.get(url).then(res => res.data)
+
+const MarkdownPreview: FunctionComponent<{ file: any }> = ({ file }) => {
+  const { data, error } = useSWR(file['@microsoft.graph.downloadUrl'], fetcher)
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      Prism.highlightAll()
+    }
+  }, [data])
+
+  if (error) {
+    return (
+      <div className="shadow bg-white rounded p-3">
+        <FourOhFour errorMsg={error.message} />
+      </div>
+    )
+  }
+  if (!data) {
+    return (
+      <div className="shadow bg-white rounded p-3">
+        <Loading loadingText="Loading file content..." />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="markdown-body shadow bg-white rounded p-3">
+        <ReactMarkdown remarkPlugins={[gfm, remarkMath]} rehypePlugins={[rehypeKatex]}>
+          {data}
+        </ReactMarkdown>
+      </div>
+      <div className="mt-4">
+        <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
+      </div>
+    </>
+  )
+}
+
+export default MarkdownPreview

package.json

@@ -15,17 +15,26 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
     "@fortawesome/react-fontawesome": "^0.1.14",
     "axios": "^0.21.1",
+    "github-markdown-css": "^4.0.0",
     "next": "11.0.0",
+    "prismjs": "^1.23.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-markdown": "^6.0.2",
     "react-pdf": "^5.3.0",
     "react-player": "^2.9.0",
     "react-viewer": "^3.2.2",
+    "rehype-katex": "^5.0.0",
+    "remark-gfm": "^1.0.0",
+    "remark-math": "^4.0.0",
     "swr": "^0.5.6"
   },
   "devDependencies": {
+    "@types/prismjs": "^1.16.5",
     "@types/react": "17.0.11",
+    "@types/react-dom": "^17.0.8",
     "@types/react-pdf": "^5.0.4",
+    "@types/react-syntax-highlighter": "^13.5.1",
     "autoprefixer": "^10.2.6",
     "eslint": "7.29.0",
     "eslint-config-next": "11.0.0",

pages/_app.tsx

@@ -1,4 +1,5 @@
 import '../styles/globals.css'
+import '../styles/prism-github.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faFileImage,

styles/prism-github.css

@@ -0,0 +1,119 @@
+code[class*='language-'],
+pre[class*='language-'] {
+  color: #393a34;
+  font-family: 'SF Mono', 'Menlo', 'Consolas', 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;
+  direction: ltr;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  font-size: 0.9em;
+  line-height: 1.2em;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre > code[class*='language-'] {
+  font-size: 1em;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+  background: #b3d4fc;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+  background: #b3d4fc;
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+  padding: 1em;
+  margin: 0.5em 0;
+  overflow: auto;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+  padding: 0.2em;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  background: #f8f8f8;
+  border: 1px solid #dddddd;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #999988;
+  font-style: italic;
+}
+
+.token.namespace {
+  opacity: 0.7;
+}
+
+.token.string,
+.token.attr-value {
+  color: #e3116c;
+}
+
+.token.punctuation,
+.token.operator {
+  color: #393a34; /* no highlight */
+}
+
+.token.entity,
+.token.url,
+.token.symbol,
+.token.number,
+.token.boolean,
+.token.variable,
+.token.constant,
+.token.property,
+.token.regex,
+.token.inserted {
+  color: #36acaa;
+}
+
+.token.atrule,
+.token.keyword,
+.token.attr-name,
+.language-autohotkey .token.selector {
+  color: #00a4db;
+}
+
+.token.function,
+.token.deleted,
+.language-autohotkey .token.tag {
+  color: #9a050f;
+}
+
+.token.tag,
+.token.selector,
+.language-autohotkey .token.keyword {
+  color: #00009f;
+}
+
+.token.important,
+.token.function,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}