页面 显示 html 代码,html – 用于在网页上显示源代码的格式

本文探讨在HTML页面中格式化并显示带有行号的源代码块的需求,作者希望行号可选择性地复制,同时保持良好的布局。尝试了表格和DIV方法,但遇到宽度和选择性复制的问题。寻求关于实现这种功能的建议,特别是解决背景颜色延伸至浏览器右侧和换行时行号调整的问题。
摘要由CSDN通过智能技术生成

我正在研究Markdown命令行程序,我想在html输出中格式化源代码块比简单的< pre>< code> ….< / code>< /预取代.

我的标准是:

>我想要在每行前面显示行号

>我希望代码本身可以选择,这样我就可以只将代码(而不是行号)复制到剪贴板

我试图使用DIV,因为表似乎格式不好,但我对任何事情持开放态度.

我尝试了什么:

>单行表,单元格1是预/代码格式的行号块,单元格2是源代码.问题:带行号的第一列总是占用大量空间(自动调整宽度似乎变得困惑)

>具有多行的表,与具有1行的行相同的问题

> DIV,我似乎无法让DIV以我想要的方式布局

任何人都可以给我一个如何获得我想要的指针吗?

这是一个示例(明显的限制是我使用Markdown来显示这里的示例):

01 | Source code line 1

02 | Source code line 2

03 | Last line of source code

现在,如果我在第一行单击并选择,并向下拖动多行,我不希望选择包含行号列,否则这将很容易.

那么,任何指针?

我不需要的一个奖励功能是,如果我使窗口太窄而不能包含源代码,我不需要将它分成两行.我能理解该功能如何工作的唯一方法是单独格式化每一行,而不是单独格式化每一行,以便在发生换行时调整行号.由于我希望只能复制源代码,因此我认为我需要自己格式化每个列.

这是我尝试过的东西:

这有一个背景颜色的问题,我希望背景颜色一直延续到浏览器窗口的右侧,而是它停在恰好的代码右边,即.这样的事情:

+----+-------------+

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值