あなたのソースコードを彩る、Syntax Highlighterまとめ

Web・コンピュータ > あなたのソースコードを彩る、Syntax Highlighterまとめ
作成：

2007-06-30T19:14:27+09:00

更新：

2009-04-29T00:31:57+09:00
ブログに貼り付けたソースコードを分かりやすく見せたい！

というのはコードを書くブロガーなら誰でも思うはず。

最近はコードを書いてもそのまま貼り付けるだけになってしまっていましたが、やはりソースコードは色づけされて分かりやすい方がいい。

何故かまとまった情報が無いようなので、まとめてみました。

ちなみに、ライブラリを選ぶ最中にまとめたので、どのツールも未使用なのであしからず。

JavaScript系

JavaScriptを使って自動で色分けしてくれるようなツール。

元々のソースコードに手を加えず、導入が可能。

google-code-prettify

google-code-prettify - Google Code

Google製コードハイライター

対応言語

C, Java, Python, Bash, SQL, HTML, XML, CSS, JavaScript, Ruby, PHP, Perl

関連

あるＳＥのつぶやき: google-code-prettify - Google製コードハイライト表示JavaScriptライブラリ

syntaxhighlighter

syntaxhighlighter - Google Code

こちらはYahooでも使われているライブラリ

元々は「dp.SyntaxHighlighter」という名前で開発されていたようです。

<ul>でマークアップされているが多少気になりますが、行番号も表示出来て便利。

関連記事

dp.SyntaxHighlighter-コード表示に役立つJavaScript - WEBデザイン　BLOG

対応言語

C,C++,C#

CSS

Delphi

Java

JavaScript

PHP

Python

Ruby

SQL

VB

XML/HTML

Highlight.js

highlight.js

とても簡単にソースコードをハイライト出来るJavaScriptライブラリ。

色分けにはHTMLのclassを利用してカスタマイズできる。

作者のサンプルページ

Highlight

対応言語

Python

Ruby

Perl

PHP

HTML

CSS

Django

Javascript

VBScript

Delphi

Java

C++

RenderMan (RSL and RIB)

SQL

SmallTalk

Axapta

1C

Chili

Chili Manual

jQueryベースのシンタックスハイライター

スクリプト本体と色分けを行うCSSファイルのセット。ライブラリとしては結構大きめ。

対応言語

C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, XHTML

関連記事

Chili - コードハイライトJavascript | Takazudo Clipping*

CodePress

CodePress - Real Time Syntax Highlighting Editor written in JavaScript

色分け出来るJavaScriptエディター。本来のエディターとしての使い方以外に、リードオンリーでコードを貼り付ける事も出来る。

対応言語

PHP, JavaScript, Java, Perl, SQL, HTML, CSS

CodeHighlighter

CodeHighlighter - danwebb.net Code Dump - Trac

使用しているサンプル

danwebb.net - Low Pro: Unobtrusive Scripting For Prototype

対応言語

JavaScript, Ruby, CSS, HTML

変換ツール系

ソースコードをサーバー側で変換、変換後のソースをブログに貼り付けるタイプ

ソースコードがHTMLでマークアップされてしまうので、見にくくなりますが、導入が手軽。

GeSHi

GeSHi - Generic Syntax Highlighter :: Home

シンタックスハイライトを行う、PHPライブラリ。開発元のサイトから使用例としてソースコードを変換出来ます。

対応言語

対応言語は70種類近くの言語から選べる。とても強力。あまりに多いので割合割愛

デモ

GeSHi - Generic Syntax Highlighter :: Demo
変換後のソースを簡単に貼り付ける事が出来ないのがとても残念。とはいえオプションも指定出来て便利。

利用サイト

geshi_webapi - koshigoe prototype - Trac

KoshigoeBLOG: なんとなくGeSHiでWebAPI書いてみた

CodeSyntaxHighLight(test)

ハタさんのブログ : 勝手にGeshiWebAPI

Quick Highlighter: A simple to use code syntax highlighter

恐らく前述したGeSHiを利用したサイト。

色の指定はスタイルシートで直接指定されている為、ユーザー好みに変換するのは大変そう。

Code Syntax Highlighter

Code Syntax Highlighter(Copy&Paste HTML)

コードの色指定にCSSのclassを使える。

対応言語

JavaScript, Java, PHP, Ruby, Python

関連記事

Enjoy*Study - Code Syntax Highlighter(Copy&Paste HTML)

ActionScript Highlighter v2

Arul's Blog: ActionScript Highlighter v2

ActionScript用のソースコード変換ツール。

ブログツールプラグイン系

WordPress

iG:Syntax Hiliter

Canned !! ? my Atropine ≫ Code for Fun!!

WordPress用プラグイン

WordPressでコード書いている人の多くが使っているような気がする。MTユーザーとしては羨ましい。

関連記事

iG:Syntax Hiliter 日本語版 ≪ MMRT daily life

WP-Syntax

WP-Syntax ≪ Extend ? Plugins

WordPress用プラグイン。前述したGeSHiを利用している
WPユーザーではないので使った事はありませんが、とても良さそうな感じです。

その他WordPress関係

WordPressのプラグイン一覧 ? コード表示

コード表示系プラグインをまとめて紹介されています。

Movable Type

探し方が悪いのか、残念ながら見つからず。

Tumblr

Syntax Highlighting in Tumblr

Dr Nic ≫ Syntax Highlighting in Tumblr

Tumblr用のコードハイライターのようです。詳細は分かっていなかったりします。

