Add syntax highlighting

pbteja1998 · pbteja1998 · commit 905f700868c1 · 2021-02-28T10:44:49.000+05:30
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "next-themes": "0.0.11",
     "nightwind": "1.1.6",
     "phosphor-react": "1.1.2",
+    "prism-react-renderer": "1.2.0",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "react-hook-form": "6.15.4",
diff --git a/src/components/Code.tsx b/src/components/Code.tsx
@@ -0,0 +1,89 @@
+import Highlight, { defaultProps, Language } from 'prism-react-renderer'
+import theme from 'prism-react-renderer/themes/nightOwl'
+
+const aliasesMap: Record<Language, string[]> = {
+  markup: [],
+  bash: ['sh', 'shellscript'],
+  clike: [],
+  c: [],
+  cpp: [],
+  css: [],
+  javascript: ['js'],
+  jsx: [],
+  coffeescript: [],
+  actionscript: [],
+  'css-extr': [],
+  diff: [],
+  git: [],
+  go: [],
+  graphql: [],
+  handlebars: [],
+  json: [],
+  less: [],
+  makefile: [],
+  markdown: [],
+  objectivec: [],
+  ocaml: [],
+  python: ['py', 'py3'],
+  reason: [],
+  sass: [],
+  scss: [],
+  sql: [],
+  stylus: [],
+  tsx: [],
+  typescript: ['ts'],
+  wasm: [],
+  yaml: [],
+}
+
+function Code({
+  children,
+  className,
+}: {
+  children: string
+  className: string
+}) {
+  let languageOfCode = (className?.split('-')?.[1] ?? '') as any
+  const languages = Object.keys(aliasesMap) as Array<keyof typeof aliasesMap>
+  if (!languages.includes(languageOfCode)) {
+    for (const lang of languages) {
+      const aliases = aliasesMap[lang]
+      const match = aliases.find(
+        // eslint-disable-next-line no-loop-func
+        (language) => language === languageOfCode
+      )
+      if (match) {
+        languageOfCode = lang
+        break
+      }
+    }
+  }
+
+  return (
+    <Highlight
+      {...defaultProps}
+      theme={theme}
+      code={children}
+      language={languageOfCode}
+    >
+      {({ className, style, tokens, getLineProps, getTokenProps }) => (
+        <pre className={className} style={style}>
+          <code>
+            {tokens.map((line, i) => (
+              <div {...getLineProps({ line, key: i })}>
+                {line.map((token, key) => (
+                  <span {...getTokenProps({ token, key })} />
+                ))}
+              </div>
+            ))}
+          </code>
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+
+export function Pre({ children }) {
+  const props = children.props
+  return <Code {...props}></Code>
+}
diff --git a/src/components/Markdown.tsx b/src/components/Markdown.tsx
@@ -1,6 +1,6 @@
 import MarkdownOriginal, { MarkdownToJSX } from 'markdown-to-jsx'
 import React from 'react'
-import { A } from '.'
+import { A, Pre } from '@/components'
 
 export default function Markdown(props: {
   [key: string]: any
@@ -18,6 +18,9 @@ export default function Markdown(props: {
           a: {
             component: A,
           },
+          pre: {
+            component: Pre,
+          },
         },
       }}
     />
diff --git a/src/components/index.tsx b/src/components/index.tsx
@@ -11,3 +11,4 @@ export { default as Markdown } from './Markdown'
 export { default as HomePageFeed } from './HomePageFeed'
 export { default as Hero } from './Hero'
 export * from './modal'
+export { Pre } from './Code'
diff --git a/yarn.lock b/yarn.lock
@@ -4643,6 +4643,11 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
+prism-react-renderer@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.2.0.tgz#5ad4f90c3e447069426c8a53a0eafde60909cdf4"
+  integrity sha512-GHqzxLYImx1iKN1jJURcuRoA/0ygCcNhfGw1IT8nPIMzarmKQ3Nc+JcG0gi8JXQzuh0C5ShE4npMIoqNin40hg==
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
