归档 | 如何使用 Github Gist 来实现代码块高亮自由

[giscus[bot]]

归档 | 如何使用 Github Gist 来实现代码块高亮自由

利用 Hexo 是先构建再发布的模式，首先推送代码块到 Github Gist 并且生成 iframe 框架 并嵌入文章。

https://icodeq.com/2022/b3279810f9e4/

[zkeq]

细说一下 2022.12.23 遇到的 Safari 的 bug

事情是这样的，闲着没事，看看各大浏览器对自己博客的兼容性怎么样，Chrome 和 Firefox 都看了，没有什么离谱的问题

但是看到 Safari 时，竟然出现了这样的情况（加载页面的时候代码块为 display:none 时才会出现（也就是本主题的 tabs 组件用到的）

哈？为什么这么高啊，看一下宽度

好家伙，就三行代码块，你给我算的 900 多高度？？？我这代码是 用的 iframe 里 onload cthis.contentWindow.document.body.offsetHeight 算出来的啊？不会这么离谱 吧，于是采用 log 大法调试

console.log(this.contentWindow.document.body.offsetHeight);

一试不要紧

wk，这什么玩意啊，是不是我 log 写错了啊，看看隔壁 Edge ？

没问题啊，这才是正常的，打印 0 才对，于是我在随便试，发现我加载完页面，在控制台获取到的，竟然是另一个数：98 ?? 为什么是 98 咱也不知道，也没有相关可以搜到的

于是我就 setTimeout 1000ms 发现，居然所有异常的高度，居然真的变成 98 了？？？？离大谱

于是我就用这个 特性 勉强 修好了刚开始那个 bug

然而到这里，Safari 还有一个bug，就是当代码行数小于 18 行，并且页面有换行的时候，会出现底栏加载一半的情况，然后我尝试操作 iframe 加一个属性，就是当高度为 98 的时候，加一行 css 属性

document.body.style = "white-space: nowrap;";

一加不要紧，上面那个 bug 又出现了，算了，不修了 就这样吧

折腾了一下午 一直在 moving 也没完美解决，Safari 真难熬啊

这玩意我修好了，用最新代码吧

[penndu]

这个要学习下！