0

<code>要素内のすべての CSS カラー値を span タグでラップしたいと考えています。

したがって、この：

<code id="colorful-css">
body {
    color: black;
}
a {
    text-decoration: none;
    color: #0cf;
}
#box {
    outline: 1px solid rgb(255,0,0);
    background: hsla(235, 85%, 43%,.5);
}
</code>

これは次のようになります。

<code id="colorful-css">
body {
    color: <span class="css-color">black</span>;
}
a {
    text-decoration: none;
    color: <span class="css-color">#0cf</span>;
}
#box {
    outline: 1px solid <span class="css-color">rgb(255,0,0)</span>;
    background: <span class="css-color">hsla(235, 85%, 43%,.5)</span>;
}
</code>

ご協力いただきありがとうございます！

4

2 に答える 2

1

CSSを完全に解析する予定がなく、考えられる間違い（コメント、引用符など）を気にしない場合は、次のような式を使用できます。

#(?:[\da-f]{3}){1,2}\b|\b(?:rgba?|hsla?)\([^()]+\)|\b(?:red|blue|list|of|valid|color|names|...)\b

必要に応じて拡張。

于 2012-06-12T19:14:32.817 に答える
0

そのためにはシンタックス ハイライターが必要です。私はコーディングの専門家ではありませんが、Google Code Prettifyのようなプラグインを使用できます。

于 2012-06-12T19:00:59.780 に答える