在 Markdown 中使用 Next/Image 和 Syntax Highlight

图片加载

问题：

NextJS 自带 Image Component，可以对图片的尺寸还有加载做自动优化，但是不能直接用在生成博客的 Markdown 文档中。

解决办法：

使用 react-markdown 替换 官方博客模板 中的 remark，通过使用前者写个性化的 component 实现 Markdown 转 HTML 时应用 Next/Image。

参考：

教程1：Using NextJS and Next/Image with MDX Markdown Processing

教程2：Use Next/Image with React Markdown

备注：

教程 1 好在完全基于官方模板博客代码说明，用的也是默认的 JS，更容易理解，虽然我还是对着自己的版本连蒙带猜搞了半天才算明白咋回事。最后竟然有个坑，它教的方法图片来源是在线的，不是自己本地的...还有一个问题是它里面用的 renders，但现已被 react-markdown 改用 components 替换。

最终实现靠的是教程 2 的方法和代码，原理倒是相通。另外如此一来，图片的尺寸要在 Markdown 中注明或是统一大小，不然会有拉神或压缩，还是不太好用...

代码块语法高亮

print("Done!")

print("So funky, so funny!")

这个老大难问题终于一起解决掉了，和前面的方法一样，使用 react-syntax-highlighter 给 react-markdown 写 componet，代码直接参考 react-markdown 官方页面给出的示例。

备注：

官方代码导入时用的是 esm， 会报错 Unexpected token 'export' 巴拉巴拉的，改成 cjs 就好了；另外主题名字有横杠的，导入时去掉横杠、后一个单词首字母大写 👇

import {funky} from 'react-syntax-highlighter/dist/cjs/styles/prism'

Markdown 中的 HTML（如 iframe）

出于安全考虑，通常 react-markdown 会忽略 HTML（skipHtml），如果需要的话（如音乐嵌入），安装并使用 rehype-raw，具体操作 官方指南附录 a 有清楚说明。

备注：

还有其他一些插件如支持数学公式输入等可以安装使用。