An Icon of ReoHakase

reoiam.dev
Reo HAKUTA

Open GitHub

📝 MDX Showcase

This page demonstrates the usage of MDX.

Created on January 26, 2024 at 12:00 AM

✨ Lorem ipsum dolor sit amet, consectetur adipisicing elit. A alias asperiores atque autem.

Headings

Headings can be added using # characters at the beginning of a line. The number of # you use will determine the size of the heading.

It will be rendered as <h1> for # and <h2> for ## and so on.

h1 Heading

h2 Heading

h3 Heading

h4 Heading

h5 Heading
h6 Heading
# h1 Heading
 
## h2 Heading
 
### h3 Heading
 
#### h4 Heading
 
##### h5 Heading
 
###### h6 Heading

Horizontal Rules

Horizontal rules can be added using --- or *** or ___ on a line by themselves.

It will be rendered as <hr>.

The first section

The second section

The first section
 
---
 
The second section

Emphasis

Simple inline emphasis styles are available using the following syntax:

This is bold text

This is italic text

Strikethrough

**This is bold text**
 
_This is italic text_
 
~~Strikethrough~~

Note

Strikethrough functionality is provided by GitHub Flavored Markdown plugin for remark remark-gfm.

Images

New Jeans, my love, a remote image
New Jeans, my love, a remote image
Shelfree, a local image
Shelfree, a local image

Blockquotes

Blockquotes can be added using > characters at the beginning of a line. Also, it can be nested by using additional > characters right next to each other or with spaces between arrows.

It will be rendered as <blockquote>.

Blockquotes can also be nested...

...by using additional greater-than signs right next to each other...

...or with spaces between arrows.

> Blockquotes can also be nested...
>
> > ...by using additional greater-than signs right next to each other...
> >
> > > ...or with spaces between arrows.

Lists

Unordered

Unordered lists can be added using +, -, or * characters at the beginning of a line.

It will be rendered as <ul> and <li>.

  • Create a list by starting a line with +, -, or *
  • Sub-lists are made by indenting 2 spaces:
    • Marker character change forces new list start:
      • Ac tristique libero volutpat at
      • Facilisis in pretium nisl aliquet
      • Nulla volutpat aliquam velit
  • Very easy!
- Create a list by starting a line with `+`, `-`, or `*`
- Sub-lists are made by indenting 2 spaces:
  - Marker character change forces new list start:
    - Ac tristique libero volutpat at
    * Facilisis in pretium nisl aliquet
    - Nulla volutpat aliquam velit
- Very easy!

Ordered

Ordered lists can be added using 1., 2., 3. and so on at the beginning of a line. You can also start counting with any number you want by using 1. at the beginning of a line.

It will be rendered as <ol> and <li>.

  1. Lorem ipsum dolor sit amet

  2. Consectetur adipiscing elit

  3. Integer molestie lorem at massa

  4. Integer molestie lorem at massa

  5. You can use sequential numbers...

  6. ...or keep all the numbers as 1.

Start numbering with offset:

  1. foo
  2. bar
1. Lorem ipsum dolor sit amet
2. Consectetur adipiscing elit
3. Integer molestie lorem at massa
4. Integer molestie lorem at massa
 
5. You can use sequential numbers...
6. ...or keep all the numbers as `1.`
 
Start numbering with offset:
 
57. foo
1. bar

Code

Thanks to rehype-pretty-code, syntax highlighting is available for both code blocks and inline code.

import rehypePrettyCode from 'rehype-pretty-code';

Inline code

A language can be specified by appending {:language_id} to the end of inline code.

e.g. console.log('Hi'){:js}.

Here is React component: export const MyComponent = (props: MyComponentProps): ReactNode => (...).

You can reduce re-rendering by using useMemo() hook: const memoizedValue = useMemo(() => runExpensiveEvaluation(a, b), [a, b]). By doing this, runExpensiveEvaluation(a, b) is only called when a or b changes instead of every render.

Here is React component: `export const MyComponent = (props: MyComponentProps): ReactNode => (...){:tsx}`.
 
You can reduce re-rendering by using `useMemo(){:ts}` hook: `const memoizedValue = useMemo(() => runExpensiveEvaluation(a, b), [a, b]){:tsx}`.
By doing this, `runExpensiveEvaluation(a, b){:ts}` is only called when `a{:ts}` or `b{:ts}` changes instead of every render.

Code blocks

