サンプルコードを綺麗に魅せる!コードハイライトプラグインまとめ

Pocket

Webサイト上でサンプルコードなどを投稿すると通常は普通のテキストとして投稿されます。Bootstrapを使うとシンプルなスタイルが追加されますが、すべて同じ色なので見辛いですよね。

HTMLだとこんな感じ。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

これをテキストエディターで表示されるように色をつけたり、様々なカラーテーマに変更できるのがコードハイライター。コードハイライターを使えばHTMLのサンプルコードも以下のように綺麗に表示されます(prism使用)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

このページではJavascriptで作られた、どんなサイトでも使えるコードハイライターを紹介します。

コードハイライトプラグインまとめ

highlight.js
コードハイライトプラグイン-01

Prism
コードハイライトプラグイン-02

SyntaxHighlighter
コードハイライトプラグイン-03

google-code-prettify
コードハイライトプラグイン-04

Rainbow
コードハイライトプラグイン-05

SHJS – Syntax Highlighting in JavaScript
コードハイライトプラグイン-06