JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでシンタックスハイライトを実装する方法【prettifyライブラリ活用】

JavaScriptでシンタックスハイライトを実現する方法

Webページ上にソースコードを表示する際、色分けされた「シンタックスハイライト」を適用すると、コードの可読性が大幅に向上します。JavaScriptを使ってこれを実現するには、Googleが提供しているprettify（code-prettify）ライブラリを利用するのが簡単で効果的です。

1. prettifyライブラリを読み込む

まず、以下のscriptタグをHTMLに追加して、CDN経由でprettifyライブラリを読み込みます。

<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

このタグは<head>内または<body>の末尾など、ページの任意の場所に配置できます。外部ファイルをダウンロードする必要がなく、1行追加するだけで導入が完了するのが魅力です。

2. コードブロックにprettyprintクラスを指定する

次に、ハイライト表示したいコードを<pre>タグで囲み、そのタグにprettyprintクラスを付与します。

<pre class="prettyprint">
    ここにコードを記述
</pre>

これだけで、ページ読み込み時に自動的に構文解析が行われ、キーワードや文字列、コメントなどが色分けされて表示されます。

補足：より見やすくするテクニック

  • 言語の明示：lang-xxxクラス（例：lang-js、lang-html）を追加すると、対象言語を明示的に指定できます。
  • 行番号の表示：linenumsクラスを併せて指定すると、コードに行番号が付与されます。
  • スキンの変更：CSSを独自に定義すれば、ハイライトの配色をお好みのデザインにカスタマイズ可能です。

このように、prettifyライブラリを使えば、わずか数行のコード追加だけで本格的なシンタックスハイライト機能を実装できます。技術ブログやドキュメントサイトなど、コードを掲載する機会の多いサイトにおすすめの方法です。

  1. JavaScriptでToDoリスト（やることリスト）を作成する方法

    JavaScriptを使えば、テキストボックスに入力したタスクを順番にリストへ追加していく、シンプルなToDoリスト（やることリスト）を簡単に作成できます。この記事では、HTML・CSS・JavaScript（jQuery）を組み合わせた基本的な実装例を、コードと実行手順とあわせて紹介します。 実装例 以下は、ToDoリストを作成するためのコードです。 <!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8"> &n

  2. JavaScriptでCSSルールをスタイルシートに追加・削除する方法【insertRule()とdeleteRule()の使い方】

    JavaScriptを使えば、ページに読み込まれたスタイルシートに対して動的にCSSルールを操作できます。その中心的な役割を果たすのが insertRule() メソッドと deleteRule() メソッドです。insertRule(): スタイルシート内の指定した位置（インデックス）に新しいCSSルールを追加します。deleteRule(): 指定したインデックスにある既存のスタイルルールを削除します。以下の具体例を通じて、JavaScriptでスタイルシートへCSSルールを追加する方法を見ていきましょう。例1：insertRule()で新しいルールを追加する<!DOCTYPE ht