【シンタックスハイライター】Prism.jsの使い方

2018年11月4日
SyntaxHighlighter

軽量なシンタックスハイライターである「Prism.js」の使い方について。

ダウンロード

上記のページへアクセスし、右上の「DOWNLOAD」ボタンを押す。

Prismのダウンロード

カスタマイズする

ボタンを押すと、カスタマイズするためのページが表示されるので各設定を行う。

Compression level

圧縮レベルを選ぶ。非圧縮にしたければ、「Development version」。圧縮したければ、「Minified version」にする。

Prismの圧縮レベル

Themes

サイトに合うテーマを選ぶ。

Prismのテーマ

Languages

サイト内で使用する言語を選ぶ。

Prismの言語

Plugins

使用したいプラグインを選ぶ。

各プラグインの使い方は、プラグイン名をクリックすることで表示できる。( プラグインの解説ページへ移動する。 )

Prismのプラグイン

ダウンロードする

カスタマイズの選択をしたら、ページの下部にあるダウンロードのボタンからjsファイルとcssファイルをダウンロードする。

Prismのダウンロード

読み込み

使用したいサイトのheadタグ内でダウンロードしたjs、cssファイルを読み込む。

<html>
	<head>
		<link rel="stylesheet" href="prism.css" media="all">
		<script src="prism.js"></script>
	</head>
</html>

使用

表示させたいコードを<pre><code class="language-言語名"></code></pre>のタグで囲む。

class属性であるlanguage-言語名言語名の部分には、表示するコードの言語名を指定する。( js, c, php など )

これで下記のようにコードの構文を強調して表示できる。

#include <stdio.h>

int main() 
{
	printf( "Hello world." );
	return 0;
}

参考