目次 [ close ]
  1. highlight.jsとは？その基本知識
    1. highlight.jsの概要と特徴
    2. 導入する利点：なぜhighlight.jsを使うべきか
    3. 対応しているプログラム言語と豊富なテーマ
    4. 自動言語認識機能とカスタム設定
  2. highlight.jsの導入方法
    1. CDNを使った簡単導入
    2. npmを利用したインストール手順
    3. 必要な言語だけを選択して軽量化する方法
    4. 一般的なプロジェクトへの組み込み事例

highlight.jsとは？その基本知識

highlight.jsの概要と特徴

　highlight.jsは、JavaScriptで開発されたシンタックスハイライトのための軽量なライブラリです。プログラムコードを自動的に検出し、適切なスタイルで視覚的に美しいハイライトを適用します。ブラウザ上だけでなく、サーバー環境でも動作可能で、柔軟性が高いのが特徴です。190以上のプログラミング言語に対応しており、80以上のテーマから選べる豊富なデザインオプションが用意されています。また、BSD 3-Clause Licenseに基づいており、商用利用も問題ありません。

導入する利点：なぜhighlight.jsを使うべきか

　highlight.jsを導入することには、多くの利点があります。まず、その簡単なセットアップは、初心者から経験豊富な開発者まで幅広い層にとって魅力的です。CDN経由で導入する方法を使えば、わずかなステップで利用を開始できます。また、自動言語認識機能により、開発者がコードの種類を指定しなくても適切にハイライトが適用されます。さらに、軽量で高速な処理が可能なため、Webプロジェクトやブログ、ドキュメントツールといったあらゆる場面で活用できます。このようにhighlight.js使用は、コードを美しく分かりやすく表示したい場合に非常に有効です。

対応しているプログラム言語と豊富なテーマ

　highlight.jsは、幅広い開発者ニーズに応えられる機能を備えています。対応しているプログラミング言語の数は190以上で、JavaScriptやPython、Ruby、HTMLといった一般的な言語から、比較的マイナーな言語までカバーしています。また、テーマについても80種類以上が用意されており、モダンで視認性の高い「Monokai」や「Atom One Dark」、クラシックな「Default」スタイルなど、好みに合わせて様々なデザインを選択可能です。この豊富なバリエーションによって、ユーザーはアプリケーションやWebサイトに最適な見た目を簡単に適用できます。

自動言語認識機能とカスタム設定

　highlight.jsの自動言語認識機能は、コードがどのプログラミング言語で記述されているかを自動的に判別し、適切なハイライトを適用してくれる便利な機能です。このため、事前に言語を明示する必要がなく、幅広いコードベースでスムーズに利用できます。また、必要に応じて好みの設定に基づいて動作をカスタマイズすることも可能です。例えば、特定の言語を指定する場合や、自分だけのユニークなテーマを作成することができます。これにより、プロジェクトの個別要件にも柔軟に対応でき、開発者の効率を向上させます。

highlight.jsの導入方法

CDNを使った簡単導入

　highlight.jsを導入する最も簡単な方法は、CDNを利用する方法です。CDN（Content Delivery Network）を使用することで、自分のサーバーにライブラリをインストールする必要がなく、すぐにシンタックスハイライト機能を使用できます。インターネットに接続さえしていれば、以下のHTMLコードをプロジェクトに追加するだけで導入が完了します。

　例：






　このように設定すると、highlight.jsが自動的にページ内のコードブロックを検出し、シンタックスハイライトを適用します。





npmを利用したインストール手順





　npmを利用すると、highlight.jsをローカルにインストールし、管理することが可能です。これにより、オフライン環境でも動作させることができます。インストールは以下のコマンドを実行するだけです。





npm install highlight.js





　インストール後に、必要なファイルをインポートすることでプロジェクト内で使用できます。





javascript const hljs = require('highlight.js'); hljs.highlightAll(); 





　また、モジュールバンドラ（例えばWebpackやRollup）を利用している場合にも、この方法が最適です。





必要な言語だけを選択して軽量化する方法





　highlight.jsは多くのプログラミング言語をサポートしていますが、プロジェクトで使用する言語が限られている場合、必要な言語だけを選択して軽量化することをおすすめします。これにより、アプリケーションのパフォーマンスが向上します。





　以下はJavaScriptの例です：





javascript const hljs = require('highlight.js/lib/core'); const javascript = require('highlight.js/lib/languages/javascript'); hljs.registerLanguage('javascript', javascript); hljs.highlightAll(); 





　この方法では、使用する言語のみを個別にインポート・登録することで、不要なリソースを削減できます。また、必要なテーマも同様に軽量版を選択可能です。





一般的なプロジェクトへの組み込み事例





　highlight.jsは、さまざまな種類のプロジェクトで簡単に組み込むことができます。たとえば、ブログサイトやポートフォリオサイトにおいてコードブロックを見やすくするのに最適です。





　以下は一般的なHTMLでの組み込み例です：





function example() {
  console.log("Hello, World!");
}






