Published on

Markdown Guide_mdx処理の解説付

date: 2019-10-11 ➡ mod: 2023-10-18

Introduction

Markdown and Mdx parsing is supported via unified, and other remark and rehype packages. next-mdx-remote allows us to parse .mdx and .md files in a more flexible manner without touching webpack.

GitHub flavored markdown is used. mdx-prism provides syntax highlighting capabilities for code blocks. Here's a demo of how everything looks.

MarkdownおよびMdxのパースは、unifiedおよび他のremarkおよびrehypeパッケージを介してサポートされています。next-mdx-remoteを使用すると、webpackに触れることなく.mdxおよび.mdファイルをより柔軟にパースできます。GitHubフレーバーのマークダウンが使用されています。 mdx-prismはコードブロックのシンタックスハイライト機能を提供します。以下は、すべてがどのように表示されるかのデモです。

The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/

next-mdx-remote

外部のソースから MDX コンテンツをフェッチし、それを Next.js ページの中でレンダリングすることができる。

使い方：

  1. install
yarn add next-mdx-remote

  1. mdxコンテンツのfetch、rerialize処理、MDXRemoteコンポーネント使用

    外部の CMS からコンテンツを取得例：Notion

    • Notion APIからMDXコンテンツをフェッチ_async function getStaticProps
    • フェッチしたデータをnext-mdx-remoteで使用_default function Post
    // pages/post/[id].js
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
import axios from 'axios'

export default function Post({ mdxSource }) {
  return (
    <article>
      <MDXRemote {...mdxSource} />
    </article>
  )
}

export async function getStaticPaths() {
  // Notion APIからページのIDを取得するコードをここに書きます。
}
export async function getStaticProps({ params }) {
  // Notion APIからMDXコンテンツをフェッチします。
  const { data } = await axios.get(`https://api.notion.com/v1/pages/${params.id}`, {
    headers: {
      Authorization: `Bearer YOUR_NOTION_API_SECRET`,
    },
  })
  // ここでMDXコンテンツの部分を抜き取ります。具体的な方法は、取得したデータの形式に依ります。
  const mdxContent = data.results[0].properties.YOUR_NOTION_COL_NAME.rich_text[0].plain_text
  // MDXコンテンツをシリアライズ(保存・転送可能な形式に変換)します。
  const mdxSource = await serialize(mdxContent)
  return {
    props: {
      mdxSource,
    },
  }
}

※　JSONの場合は、JSON.stringifyメソッドがシリアライズに該当する

ただし、Notion APIから直接MDX形式のデータを取得するのは難しいかもしれません。通常、Notion APIから取得したデータは、リッチテキストやブロック形式であり、それをMDXとして扱うには変換が必要になる可能性がある。

※ JSONの場合は、JSON.stringifyメソッドがシリアライズに該当する

What is Markdown?

Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like # or *.

Syntax guide

Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files.

Headers

# This is a h1 tag

## This is a h2 tag

#### This is a h4 tag

This is a h1 tag

This is a h2 tag

This is a h4 tag

Emphasis

_This text will be italic_

**This text will be bold**

_You **can** combine them_

This text will be italic

This text will be bold

You can combine them

Lists

Unordered

- Item 1
- Item 2
  - Item 2a
  - Item 2b
  • Item 1
  • Item 2
    • Item 2a
    • Item 2b

Ordered

1. Item 1
1. Item 2
1. Item 3
   1. Item 3a
   1. Item 3b
  1. Item 1
  2. Item 2
  3. Item 3
    1. Item 3a
    2. Item 3b

Images

![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
Format: ![Alt Text](url)

GitHub Logo

Links

http://github.com - automatic!
[GitHub](http://github.com)

http://github.com - automatic! GitHub

Blockquotes

As Kanye West said:

> We're living the future so
> the present is our past.

As Kanye West said:

We're living the future so the present is our past.

Inline code

I think you should use an
`<addr>` element here instead.

I think you should use an <addr> element here instead.

Syntax highlighting

Here’s an example of how you can use syntax highlighting with GitHub Flavored Markdown:

```js:fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}
```

And here's how it looks - nicely colored with styled code titles!

fancyAlert.js
function fancyAlert(arg) {
  if (arg) {
    $.facebox({ div: '#foo' })
  }
}

Footnotes

Here is a simple footnote[^1]. With some additional text after it.

[^1]: My reference.

Here is a simple footnote1. With some additional text after it.

Task Lists

- [x] list syntax required (any unordered or ordered list supported)
- [x] this is a complete item
- [ ] this is an incomplete item
  • list syntax required (any unordered or ordered list supported)
  • this is a complete item
  • this is an incomplete item

Tables

You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |:

| First Header                | Second Header                |
| --------------------------- | ---------------------------- |
| Content from cell 1         | Content from cell 2          |
| Content in the first column | Content in the second column |
First HeaderSecond Header
Content from cell 1Content from cell 2
Content in the first columnContent in the second column

Strikethrough

Any word wrapped with two tildes (like ~~this~~) will appear crossed out.

アラート

これはできないようだ。。。

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

> [!IMPORTANT]
> Crucial information necessary for users to succeed.

> [!WARNING]
> Critical content demanding immediate user attention due to potential risks.

[!NOTE] Highlights information that users should take into account, even when skimming.

[!IMPORTANT] Crucial information necessary for users to succeed.

[!WARNING] Critical content demanding immediate user attention due to potential risks.

Footnotes

  1. My reference. ↩