在nextjs中如何使用mdx,H1,一级标题

公告21，h2，二级标题

MDX Editor 服务器从 vercel 迁移到腾讯云

访问旧版请使用 https://editor.runjs.cool/post?id=demo

以上为引用，具体可以参考代码模版：https://editor.runjs.cool/

原分享地址：https://editor.runjs.cool/post?id=demo

修改为： https://editor.runjs.cool/post?id=demo

MDX 能干什么？222

它能够让我们在 markdown 中写 JSX

这是 2018 年，降水量柱状图。

1月

2月

3月

4月

5月

6月

7月

8月

9月

10月

11月

12月

首先这不是一张图片，而是用chart组件代码渲染的。

我看到很多公司的微信推文，很多地方都是用图片排版的，有很多设计师把大量的时间花了在文案和设计稿的校对上，我正借助了 MDX 的优势，开发了 MDX Editor，来互补微信排版的不足，只需要将文章写成 markdown 格式，便可以一键拷贝到微信公众号后台。

实现

Chart 这个组件定义在 config 中

function Chart({ data = [], color }) {
    return (
      <div className="snowfall">
        {data.map((d, i) => (
          <div
            key={i}
            className="snowfall-bar"
            style={{
              height: d * 20,
              backgroundColor: color,
            }}
          >
            <span>{i + 1}月</span>
          </div>
        ))}
      </div>
    )
  }
  
  export default Chart;
 
  //在需要的地方引入组件
  import Chart from '@/components/ui/chart'

再加点 css，添加到global.css

.snowfall {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
 
.snowfall-bar {
  flex-basis: 0;
  flex-grow: 1;
  margin: 4px;
  display: flex;
  justify-content: center;
  align-items: end;
  font-size: 10px;
  color: #eff6ff;
}

BACK