起因是 /t/363313，后来我需要在我的 blog 里面嵌入聊天截图，但是觉得截图的话太浪费，而且不能缩放，于是就打算实现一个微信的聊天界面。
例子：某篇博文的更新。（这个例子展示了如何添加自定义头像，以及使用表情，当书写的时候，表情就是 [表情的名字]。）
比如书写
```iPhone-SE-WeChat6
WeChat chat history with Sometwo
Sometwo
* 13:52
r ( S ) [ Sometwo ] Hi there!
* “ Sometwo ” has recalled a message.
s [ Me ] Hey! What did you recall?
r ( S ) [ Sometwo ] A typo.
```
得到的效果是
当然，一贯的考虑是必须符合 accessibility，所以该有的 aria 东西和高对比度模式的测试都不能少。另外打印的时候显然不希望这样，打印的时候会变成
因为这个比较简单，所以就不贴代码了……主要思路是在 Markdown 编译器处理代码块的时候加入自己的处理程序，以及写好 CSS 即可（注意：为了读屏器按照语义顺序阅读，应该用 ::before 生成头像，用 ::after 生成对话气球的小三角）。
Select Language