Kunitaka Kawashimo アートディレクター・デザイナー・フォトグラファー。株式会社クリーム代表取締役。グラフィックデザイン/Webデザイン/撮影の仕事のご相談・ご質問は、お気軽に以下までご連絡ください。info@creamu.co.jp
Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLやCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ
ブログや開発者向けのWebサービスなどで、ソースコードのハイライトを行うケースはよくある。言語があらかじめ決まっている場合は良いが、言語がよくわからない場合や、JavaScriptとHTMLのように埋め込みで複数の言語が重なる場合もある。 各種言語に対応したハイライター そのような、特定の言語に依らずにソースコードをハイライト化したい場合に便利なのがこのライブラリだ。 今回紹介するオープンソース・ソフトウェアはGoogle Code Prettify、JavaScriptによるソースコードハイライターだ。 Google Code Prettifyの使い方は簡単だ。prettify.jsとprettify.cssを読み込んで、<pre class="prettyprint">または<code class="prettyprint">タグの中にコードを書き込めば良い。後はprettyPrint
twitter facebook hatena google pocket コードを要素などに応じて色分けするのをシンタックスハイライトといいます。 制作物を公開する際に、わかりやすく表示することができます。 CodePressは、単純にハイライト表示するだけでなく、書き込んだコードもリアルタイムで色を付けてくれます。 sponsors 使用方法 CodePressからzipファイルをダウンロードし、全てアップロードします。 そして以下を記述すれば完成です。 <script type="text/javascript" src="http://yourdomain/codepress/codepress.js"></script> <textarea id="id名" class="codepress 言語"> 言語にはHTML、CSS、JavaScript、Perl、PHP、java、s
ソースコードをWebサイト上で表示したいときなど、シンタックスに色を付けて 見やすく表示したいと思ったりしませんか?短いソースコードならば自分の手で HTMLの要素を駆使し行っても良いかもしれませんが、長いものになるとそう簡単 にはいきません。PHPにはそれを簡単に実現するための方法がいくつか用意され ています。今回はその中からPEAR::Text_Highlighterを紹介したいと思います。 ソースコードの中のシンタックスに色を付ける方法としてPHPには highlight_string()という関数があります。この関数を使用しても色を付けるこ とはできるのですが、PHP4ではHTMLのfont要素を用いて、PHP5の場合はstyle属 性を用いて色づけが行われたり、対象ソースコードがPHPだけだったりと、なか なか自由がききません。しかし、今回紹介するPEAR::Text_Highl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く