More than 3 years have passed since last update.

JavaScriptの差分ライブラリを使ってERBに入れてみた

Last updated at 2020-01-21Posted at 2020-01-20

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>vue_pager</title>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsdiff/3.4.0/diff.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html.min.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/diff2html/2.3.3/diff2html-ui.min.js"></script>
</head>
<body>
<div id="user" userJson="<%= @user.to_json %>"></div>
<div id="app">
</div>
</body>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var diff = document.getElementById('user');
        var diffJson = JSON.parse(diff.getAttribute('userJson'));
        const unifiedDiff = JsDiff.createPatch("user", diffJson[0], diffJson[1], "変更前", "変更後");
        const diff2htmlUi = new Diff2HtmlUI({diff: unifiedDiff});
        diff2htmlUi.draw('#app', {inputFormat: 'json', showFiles: true, matching: 'lines'});
    });
</script>
</html>

HTMLでdiffを表示させてみる
 デモ

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up