タグ

toolとhtmlに関するsbg3のブックマーク (4)

  • プログラミングコードをHTML内に埋め込む形に変換·HTMLify MOONGIFT

    HTMLifyはJavaScript製のオープンソース・ソフトウェア(MIT License)です。 ブログやソフトウェアのプロジェクトページにプログラミングコードを貼付ける際、素のままでは改行やHTMLタグのエスケープ処理が行われずに変な表示になってしまいます。そこで使ってみたいのがHTMLifyです。 トップページです。上のテキストエリアにコードを入力します。 入力が終わったらHTMLifyボタンをクリックします。 そうすると下にHTMLタグとエスケープ処理を行ったテキストと、それを表示したサンプルが表示されます。Copy to Clipboardボタンを押すとHTMLコードがクリップボードにコピーされます(要Flash)。 HTMLifyはpreタグとcodeタグでエスケープ処理を行ったコードを表示します。ちょっとしたソフトウェアですが、HTMLやプログラミングコードのスニペットを紹

    プログラミングコードをHTML内に埋め込む形に変換·HTMLify MOONGIFT
  • テキストの差分をHTML表示する·HTMLDiff MOONGIFT

    HTMLDiffはRuby製のオープンソース・ソフトウェア。画像系、動画系とWebサービスは多数あるが、それでも最も多いのはテキスト系サービスだろう。ブログやTwitter、フォーラムとテキストは最もシンプルなコミュニケーションに用いられる。 HTMLタグを使った差分を出力する そんな中、テキストが繰り返し保存される中で必要になるのがバージョン管理のようなシステムだ。更新前に以前の状態と比較して差分を表示するような場合に使えそうなのがHTMLDiffだ。 HTMLDiffはテキストとテキストを比較して、異なっている部分をinsタグを使って表現する。追加されている場合はdiffinsをクラスに指定したり、削除されている場合はdelタグを用いる。後はCSSで表示を行えば良いだろう。なお複数行には対応していない。 そのため複数行の場合は別途diffコマンドなどを使って差分を取得し、その結果をビジ

    テキストの差分をHTML表示する·HTMLDiff MOONGIFT
    sbg3
    sbg3 2010/09/03
  • ココを押えておけばCSS3がだいたい分かるツール集 | 日刊ウェブログ式

    CSS3 Generator CSS3の各ブラウザごとの対応状況の確認とソースコードの生成が同時に行える便利ツール。対応状況はブラウザのアイコンの上にカーソルを持っていくと表示されます。 Official Site CSS3 Gradient Generator v2.0 グラデーションのコードを吐き出すツール。カラーピッカーなどを使って直感的に操作できる Official Site CSS Border Radius ボーダーの角丸を表現するコードを吐き出すツール。四辺の周囲にある数値を変更するだけです。 Official Site Button Maker 画像を一切使わずにCSSだけでクールなボタンを作成。グラデーション、角丸、影などの調節が可能 Official Site CSS3, please! 左側のコードを書きかえると、プレビューが右上のプレビューが変化します。CSS3テス

  • URLを指定するとリンク切れしているページをチェックしてくれる『Dead-Links』 | 100SHIKI.COM

    地味に便利なツールのご紹介。 Dead-LinksでURLを指定すると、そのURL以下のページでリンク切れをしていないかをチェックしてくれる。 リンク切れがあると恥ずかしかったり、ユーザーや顧客を逃したりしてしまうだろう。 すでに似たようなツールもあるが、ドメインがわかりやすいし、インターフェースもシンプルなので覚えておいてもいいだろう。 ちょっとチェックに時間はかかるが、定期的にこのサイトで自分のブログなり自社サイトなりを調べてみるといいだろう。

    URLを指定するとリンク切れしているページをチェックしてくれる『Dead-Links』 | 100SHIKI.COM
  • 1