diff --git a/js/functions.js b/js/functions.js
index be2f17439b..90c5d0ec7b 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1945,6 +1945,57 @@ function PMA_highlightSQL($base)
     });
 }
 
+/**
+ * Updates an element containing code.
+ *
+ * @param jQuery Object $base base element which contains the raw and the
+ *                            highlighted code.
+ *
+ * @param string htmlValue    code in HTML format, displayed if code cannot be
+ *                            highlighted
+ *
+ * @param string rawValue     raw code, used as a parameter for highlighter
+ *
+ * @return bool               whether content was updated or not
+ */
+function PMA_updateCode($base, htmlValue, rawValue)
+{
+    var $code = $base.find('code');
+    if ($code.length == 0) {
+        return false;
+    }
+
+    // Determines the type of the content and appropriate CodeMirror mode.
+    var type = '', mode = '';
+    if  ($code.hasClass('json')) {
+        type = 'json';
+        mode = 'application/json';
+    } else if ($code.hasClass('sql')) {
+        type = 'sql';
+        mode = 'text/x-mysql';
+    } else if ($code.hasClass('xml')) {
+        type = 'xml';
+        mode = 'application/xml';
+    } else {
+        return false;
+    }
+
+    // Element used to display unhighlighted code.
+    var $notHighlighted = $('<pre>' + htmlValue + '</pre>');
+
+    // Tries to highlight code using CodeMirror.
+    if (typeof CodeMirror != 'undefined') {
+        var $highlighted = $('<div class="' + type + '-highlight cm-s-default"></div>');
+        CodeMirror.runMode(rawValue, mode, $highlighted[0]);
+        $notHighlighted.hide();
+        $code.html('').append($notHighlighted, $highlighted[0]);
+    } else {
+        $code.html('').append($notHighlighted);
+    }
+
+    return true;
+}
+
 /**
  * Show a message on the top of the page for an Ajax request
  *
diff --git a/js/makegrid.js b/js/makegrid.js
index 58ab633491..a7f06e5f72 100644
--- a/js/makegrid.js
+++ b/js/makegrid.js
@@ -640,32 +640,41 @@ function PMA_makegrid(t, enableResize, enableReorder, enableVisib, enableGridEdi
                         $this_field.addClass('null');
                     } else {
                         $this_field.removeClass('null');
-                        var new_html = data.isNeedToRecheck
+                        var value = data.isNeedToRecheck
                             ? data.truncatableFieldValue
                             : $this_field.data('value');
 
+                        // Truncates the text.
+                        $this_field.removeClass('truncated');
+                        if (PMA_commonParams.get('pftext') === 'P' && value.length > g.maxTruncatedLen) {
+                            $this_field.addClass('truncated');
+                            value = value.substring(0, g.maxTruncatedLen) + '...';
+                        }
+
                         //Add <br> before carriage return.
-                        new_html = escapeHtml(new_html);
+                        new_html = escapeHtml(value);
                         new_html = new_html.replace(/\n/g, '<br>\n');
 
                         //remove decimal places if column type not supported
                         if (($this_field.attr('data-decimals') === 0) && ( $this_field.attr('data-type').indexOf('time') != -1)) {
                             new_html = new_html.substring(0, new_html.indexOf('.'));
                         }
+
                         //remove addtional decimal places
                         if (($this_field.attr('data-decimals') > 0) && ( $this_field.attr('data-type').indexOf('time') != -1)){
                             new_html = new_html.substring(0, new_html.length - (6 - $this_field.attr('data-decimals')));
                         }
-                        $this_field.removeClass('truncated');
-                        if (PMA_commonParams.get('pftext') === 'P' && new_html.length > g.maxTruncatedLen) {
-                            $this_field.addClass('truncated');
-                            new_html = new_html.substring(0, g.maxTruncatedLen) + '...';
-                        }
+
                         var selector = 'span';
                         if ($this_field.hasClass('hex') && $this_field.find('a').length) {
                             selector = 'a';
                         }
-                        $this_field.find(selector).html(new_html);
+
+                        // Updates the code keeping highlighting (if any).
+                        var $target = $this_field.find(selector);
+                        if (!PMA_updateCode($target, new_html, value)) {
+                            $target.html(new_html);
+                        }
                     }
                     if ($this_field.is('.bit')) {
                         $this_field.find('span').text($this_field.data('value'));