美しいシンタックス・ハイライトのためのCSSとJavaScriptのスニペット事例10選

デスクトップ・コーディング用のソフトウェアやweb IDEsなどのツールは、シンタックス・ハイライトを用いることで簡単にコードを書いたりデバッグできるツールです。

しかし、同じシンタックスカラーを、ウェブコンテンツにも適用できるのをご存知でしょうか？

今回は美しいシンタックス・ハイライトのためのCSSとJavaScriptのスニペット事例を10個ピックアップしました。もしあなたがコーディングに関する記事をよく書く人であるならば、本記事でご紹介するCSS & JSのコードハイライトをぜひ試してみてください。

1. Angularソースコードボックス

See the Pen Textarea Tabs + Syntax Highlighting by Ashley Ktorou (@aktorou) on CodePen.

まず紹介するのは、Andrew ArchibaldによってAngular.jsを使って開発された、非常に優良なスニペットです。サンプルコードボックスには、CodePenの埋め込みにあるようなタブ機能があります。
Angularソースコードボックスのスニペットの強みは、このようなタイプのコードを埋め込みではなくCSSのみで表示出来るということです。埋め込みに伴うHTTPリクエストを省くことができ、使用するシンタックスをより自由にコントロールできます。

素晴らしいタブ機能に加えて、angular-highlightライブラリが言語を横断したシンタックスのサポートを行ってくれます。

2. <pre> タグスタイル

See the Pen <pre&rt; tag style (jquery) by romgerman (@romgerman) on CodePen.

こちらはより長いチュートリアルや膨大な量のコードスニペットをシェアする開発者向けのスニペットです。<pre> タグスタイルは、行番号を表示するコラムとサンプルコード用の暗いバックグラウンドが特徴です。

jQueryを使用することで色合いを調整でき、どんなウェブサイトのレイアウトにも対応してくれます。

3. テキストエリアのタブ

See the Pen Textarea Tabs + Syntax Highlighting by Ashley Ktorou (@aktorou) on CodePen.

こちらはAshley Ktorouによって開発されたプロジェクトで、シンプルなテキストエリアで構成されています。

コーダーはどこかにコードを書かなければなりませんが、テキストエリアはそのエレメントとして最適です。カスタムタブと共にハイライトがついたカスタムテキストエリアを使用でき、CSSとJSで作動することもポイントです。

4. CSSのみで表示される行番号

See the Pen CSS-only (dynamic) line numbers by Ole Bertram (@elomatreb) on CodePen.

シンプルさが特徴のこちらのスニペット。

ダイナミックな行番号がスニペットブロックに自動的に表示されるようになっています。番号をわざわざコーディングする必要なく、コードの行を追加すると行番号が自動的に表示されます。

ブログポストや記事のコードスニペットに最適なツールといえるでしょう。明るいバックグラウンドと濃い色のテキストも特徴的です。

5. ブートストラップでのシンタックスハイライト

See the Pen Bootstrap tab syntax highlighter by Kijan Maharjan (@kijanmaharjan) on CodePen.

ブートストラップのシンタックスハイライトを使用したいと思ったことはありませんか？ そこで、ブートストラップの開発者であるKijan Maharjanによるツールをおすすめします。

様々なスタイルのシンタックスハイライトが入ったタブのあるウィジェットを、あなたのWebページに追加できます。code-prettify library からカラーを選び、CSSを少し編集して全体のデザインを整えると良いでしょう。

6. シンタックスハイライトのデモ

See the Pen Syntax Highlight JS Library Demo by 루세나 (Lucena) (@bisk8s) on CodePen.

こちらは非常に優秀なハイライト用のデモで、様々な言語に対応しています。それぞれの言語ごとにデザインスタイルやカラースキームが設定されており、CSSをいじれば自身でもスタイルの編集が可能です。

基本的なスニペットは平凡なデザインではありますが、どのようなレイアウトにも対応できるデザインの豊富さとシンプルさが特徴といえるでしょう。

7. Prism.jsのデモ

See the Pen Bakelite theme (light) for Prism.js by Bram de Haan (@atelierbram) on CodePen.

無料のPrism.js scriptはもっともオープンなシンタックス・ハイライトツールの一つです。Smashing Magazineなどのデザインブログに使用されており、誰でも自由に使用できます。

より少ないコードでprismを扱いたいのであれば、Bram de Haanによるスニペットがおすすめです。

あなたのサイトに合わせて、簡単にコピーをしてリスタイルできるセットアップが特徴で、白黒ストライプとカスタム・スクロールバーが魅力です。

8. HTMLとCSSによるコードエディタ

See the Pen Pure CSS Code Editor by Aysha Anggraini (@rrenula) on CodePen.

HTMLとCSSによって作成される静的コードの優れたIDEインターフェースです。

自身のウェブサイトで使用する機会はあまりないかもしれませんが、コードのスタイルを真似したくなること請け合いです。

9. シンタックス・カラーリング

See the Pen Syntax Coloring by Michaël Germini (@michaelgermini) on CodePen

Michaël Germiniによって作成されたシンプルで基本的なスニペットです。

一からシンタックスハイライトを作成するのを避けたいのであれば、こちらのスニペットの使用がおすすめ。シンプルで白いバックグランドに明るい色のテキストが特徴的で、最初のテンプレートとして最適です。

非常にシンプルなデザインなので、自身のウェブサイトに合わせてスタイルをカスタマイズしてください。

10. コードガイド

See the Pen Code Guide pen by Jo Dahl (@ehrenglaube) on CodePen.

こちらはJo Dahlによる無料のコードガイドです。現場でどのようにシンタックスハイライティングブロックが使われているか、チェックすることができます。

非常にシンプルなグリッドスタイルのレイアウトでHTMLとCSSを確認できます。読み進めるのに全く支障をきたさないカラースキームは素晴らしいの一言です。

コードスニペットを使用するウェブサイトやブログ記事を作成する際には、このデザインを参照にしてみてくださいね。

（翻訳：Mariko Sugita）