Syntaxhighlighter、Google のコード ハイライターの使用方法

GoogleにはSyntaxhighlighterという名前の公式のコードハイライトツールはありません。ただし、Googleでは、サードパーティ製のコードハイライトツールを多数利用できます。

代表的なコードハイライトツールを紹介します。

Prism:Prismは軽量なコードシンタックスハイライトツールであり、さまざまな言語とテーマに対応しています。HTMLページにPrismライブラリを取り込み、

でコードをラップして<codeタグでハイライトすることができます。たとえば、
<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”prism.css”>

</head>

<body>

<pre><code class=”language-javascript”>

function greet() {

console.log(“Hello, world!”);

}

</code></pre>

<script src=”prism.js”></script>

</body>

</html>


2. Highlight.js:Highlight.jsは、さまざまなプログラミング言語とテーマに対応した、もう1つのポピュラーなコード構文ハイライトツールです。HTMLページにHighlight.jsライブラリを取り込み、ハイライトするコードを

タグで囲みます。例:
<!DOCTYPE html>

<html>

<head>

<link rel=”stylesheet” href=”highlight.css”>

</head>

<body>

<pre><code class=”javascript”>

function greet() {

console.log(“Hello, world!”);

}

</code></pre>

<script src=”highlight.js”></script>

<script>hljs.highlightAll();</script>

</body>

</html>


記載されたCSSとJavascriptファイルのパスは、実際の設定に合わせて調整する必要がある可能性があることに注意してください。

これらのツールはいずれも一般的なコードハイライトツールです。用途に応じて適切なツールを選択し、そのドキュメントに従ってご利用ください。

bannerAds