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

2015-03-31

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で作られた、どんなサイトでも使えるコードハイライターを紹介します。

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