シンタックスカラーリングでソースコードを色付け シンタックスハイライトを導入できるCSSとJavaScriptスニペット10例

よく知られているデスクトップコーディングソフトウェアとウェブIDEは、コード記述とデバッグを簡単にするシンタックスハイライトを特徴として備えています。
 
しかし、同じシンタックスカラーリングを使って、ウェブコンテンツにそれを追加できることを知っていましたか？
 
誰もがコードやコードスニペットをブログ記事に書くわけではありませんが、もしあなたが多くのコーディング記事を書いたり、ランディングページにコードスニペットを追加する必要があるなら、今回ご紹介するCSSとJSのコードハイライトの例をお楽しみいただけると思います。
 
Angular ソールコードボックス
See the Pen
Angular Source Code Boxes and Tabs by Andrew Archibald (@andrewarchi)
on CodePen.
 
これは、Andrew Archibald氏が作成した非常に優れたスニペットです。Angular.js上に構築されていて、サンプルコードボックスにはすべて、CodePenの埋め込み機能と同じようにタブがあります。 埋め込みなしでも、コードをページに追加することができます。全てCSSで処理されます。
 
これは埋め込みに対するHTTPリクエストを減らし、使用するシンタックスのタイプのコン

リンク元