尝试实时渲染“截图“

sorcererxw•2019年1月21日

声明：这篇文章其实是2018年8月写的，但是由于当时使用 Wordpress，而现在使用了自建的 Notion 博客，所以对网页渲染方式修改了一下，重新发布了文章。

今天看到 v2ex 上有人分享这篇博文, 比较有意思的是文章内的截图使用了 HTML+CSS 直接渲染, 而不是贴图. 觉得这个方式非常有意思, 首先就是图片不需要托管在图床上面了, 直接内嵌在文章当中, 方便备份. 而且, 因为是直接渲染的原因, 可以做到最大程度的高分辨率, 网页加载速度也会更快. 不过缺点就是麻烦, 而且各个平台的显示效果会存在差异. 不过不管怎样, 不如实践一下.

渲染 HTML¶

因为我一直都是使用 markdown 进行编辑文章, 正好我现在使用的博客系统是 WordPress, 所以我使用了WP Editor.MD进行文章编辑. 在设置当中开启支持HTML即可当然, 其他的 md 编辑器, 只要支持 HTML 渲染都是没问题的. 这样一来, 不需要其他标记, 直接写 dom 就能渲染出来, 试着渲染一个 button 出来

<pre>
example:<button type="button">button</button>
</pre>

example:

渲染 CSS¶

渲染了 HTML之后, 如果要真的渲染成一张图片, 还需要加入 CSS 样式.

inline-style¶

这是最直观的方式, 是直接将样式属性写在 tag 的 style 属性里面

style 标签¶

直接行内写样式最大的缺点就是不方便管理, 无法享受到 CSS 的好处. 在不加载 CSS 的前提下, 可以在 HTML 里面插入 <style> 标签, 来实现 CSS 的使用.

<div>
    <style>
        ._myroot {
            background-color: #f6f6f6;
            padding:8px;
            border-color: #dddddd;
            border-style: solid;
            border-width: 1px;
            border-radius: 4px;
        }
        ._myroot>span {
            font-size: 2rem;
            color: blue
        }
    </style>
    <div class="_myroot">
        <span>span</span>
        <p>paragraph</p>
    </div>
</div>

span

paragraph

这里我就用 div 来模拟了 pre 标签的样式值得注意的是, style 标签的载入, 其中的样式会覆盖页面中已有的样式, 所以不能直接对标签进行加样式. 应该通过自定义 class 名或者 id 来配置样式, 就算是这样, 也要避免和页面中其他元素重名. 如果需要用到对标签加载样式, 请通过 CSS 选择器选中根元素下方的标签.