MDX Writing Note

Published on
#MDX#NOTE

#
Import React Component

import at the top level
"import" at the start of a line is forbidden! breaks mdx bundler

Hello

#
metadata

title: The title of the post.
description: Description of the post.
slug: path-to-the-post
date: 2023-06-13
type: Post
tags: ['note','mdx','otherstuff']

#
Block Quote

this is a block quote

#
Table of Content

Only detect h2, h3, cannot contain special characters, e.g. ":"

#
Inline Codeblock

code block

#
External Link

link

#
Internal Link

This Post

#
codeblock Syntax Highlighting style is prism-tomorrow

addtional command including

  • show line number
    file.tsx
    function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Head>
        <meta name="viewport" content="viewport-fit=cover" />
      </Head>
      <LayoutWrapper>
        <Component {...pageProps} />
      </LayoutWrapper>
    </ThemeProvider>
  );
}
  • highlight specific code segments
    file.tsx
    function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ThemeProvider attribute="class">
      <Head>
        <meta name="viewport" content="viewport-fit=cover" />
      </Head>
      <LayoutWrapper>
        <Component {...pageProps} />
      </LayoutWrapper>
    </ThemeProvider>
  );
}
  • show difference 
    const a = 1;
- a = 2;
+ a = 2;
a = 3;
  • show title
    Hello.py
    print("Hello world!")

#
Show Image

have to place images at two places at the same time (inside public and public/images), since vercel build will automatically pull all images under public folder to a new folder 'images'

#
Horizontal Line

#
Rich Text?

bold

italic