我正在尝试开发一种用户友好的方式来设计 bash 命令的代码突出显示样式。我将使用以下示例来澄清问题这一页 https://themeaningfulengineer.github.io/Linux-kernel-in-QtCreator/.
在下面的动画中,您可以看到遵循教程的人想要复制命令也会复制路径示例,从而使复制粘贴过程更加复杂。
该路径必须存在,因为它向用户显示当前工作目录是什么。
我只想选择如下图所示的命令:
我对 HTML、CSS 和 Javascript 不太了解,正在寻找有关如何解决此问题的建议。
是否可以纯粹通过 CSS 通过为文本的特定部分提供自定义类来完成?
或者 Javascript 脚本可以自动检测$
在一条线上并自动禁用对某些部分的选择?这会占用大量资源吗?
您可以使用css
:before
伪元素
@charset "UTF-8";
.command {
font-family: monospace;
padding: 2px;
margin: 2px;
text-overflow: ellipsis;
background: #eee;
white-space: pre;
}
.command:nth-of-type(1n+1):before {
content: "~/workspace$ ";
background: #ccc;
}
.command:nth-of-type(2) ~ .command:before {
content: "~/workspace/linux$ ";
background: #ccc;
}
<code class="command"> git clone http://github.com/torvalds/linux.git</code><br>
<code class="command"> cd linux</code><br>
<code class="command"> make clean</code><br>
<code class="command"> make tinyconfig</code><br>
<code class="command"> make KBUILD_VERBOSE=1 | tee build.log</code><br>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)