パスを無視してbashコマンド用のブラウザのコードブロック

Question

私はbashコマンドのコードハイライトをスタイリングするためのユーザーフレンドリーな方法を開発しようとしています。病気の例はthis pageです。

以下のアニメーションでは、コマンドをコピーしたいチュートリアルに従っている人がパスの例をコピーし、コピー・ペースト・プロセスをより複雑にしていることが分かります。それは現在の作業ディレクトリが何であるか、人を示しているため

パスが存在する必要があります。

私はHTML、CSSとJavaScriptについて多くを知らないとする方法についての提案を探しています：下の画像に示すように

私は選択コマンドだけを持っていると思いますこれにアプローチする。

純粋にCSSによって、テキストの特定の部分のカスタムクラスを持つことができますか？

また、JavaScriptスクリプトが自動的に$を検出し、特定の部分の選択を自動的に無効にすることはできますか？これは資源集中型でしょうか？あなたが使用することができます

Answer 1

擬似要素

@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>

Answer 2

このソリューションは、@のguest271314ソリューションに基づいておりcss:beforeので、すべてのクレジットは彼に行く必要があります！ここで

は、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 />

Answer 3

あなたはディレクトリを含むように::before擬似要素を使用することができますデフォルトでは選択できません。例では：私はPlunkerはこれをテストするために作った

<style> 
    p::before { 
    content: attr(data-dir); 
    display: inline-block; 
    margin-right: 10px; 
    } 
</style> 

<p data-dir="user@system:/stuff">git init</p> 
<p data-dir="user@system:/stuff">git add -A .</p> 
<p data-dir="user@system:/stuff">git commit -m "Lorem ipsum dolor"</p> 

、あなたはここでそれを見ることができます： http://plnkr.co/edit/43TM1FXBXQlZvEcsmLDL?p=preview