Roy的个人站

樵夫的小站

马上订阅 Roy的个人站 RSS 更新: https://geofftools.cn/blog/atom.xml

博客代码框设置换行

2019年7月2日 20:02

博客里的代码框一直有个问题，每行的内容太长，代码框的宽度没法完整容纳一行。网上有过加横向滚动条、鼠标移上去就代码框自动加长这两种解决方案，但都不太美观。自动换行的方案符合大部分人的习惯，于是我研究了代码框的自动换行。本文设置了一个“行号和内容分开复制、代码自动换行并不影响自动高亮”的代码框，文中有可以用的代码以及用到属性的归纳。

基础的HTML代码

博客生成的代码框，格式经过简化就是如下的内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<figure class="highlight javascript">
    <table> <tbody> <tr>
        <td class="gutter">
            <pre>
            <span class="line">0</span><br>
            <span class="line">1</span><br>
            <span class="line">2</span><br>
            </pre>
        </td>
        <td class="code">
            <pre>
            <span class="line">"a "<span class="keyword">very</span>" very long line"</span><br>
            <span class="line">a very very long line</span><br>
            <span class="line">a very very long line</span><br>
            </pre>
        </td>
    </tr> </tbody> </table>
</figure>

这些代码均为自动生成，也没有什么可以讨论的。代码高亮通过span实现；由于代码与行号生成在两个td中，所以复制代码的时候不会复制到行号。

换行的CSS设置

换行涉及到三个内容，具体实现的代码为：

1
2
3
4
figure .code span {
    white-space:...
剩余内容已隐藏
查看完整文章以阅读更多
查看完整文章