Tumblrは使ってないので何とも言えませんが、Tumblr好きはぜひ

前述したCodeHighlighter - danwebb.net Code Dump - Tracベースのようです。

作者のサンプル：Dr Nic's Journey

ウェブサービス系

Nopaste

Nopaste

ソースコード共有サービス

ソースコードを貼り付けて送信すると、コードをハイライトした後、パーマルリンクでアクセス出来るようになる。

ソースコードは24時間で消える。

Mozilla Pastebin

Mozilla Pastebin - collaborative debugging tool

こちらもNopaste同じく、コード共有サービス。

保存期間は24時間、一ヶ月、無期限から選べる。

対応言語を見る限り、GeSHiを使っているみたい。

その他コードライブラリー

SilverCity @ SourceForge

Pythonモジュールのソースコードハイライター

GNU Source-highlight - GNU Project - Free Software Foundation (FSF)

GNU謹製のハイライトツール。コマンドラインから使う。

で、どれが良いのか？

それは「カップラーメン」と「カップ焼きそば」と「カップうどん」を選ぶようなもの。
つまり分かりません。

自分の用途的には

貼り付けたソースコードはプレーンな状態が良い

マークアップした状態でエントリを保存するのは嫌なので、必然的にブログツールプラグインか、JavaScript系になりそう

行番号は表示したい

できれば<ul>でマークアップされていないもの。<ul>は違和感があるので。

色分けはCSSのクラスで指定したい

という感じ。
順番に使ってみるしかないか。

参考

37to's bookmarks tagged with "highlight" on del.icio.us

Popular pages tagged with "syntax" on del.icio.us

Quellcode-Verschonerer und -Formatierer | Dr. Web Weblog

ハイライタ - かもめ日記
Posted at 37to : commetns(3) : trackbacks(11)
同一カテゴリのエントリ
関連エントリ
- 見つかりませんでした
関連商品
コメント

shinriyo

2008年6月16日 13:46

検索で探しました。いろいろ紹介ありがとうございます。
誤字を発見しました。「GeSHi」の「対応言語」のところで「割合(わりあい)」となっていますが、「割愛(かつあい)」です。

shinriyo

2008年6月16日 13:47

すみませんスクリプトエラーで無駄に投稿されてしまいました・・。

37to@webmaster

2008年6月17日 01:38

> shinriyoさん
ご指摘ありがとうございます！

学がなく恥ずかしいのですが、素で間違えていました。
取り急ぎ修正致しました。ありがとうございました。

名前

電子メール

URL

ログイン情報を記憶

コメント
トラックバック

本エントリへのトラックバックURL http://blog.37to.net/mt/mt-tb.cgi/93

ブログでソースコードを見やすくする

最上瞬光

2007年8月 3日 09:51

ブログにプログラムのソースコードを貼り付けるとき、見やすくする方法を探しました。あなたのソースコードを彩る、Syntax Highlighterま... 続きを読む

iG:Syntax HiliterでActionScript 3.0をハイライト

Flabo

2008年2月 4日 22:32

iG:Syntax Hiliter同梱のGeSHiライブラリはActionScript 2.0対応だったので、ActionScript... 続きを読む

プラグイン WP-Syntax

WPdeざっきろぐ

2008年2月10日 11:55

プログラムやコードに詳しくはないので、あまり使うことはないのですが、見栄えと読んでいただいた皆様にわかりやすい方がいいだろうと思い、Syntax High... 続きを読む

FC2でソースコードの予約語をカラー表示

ＫＪの業務日誌

2008年3月 9日 21:49

www.37to.netを参考にしつつ、ソースコードをFC2のブログに貼り付けて予約語をカラー表示する方法を模索してみました。 ■CodePre... 続きを読む

Syntax Highlighter

Toshiyuki Kawanishi Blog

2008年4月15日 22:48

以下のBlogにSyntax Highligherについてまとめてありました！Syntax HighligherとはソースコードのキーワードなどをWeb... 続きを読む

SyntaxHighlighter を利用してWebページ上のソースコードを飾る

スィンプロ (sinproject)

2008年7月 3日 02:44

ども、ご無沙汰してます。スィンです。 10時ぐらいに寝ようと布団に入ったのですが、咳が出だして寝付けず。せっかくなので、以前から導??... 続きを読む

(ブログ)Exciteブログにソースコードを貼り付ける

3流プログラマのメモ書き

2008年7月 9日 13:32

<pre>タグいろいろ調べてみると<pre><code>でくくるのが一般的見たいですが、Exciteブログは<... 続きを読む

Webページにソースコードを色付けして掲載するには

『私的』ソフトウェア開発室

2008年8月19日 23:06

Syntax Highlightに関して非常によくまとめられていて参考にさせていただきました。続きを読む

Movable Typeに「syntaxhighlighter」を導入

モカモカ工房

2008年9月11日 18:11

　Movable Typeに書いたソースコードをきれいに見せたいと思い、synt... 続きを読む

ソースコードを色づけして表示する

八発白中

2008年12月24日 12:20

　このブログも一応、プログラミング関連のブログの端くれです。ふと思い立って、ソー... 続きを読む

[wordpress] WP-Syntaxプラグインを導入してみた

岩家ぶろぐ

2009年1月 6日 01:11

2009-01-03 11:31 行表示指定の有無で出力されるHTMLが異なるため，それぞれの場合に分けて記述しました．はじめにブログ... 続きを読む