<!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>
More than 3 years have passed since last update.
Register as a new user and use Qiita more conveniently
- You get articles that match your needs
- You can efficiently read back useful information
- You can use dark theme
List of users who liked
11