在浏览器中的代码块，用于忽略路径的bash命令 [英] Code block in a browser for bash commands ignoring path

问题描述

我试图开发一种用户友好的方式来为bash命令的代码高亮显示样式。请使用

路径需要在那里，因为它显示的人当前工作目录为

我想只有可选择的命令，如下图所示：

我不太了解HTML，CSS和Javascript，并且正在寻找如何建议接近这个。

可以通过为文本的特定部分添加自定义类来完全由CSS完成

JavaScript脚本能否自动检测线上的 $ ，并自动禁用某些部件的选择？

解决方案

这个解决方案基于@ guest271314解决方案，所以所有的功劳都应该去他！ / p>

这里是一个升级版本，它不需要你把值放在CSS：

  @charsetUTF-8;。command {font-family：monospace; padding：2px; margin：2px; text-overflow：wrap;背景：#eee; white-space：pre;}。command：before {content：attr（data-content）; background：#ccc;}  

 < code class = commanddata-content =〜/ workspace $> git clone http://github.com/torvalds/linux.git</code><br />< code class =commanddata-content =〜/ workspace $> cd linux< / code>< br />< code class =commanddata-content =〜/ workspace / linux $> make clean< / code>< br />< code class =commanddata-content =〜/ workspace / linux $> make tinyconfig< / code>< br />  

I'm trying to develop a user friendly way for styling the code highlighting for bash commands. Ill clarify the question using the example from this page.

On the animation below, you can see that someone following the tutorial who want's to copy the commands will also copy the path example, making the copy-paste process more complicated.

The path needs to be there because it shows the person what the current working directory is.

I would like to have only the commands selectable as shown on the picture below:

I don't know much about HTML, CSS and Javascript and am looking for a suggestion on how to approach this.

Can it be done purely by CSS by having custom classes for the specific part of the text?

Or can a Javascript script automatically detect a $ on a line and automatically disable selecting for certain parts? Would this be resource intensive?

解决方案

This solution is based on @guest271314 solution, so all the credit should go to him!

Here is an "upgrade version" which doesn't require you to put the values in the CSS:

@charset "UTF-8";

.command {
  font-family: monospace;
  padding: 2px;
  margin: 2px;
  text-overflow: wrap;
  background: #eee;
  white-space: pre;
}
.command:before {
  content: attr(data-content);
  background: #ccc;
}

<code class="command" data-content="~/workspace $ "> git clone http://github.com/torvalds/linux.git</code><br />
<code class="command" data-content="~/workspace $ "> cd linux</code><br />
<code class="command" data-content="~/workspace/linux $ "> make clean </code><br />
<code class="command" data-content="~/workspace/linux $ "> make tinyconfig </code><br />

这篇关于在浏览器中的代码块，用于忽略路径的bash命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！