搞了一下午CSS，终于让EPUB显示代码块了
2025-06-07 08:23:50
搞了一下午CSS，终于让EPUB显示代码块了
开发 ZinFlow 新功能中，最近在优化内容显示。今天下午死磕EPUB中代码块的样式问题，差点把我整崩溃了🤯\n \n问题起源\n事情是这样的，用户反馈说技术文章用ZinFlow转成EPUB格式后，代码块显示得一塌糊涂——要么字体不等宽，要么背景色不对，要么直接换行错乱。\n作为一个有强迫症的开发者，这怎么能忍？\n \n踩坑过程\n一开始我天真地以为，不就是个CSS样式问题嘛，分分钟搞定。结果现实给了我一巴掌：\n第一坑：字体渲染 EPUB阅读器对自定义字体的支持千差万别，Consolas在某些设备上根本加载不出来。最后只能用font-family写一长串fallback。\n第二坑：容器宽度 代码块超出屏幕宽度时，有的阅读器强制换行，有的显示滚动条，有的直接截断。调了半天overflow和white-space属性。\n第三坑：语法高亮 原本想直接用highlight.js，发现EPUB的安全策略不允许执行JavaScript。只能将就了暂时不显示语法高亮了。\n \n现状和后续\n目前代码块显示效果已经达到了比较满意的程度。但Kindle的适配还是个大工程，那个古老的渲染引擎真的是...算了不吐槽了😅这个星期不知道计划中极简模式能不能做完，感觉这玩意儿能极大提升电子书的阅读体验的。我自己很憧憬的。\n \n感想\n做技术产品真的不容易，每个看似简单的功能背后都有无数的细节要处理。但看到用户反馈说\"终于可以舒服地在手机上看技术书了\"，所有的熬夜加班都值得了。\n继续搬砖去了，这几天还要测试Kindle的兼容性...希望不要再踩新坑了🙏\n \n最后做个广告，618促销进行中，首月限免，大家踊跃参加啊，反正第一个月不要钱，试试不损失啥。\n \n#Kindle #iOS开发 #ZinFlow #epub #电子书