如何实现在markdown中渲染iframe

在Markdown中渲染iframe有两种方案:一种是直接嵌入iframe以HTML语法(1),另一种是重写a标签将其转化为iframe(3)。使用的Markdown渲染器是remarkjs/react-markdown。可以通过引入rehypeRaw插件实现在Markdown中嵌入HTML。另外,还可以通过重写a标签的组件来将链接转化为iframe展示。
demo展示地址:Create Next App
notion image
有两种方案,第一种是iframe以html的语法嵌入(1),第二种是重写a标签把它转化为iframe(3)。

iframe直接嵌入markdown

参考:
也就是引入rehypeRaw这个rehypePlugin,实现在markdown中嵌入html。
(谨慎使用,需要保证html内容安全的情况下嵌入)

a标签转化为iframe

在某些情况下我们需要把a标签的对应的网页直接展示出来,这个时候就要把a标签转化为iframe了。实现的方法是重写a这个组件。
下面是我的写法,我需要把链接中有/agent/special的所有的链接都以iframe的形式展示出来。于是做了一个特殊判断来实现这个逻辑。对于其他的不满足要求的a标签,则直接渲染为a标签即可。
这里还可以做一些拓展的写法,比如检查到网易云的音乐链接,就在前面加一个网易云的logo,如果检测到外链那么点击的时候打开新的窗口等等。
 
 
上一篇
open graph简述
下一篇
如何更加直接地查看浏览器内核