ブログで表示しているコードに色をつけたい
Q&A
Closed
解決したいこと
HTMLで表示するプログラミングのコードに色をつけたい
半年ほど前にブログを始めました。
プログラミングのことについての記事が多いので、プログラムコードを示すときがあるのですが、最近見にくいなぁーと思ったので修正しようと思っています。
今は、次のようなHTMLコードでプログラムコードを示しています。
<p class="code">const text = "text";
console.log(text);<span class="fadeUp" style="display: none;"><i class="fa-regular fa-circle-check"></i>copied!</span></p>
"はダブルクォーテーションの正規表記です。
このサイトで変換させていただいております
(横スクロールできるようにdiv > pre > codeという感じにしようと思っていますが、まだやってません。)
さっきのコードの
<span class="fadeUp" style="display: none;"><i class="fa-regular fa-circle-check"></i>copied!</span>
この部分は、コードをクリックしたときにコピーする時のアニメーションに使用しています。
話を戻すと、色をつけたいと思ってQiitaやZennのコードを調べてみました。
すると、いずれもdiv > pre > code > たくさんのspanタグという構造になっていました。
たくさんのspanタグというのは、それぞれコメントアウト < > || - var let const importなどの文字の種類？(ダブルクォーテーション・クラス名)ごとに、クラス名を付与したspanタグで作られていました。
おそらく、示したいコードを変換ツール的なものに通してそういうspanタグを生成しているのだと思います。
Qiitaのコード
<div class="highlight">
<pre>
<code>
<span class="c"><!-- Google tag (gtag.js) --></span>
<span class="nt"><script </span>
<span class="na">async=</span>
<span class="s">""</span>
<span class="na">src=</span>
<span class="s">"https://www.googletagmanager.com/gtag/js?id=---ID---"</span>
<span class="nt">></script></span>
<span class="nt"><script></span>
<span class="nb">window</span>
<span class="p">.</span>
<span class="nx">dataLayer</span>
<span class="o">=</span>
<span class="nb">window</span>
<span class="p">.</span>
<span class="nx">dataLayer</span>
<span class="o">||</span>
<span class="p">[];</span>
<span class="kd">function</span>
<span class="nf">gtag</span>
<span class="p">(){</span>
<span class="nx">dataLayer</span>
<span class="p">.</span>
<span class="nf">push</span>
<span class="p">(</span>
<span class="nx">arguments</span>
<span class="p">);}</span>
<span class="nf">gtag</span>
<span class="p">(</span>
<span class="nx">js</span>
<span class="p">,</span>
<span class="k">new</span>
<span class="nc">Date</span>
<span class="p">());</span>
<span class="nf">gtag</span>
<span class="p">(</span>
<span class="nx">config</span>
<span class="p">,</span>
<span class="o">---</span>
<span class="nx">ID</span>
<span class="o">---</span>
<span class="p">);</span>
<span class="nt"></script></span>
</code>
</pre>
</div>
クラス名はちょっと意味不明ですがこういう感じになっています。
今の所、ブログで解説している言語は
HTML CSS Javascript Python Swift Shellあたりです。
どうすればできますか？
こんな感じでやれば...みたいなアイデアでもなんでもいいので、何かあれば教えて欲しいです。
0