You can specify a language for code blocks by appending language_id to the end of the opening fence ```. Also, you can add showLineNumbers to the end of the opening fence to show line numbers.

SyntaxDescription
```tsRenders codes with Typescript syntax highlighting
```c showLineNumbersRenders codes with Clang syntax highlighting and line numbers

It will be rendered as <pre><code>.

Sample text here...

#include <std.io>
 
int main(void){
  printf("Hello world");
}
export const generateStaticParams = async () => {
  const params = allContentDocuments.map((post) => ({
    slug: post._raw.flattenedPath.split('/'),
  }));
  console.log(params);
  return params;
};

Note

Code blocks are rendered using rehype-pretty-code and it internally uses shikiji. You can configure syntax highlighting themes in rehype-pretty-code config written in contentlayer.config.ts.

TeX TeX\TeX

TeX\TeX is also supported by using remark-math and rehype-katex.

If a function ff is continuous on [a,b][a, b], then there exists at least one number cc in [a,b][a, b] such that f(c)=1b−a∫abf(x)dxf(c) = \frac{1}{b-a} \int_a^b f(x) dx

π2=(∫0∞sin⁡xxdx)2=∑k=0∞(2k)!22k(k!)212k+1=∏k=1∞4k24k2−1 \frac{\pi}{2} = \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 = \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} = \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}

TeX\TeX

If a function $f$ is continuous on $[a, b]$, then there exists at least one number $c$ in $[a, b]$ such that $f(c) = \frac{1}{b-a} \int_a^b f(x) dx$
 
$$
  \frac{\pi}{2} =
  \left( \int_{0}^{\infty} \frac{\sin x}{\sqrt{x}} dx \right)^2 =
  \sum_{k=0}^{\infty} \frac{(2k)!}{2^{2k}(k!)^2} \frac{1}{2k+1} =
  \prod_{k=1}^{\infty} \frac{4k^2}{4k^2 - 1}
$$
 
$\TeX$

Tables

Left aligned columns

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Right aligned columns

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Center aligned columns

OptionDescription
datapath to data files to supply the data that will be passed into templates.
engineengine to be used for processing templates. Handlebars is the default.
extextension to be used for dest files.

Inline codes and math equations in tables

SyntaxOutput
`console.log('Hi'){:js}`console.log('Hi')
`from matplotlib import plot as plt{:py}`from matplotlib import plot as plt
$ \sum_{n=1}^{10} n^2 $∑n=110n2\sum_{n=1}^{10} n^2
$ \int_{0}^{\infty} e^{-x} dx $∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx

GFM Callouts

You can create colored callouts by using > [!NOTE], > [!TIP], > [!IMPORTANT], > [!WARNING], or > [!CAUTION] at the beginning of a line. Make sure to add double spaces after the closing ] character.

Alerts are an extension of Markdown used to emphasize critical information. On GitHub, they are displayed with distinctive colors and icons to indicate the importance of the content. Refer: https://github.com/orgs/community/discussions/16925

Note

Highlights information that users should take into account, even when skimming. console.log('Hi') ∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx This is bold text This is italic text Strikethrough

Tip

Optional information to help a user be more successful. console.log('Hi') ∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx This is bold text This is italic text Strikethrough

Important

Crucial information necessary for users to succeed. console.log('Hi') ∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx This is bold text This is italic text Strikethrough

Warning

Critical content demanding immediate user attention due to potential risks. console.log('Hi') ∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx This is bold text This is italic text Strikethrough

Caution

Negative potential consequences of an action. console.log('Hi') ∫0∞e−xdx\int_{0}^{\infty} e^{-x} dx This is bold text This is italic text Strikethrough

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.
> `console.log('Hi'){:js}` $\int_{0}^{\infty} e^{-x} dx$ **This is bold text** _This is italic text_ ~~Strikethrough~~
 
> [!TIP]  
> Optional information to help a user be more successful.
> `console.log('Hi'){:js}` $\int_{0}^{\infty} e^{-x} dx$ **This is bold text** _This is italic text_ ~~Strikethrough~~
 
> [!IMPORTANT]  
> Crucial information necessary for users to succeed.
> `console.log('Hi'){:js}` $\int_{0}^{\infty} e^{-x} dx$ **This is bold text** _This is italic text_ ~~Strikethrough~~
 
> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.
> `console.log('Hi'){:js}` $\int_{0}^{\infty} e^{-x} dx$ **This is bold text** _This is italic text_ ~~Strikethrough~~
 
> [!CAUTION]  
> Negative potential consequences of an action.
> `console.log('Hi'){:js}` $\int_{0}^{\infty} e^{-x} dx$ **This is bold text** _This is italic text_ ~~Strikethrough~~

GFM Autolink literals

URLs are automatically converted into clickable links.

www.example.com, https://example.com, and [email protected].

www.example.com, https://example.com, and [email protected].