UI enhancements

pages/notes/[page].tsx

@@ -1,8 +1,8 @@
 import Layout from '../../components/layout';
 import { getAllNotes, getNote } from '../../util/slug';
 import ReactMarkdown from 'react-markdown';
-import { Prism } from 'react-syntax-highlighter';
-import dark from 'react-syntax-highlighter/dist/cjs/styles/prism/material-oceanic';
+import SyntaxHighlighter from 'react-syntax-highlighter';
+import { monokaiSublime } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
 import remarkGfm from 'remark-gfm';
 
 function Note({ note }: any) {
@@ -10,20 +10,26 @@ function Note({ note }: any) {
         <Layout name={note.title} title={note.title} ancestors={[{ name: 'Notes', path: 'notes' }]}>
             <section className='block'>
                 <ReactMarkdown
-                    remarkPlugins={[remarkGfm]} 
+                    remarkPlugins={[remarkGfm]}
                     components={{
                         code({ node, inline, className, children, ...props }) {
                             const match = /language-(\w+)/.exec(className || '')
-                            return !inline && match ? (
-                                <Prism 
-                                    language={match[1]}
-                                    style={dark}
-                                    PreTag='div'
-                                    {...props}
-                                >{String(children).replace(/\n$/, '')}</Prism>
-                            ) : <code className={className} {...props}>
-                                {children}
-                            </code>
+                            return !inline && match
+                                ? (
+                                    <SyntaxHighlighter
+                                        showLineNumbers={true}
+                                        language={match[1]}
+                                        style={monokaiSublime}
+                                        wrapLongLines={true}
+                                        PreTag='div'
+                                        codeTagProps={{style: {display: 'block'}}}
+                                        customStyle={{padding:'0', borderRadius: '1rem', maxHeight: '400px'}}
+                                        {...props}
+                                    >{children}</SyntaxHighlighter>
+                                )
+                                : <code className={className} {...props}>
+                                    {children}
+                                </code>
                         }
                     }}
                 >{note.content}</ReactMarkdown>

pages/notes/index.tsx

@@ -5,13 +5,15 @@ import { getNotesMeta, NoteMeta } from '../../util/slug';
 function NotesPage({ notesMeta }: { notesMeta: NoteMeta[] }) {
     return (
         <Layout name='Notes'>
-            {notesMeta && notesMeta.map((note: NoteMeta, i) => {
-                return <section key={i} className='h5 block'>
-                    <Link href={`/notes/${note.slug}`}>
-                        {note.title}
-                    </Link>
-                </section>
-            })}
+            <div className='text center block'>
+                {notesMeta && notesMeta.map((note: NoteMeta, i) => {
+                    return <div key={i} className='h5'>
+                        <Link href={`/notes/${note.slug}`}>
+                            {note.title}
+                        </Link>
+                    </div>
+                })}
+            </div>
         </Layout>
     )
 }