diff --git a/src/main/twirl/gitbucket/core/helper/diff.scala.html b/src/main/twirl/gitbucket/core/helper/diff.scala.html
index 917f5c9..f936b07 100644
--- a/src/main/twirl/gitbucket/core/helper/diff.scala.html
+++ b/src/main/twirl/gitbucket/core/helper/diff.scala.html
@@ -84,8 +84,8 @@
       <td style="padding: 0;">
         @if(diff.newContent != None || diff.oldContent != None){
           <div id="diffText-@i" class="diffText"></div>
-          <textarea id="newText-@i" style="display: none;">@diff.newContent.getOrElse("")</textarea>
-          <textarea id="oldText-@i" style="display: none;">@diff.oldContent.getOrElse("")</textarea>
+          <textarea id="newText-@i" style="display: none;" data-file-name="@diff.oldPath">@diff.newContent.getOrElse("")</textarea>
+          <textarea id="oldText-@i" style="display: none;" data-file-name="@diff.newPath">@diff.oldContent.getOrElse("")</textarea>
         } else {
           Not supported
         }
diff --git a/src/main/twirl/gitbucket/core/repo/delete.scala.html b/src/main/twirl/gitbucket/core/repo/delete.scala.html
index fd96793..0af5043 100644
--- a/src/main/twirl/gitbucket/core/repo/delete.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/delete.scala.html
@@ -28,8 +28,8 @@
         <tr>
           <td>
             <div id="diffText"></div>
-            <textarea id="newText" style="display: none;"></textarea>
-            <textarea id="oldText" style="display: none;">@content.content</textarea>
+            <textarea id="newText" style="display: none;" data-file-name="@fileName"></textarea>
+            <textarea id="oldText" style="display: none;" data-file-name="@fileName">@content.content</textarea>
           </td>
         </tr>
       </table>
@@ -52,7 +52,6 @@
   }
 }
 <script type="text/javascript" src="@assets/vendors/jsdifflib/difflib.js"></script>
-<script type="text/javascript" src="@assets/vendors/jsdifflib/diffview.js"></script>
 <link href="@assets/vendors/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
 <script>
 $(function(){
diff --git a/src/main/twirl/gitbucket/core/repo/editor.scala.html b/src/main/twirl/gitbucket/core/repo/editor.scala.html
index 27fa4fc..cdffde5 100644
--- a/src/main/twirl/gitbucket/core/repo/editor.scala.html
+++ b/src/main/twirl/gitbucket/core/repo/editor.scala.html
@@ -71,7 +71,6 @@
 }
 <script src="@assets/vendors/ace/ace.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript" src="@assets/vendors/jsdifflib/difflib.js"></script>
-<script type="text/javascript" src="@assets/vendors/jsdifflib/diffview.js"></script>
 <link href="@assets/vendors/jsdifflib/diffview.css" type="text/css" rel="stylesheet" />
 <script>
 $(function(){
@@ -138,8 +137,8 @@
       // Show diff
       $('#preview').empty()
         .append($('<div id="diffText">'))
-        .append($('<textarea id="newText" style="display: none;">').html(editor.getValue()))
-        .append($('<textarea id="oldText" style="display: none;">').html($('#initial').val()));
+        .append($('<textarea id="newText" style="display: none;">').data('file-name',$("#newFileName").val()).html(editor.getValue()))
+        .append($('<textarea id="oldText" style="display: none;">').data('file-name',$("#oldFileName").val()).html($('#initial').val()));
       diffUsingJS('oldText', 'newText', 'diffText', 1);
     }
   });
diff --git a/src/main/webapp/assets/common/js/gitbucket.js b/src/main/webapp/assets/common/js/gitbucket.js
index 6c1e959..2d77efe 100644
--- a/src/main/webapp/assets/common/js/gitbucket.js
+++ b/src/main/webapp/assets/common/js/gitbucket.js
@@ -79,9 +79,12 @@
  * @param ignoreSpace {Number} 0: include, 1: ignore
  */
 function diffUsingJS(oldTextId, newTextId, outputId, viewType, ignoreSpace) {
+  var old = $('#'+oldTextId), head = $('#'+newTextId);
   var render = new JsDiffRender({
-    baseText: document.getElementById(oldTextId).value,
-    newText: document.getElementById(newTextId).value,
+    oldText: old.val(),
+    oldTextName: old.data('file-name'),
+    newText: head.val(),
+    newTextName: head.data('file-name'),
     ignoreSpace: ignoreSpace,
     contextSize: 4
   });
@@ -96,8 +99,8 @@
 }
 
 function JsDiffRender(params){
-  var baseTextLines = (params.baseText==="")?[]:params.baseText.split(/\r\n|\r|\n/);
-  var headTextLines = (params.headText==="")?[]:params.newText.split(/\r\n|\r|\n/);
+  var baseTextLines = (params.oldText==="")?[]:params.oldText.split(/\r\n|\r|\n/);
+  var headTextLines = (params.newText==="")?[]:params.newText.split(/\r\n|\r|\n/);
   var sm, ctx;
   if(params.ignoreSpace){
     var ignoreSpace = function(a){ return a.replace(/\s+/,' ').replace(/^\s+|\s+$/,''); };
@@ -111,16 +114,19 @@
   }
   var oplines = this.fold(ctx, params.contextSize);
 
-  function prettyDom(text){
+  function prettyDom(text, fileName){
     var dom = null;
     return function(ln){
       if(dom===null){
-        dom = prettyPrintOne(text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;').replace(/>/g,'&gt;'), null, true);
+        dom = prettyPrintOne(
+          text.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/"/g,'&quot;').replace(/>/g,'&gt;'),
+          (/\.([^.]*)$/.exec(fileName)||[])[1],
+          true);
       }
       return (new RegExp('<li id="L'+ln+'"[^>]*>(.*?)</li>').exec(dom) || [])[1];
     };
   }
-  return this.renders(oplines, prettyDom(params.baseText), prettyDom(params.newText));
+  return this.renders(oplines, prettyDom(params.oldText, params.oldTextName), prettyDom(params.newText, params.newTextName));
 }
 $.extend(JsDiffRender.prototype,{
   renders: function(oplines, baseTextDom, headTextDom){