タグ

JavaScriptとdesignに関するitboyのブックマーク (2)

  • 技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方

    Webプログラミング/Webデザインのネタを扱うブログやWebサイトを運営していると、HTMLCSSなどのソースコードを掲載することが多くあります。そんなときにぜひ活用したいのが、ソースコードを読みやすく表示してくれるJavaScriptライブラリです。今回は、そのうちの1つ、「Syntax Highlighter」の使い方を紹介しましょう。 多くの言語の構文強調表示に対応した「Syntax Highlighter」 HTMLなど各種言語のソースコードをWebページの中で表示するのは、HTMLのpre要素を使えば簡単です。ただ、ソースコードをそのまま表示すると、見た目が分かりやすくはありません。そこで、タグなど言語の特定キーワードに色を付けて、他の部分よりも強調して表示することで見やすくしましょう。 こういった「構文強調表示」を行なうJavaScriptは、いくつか公開されていますが、そ

    技術系サイトに必需品! ソースコードは鮮やかに JavaScriptもPHPもHTMLもOK!「Syntax Highlighter」の使い方
  • [JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -jBreadCrumb

    jBreadCrumb demo パンくずはリスト要素で実装されており、既存のパンくずに適用することも簡単です。 「jquery.jBreadCrumb.js」の最後に記述してあるオプションでは、オープンするルール、オープンしておくレベル、アニメーションのスピード、クローズ時のサイズなどを変更できます。 オープンするルールの最大文字数と最小文字数を100に、エレメント数を1に、オープンしておくレベルを終わりから2に、クローズ時のサイズを20に変更。 jBreadCrumbはjQueryのプラグインのため、動作にはjquery.jsが必要です。

    itboy
    itboy 2009/02/19
    格好いい。でも次のリストの表示位置が変わるのが少し使いづらいかもね。。。
  • 1