シンタックスハイライターはPrism.jsがベストだと思う

July 29, 2017Code

Prism.jsとは?

ウェブサイト内でソースコードを表示する際のシンタックスハイライターを探していて、「これがベストだろ!」というものを見つけたのでメモ。
カスタマイズの柔軟性、デザイン性、実装の用意性、そして何よりファイルの軽さ。
諸々加味した結果『Prism.js』に行き着きました。

実際の使用例は下記のような形でソースコードを表示できます。


code { 
background: #272822; 
border-radius: 2px; 
color: #e6db74; 
font-size: 14px; 
margin: 0 3px; 
padding: 2px 5px; 
word-break: break-all; 
}

特筆すべきポイントは以下の点です。

  • 行番号付き
  • 指定した行をハイライト
  • 記載言語の表示ができる
  • 内容に合わせて色の切り替えがデフォルトで付いている
  • CSSでデザインの変更も可能
  • 軽い。プラグインと比べてかなり軽い

素敵。軽いのが何より素敵。

実装手順

まずはダウンロードページへ行きPrism.jsファイルをダウンロード。

prism.cssprism.jsを読み込ませて


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Prism.js</title>
<link rel="stylesheet" type="text/css" href="prism.css" media="all" />
<script type="text/javascript" src="prism.js"></script>
</head>

あとは記事内に<pre><code class="language-言語名"></code></pre>を記載して完了。

簡単。