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:...

剩余内容已隐藏

查看完整文章以阅读更多