　このようにHTMLの要素にクラスを付与し、スクリプトで自動的にハイライト処理を行います。特に特定のフレームワークやCMSと組み合わせれば、さらに効率的な活用が可能です。　また、ReactやVueなどのJavaScriptフレームワークを使っている場合でも、highlight.jsを簡単にインポートして使用できます。具体的には、Reactコンポーネント内で`useEffect`を使用して初期化処理を行うケースなどがあります。コードのハイライトをカスタマイズする方法 適用するテーマの選び方　highlight.jsでは、80以上の豊富なテーマが用意されており、コーディング環境やデザインに最適なものを選択できます。テーマには、ダークテーマやライトテーマなど様々な種類があり、「monokai-sublime」や「vs」などが人気です。公式サイト上のデモページでは、各テーマのプレビューを確認できるため、どのテーマがプロジェクトに適しているかを簡単に見極めることができます。開発者の好みや使用するウェブサイトの雰囲気に合わせて選ぶことで、視覚的な一貫性を保つことが可能です。 クラス指定による特定言語の明示　highlight.jsは自動言語認識機能を備えていますが、特定の言語を明示したい場合はHTML要素にクラスを追加することで対応可能です。例えば、JavaScriptコードをハイライトする場合は、以下のように「class=”language-javascript”」を指定します。





<code class="language-javascript">
    console.log('Hello, world!');
</pre>





この方法を使用することで、正確かつ適切にシンタックスハイライトが適用されます。また、ドキュメント全体で一貫したスタイリングを可能とします。 スタイルシートを使ったさらなるデザイン変更　用意されたテーマに加えて、カスタムCSSを使ってさらに細かいデザインを調整できます。たとえば、特定の要素だけ色を変更したい場合、以下のようにCSSを記述します。　





span.keyword {
    color: #ff5722;
    font-weight: bold;
}





　このようにすることで、キーワード部分のスタイリングをカスタマイズできます。highlight.js使用時には、基本テーマに追記する形で独自スタイルを柔軟に追加していくとよいでしょう。 ブラウザとサーバー環境でのカスタマイズ事例　highlight.jsはブラウザとサーバーサイドの両環境で動作します。それぞれでのカスタマイズ例を見てみましょう。ブラウザでは、基本的にCDNを用いた方法が効率的です。この場合、テーマファイルの参照リンクを変更するだけでスタイルを切り替えられます。一方、サーバー環境では、必要な言語ファイルだけをインポートして軽量化することが可能です。　以下はサーバー環境で利用する場合の例です。





const hljs = require('highlight.js/lib/core');      
const javascript = require('highlight.js/lib/languages/javascript');      
hljs.registerLanguage('javascript', javascript);





　これにより、使用する言語を限定し、パフォーマンスを向上させることができます。以上のように、環境に応じたカスタマイズを適切に行うことで、highlight.jsをより効果的に活用できます。活用例と実践的なユースケース ブログやポートフォリオサイトでの使用例　ブログやポートフォリオサイトでは、コードスニペットをわかりやすく可視化するためにシンタックスハイライトは重要です。highlight.jsを使用することで、読みやすく美しいコード表示を実現できます。たとえば技術ブログでは、HTML・CSS・JavaScriptなどのサンプルコードを豊富なテーマを用いてスタイリングできます。ポートフォリオサイトでも、プログラミングに特化した美しい表現が可能なため、自身のスキルを視覚的にアピールする際に役立ちます。 Markdownエディタとの連携　highlight.jsはMarkdownエディタとの相性が非常に良いです。Markdown形式で書かれた技術記事やドキュメント内のコードブロックに自動で適用されるため、エディタをカスタマイズして見た目を統一することができます。たとえば、「VS Code」や「Typora」などのエディタでは、highlight.jsベースのプラグインや拡張機能を利用することで、リアルタイムでシンタックスハイライトされたプレビューを確認することが可能です。 WordPress環境での活用方法　WordPressのブログやウェブサイトでhighlight.jsを利用する場合、プラグインを使用する方法が一般的です。「Enlighter」や「WP Highlight.js」などのプラグインを導入すれば、コードブロックのハイライトが簡単に有効化できます。また、プラグインを使用せずに独自でhighlight.jsを導入する場合、CDNを用いることで設定作業を最小限に抑えられます。具体的には、テーマのヘッダーやフッターにCSSとJavaScriptのコードを追加して、サイト全体に適用できます。 JavaScriptフレームワークでの使用（React、Vueなど）　highlight.jsはReactやVueといったモダンなJavaScriptフレームワークとも簡単に連携できます。Reactでは、コードブロックを組み込む際にカスタムコンポーネントを作成し、highlight.jsでシンタックスハイライトを適用する方法がよく使われます。また、Vueではディレクティブを活用してhighlight.jsを自動的に適用させることができます。これにより、開発効率を向上させながら、コードの可読性を向上させることが可能です。これらのフレームワークを活用するプロジェクトにおいて、highlight.jsはカスタマイズの自由度と優れたパフォーマンスを提供します。





http://design00.html.xdomain.jp/lesson/highlightjs.html





https://highlightjs.org/static/demo