---
title: "MDX"
path: "MDX"
---

{%hackmd @RintarouTW/About %}

# MDX

https://mdxjs.com/

Markdown + JSX

實際上 MDX 是把 Markdown + JSX 最後編譯成 JSX，再由 React 編譯成 HTML + CSS-in-JS。

# Introduction of MDX in Gatsby

https://alligator.io/gatsbyjs/mdx-in-gatsby/

## Pros:

可在 Markdown 中直接寫 JSX Component，簡單畫面應用而言更直覺。

可在 Markdown 中直接寫 script，可以做不只是被動的 Component。

## Cons:

對於一些 Markdown 延伸語法支援度很低。

Markdown 中不可寫純 html css style `<style></style>` 會被當成 JSX，自然是過不了 React 那關。
(custom tag/plugin -> emotion 的話能解決才對)

Reusability 恐怕不如純 JSX。

**mdx** 尚不夠成熟，$\LaTeX$ 表達式中的 `$$` 會被吃掉，`remark-mathjax` 也救不了，會變成 `undefined`，只能用 `gatsby-remark-katex` 做 SSR 來補救。

https://github.com/gatsbyjs/gatsby/issues/16983

或只用 `remark-math` 的 work-around

###### tags: `mdx`