超便利!! Web 上で 差分表示(diff) できちゃうjsライブラリ『mergely』を使ってみたよ♪

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Mergely

Pocket

web 上で差分(diff)を表示するjsライブラリ『Mergely』を使ってみました.

fullscreen で見るとキレイだよ♪

Sample

Mergely とは

Mergely とは, Web 上で差分(diff)を表示してくれるライブラリです. 簡単に組み込めて, リアルタイムで diff してくれるイケてる作りになっています!!

もともと Web サービス『Mergely』としてリリースされていたようです

screenshot

そこから差分(diff)を表示する機能を切り出してライブラリとしてリリースされています. 今回は, そのライブラリを使って簡単なサンプルを作ってみました.

Mergely の使い方

使い方は簡単♪

  1. jquery を読み込む
  2. codemirror の js/css を読み込む
  3. mergely の js/css を読み込む
  4. $(…).mergely を実行

たったこれだけで diff ツールの出来上がり!! 下記は mergely の最小コードサンプルになります. 文字を入力するとリアルタイムで diff チェックハイライトが入るのが分かるかと思います.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Web 上で diff やれちゃう mergely を使ってみたよ♪ - js do it</title>
        <link rel="stylesheet" type="text/css" media="screen,print" href="http://jsdo.it/phi/codemirror-3.1/css" />
        <link rel="stylesheet" type="text/css" media="screen,print" href="http://jsdo.it/phi/mergely-3.2/css" />
        <script type="text/javascript" src="http://jsdo.it/lib/jquery-1.9.0/js"></script>
        <script type="text/javascript" src="http://jsdo.it/phi/codemirror-3.1/js"></script>
        <script type="text/javascript" src="http://jsdo.it/phi/mergely-3.2/js"></script>
        <script>
            $(document).ready(function () {
                $('#compare').mergely({
                    cmsettings: { readOnly: false, lineWrapping: true }
                });
            });
        </script>
    </head>
    <body>
        <div id="mergely-resizer">
            <div id="compare">
            </div>
        </div>
    </body>
</html>

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT