diff --git a/src/code-viewer.html b/src/code-viewer.html
index 5f51a873f..f721be412 100644
--- a/src/code-viewer.html
+++ b/src/code-viewer.html
@@ -19,6 +19,7 @@
 
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/display/panel.js"></script>
+<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>
 <script src="lib/codemirror/addon/selection/active-line.js"></script>
diff --git a/src/js/code-viewer.js b/src/js/code-viewer.js
index e0904d646..98a469810 100644
--- a/src/js/code-viewer.js
+++ b/src/js/code-viewer.js
@@ -37,20 +37,19 @@ import { dom, qs$ } from './dom.js';
     dom.attr(a, 'title', url);
     const response = await fetch(url);
     const text = await response.text();
-    const formatOptions = { indent_size: 2 };
     let value = '', mode = '';
     switch ( params.get('type') ) {
         case 'css':
             mode = 'text/css';
-            value = beautifier.css(text, formatOptions);
+            value = beautifier.css(text, { indent_size: 2 });
             break;
         case 'html':
             mode = 'text/html';
-            value = beautifier.html(text, formatOptions);
+            value = beautifier.html(text, { indent_size: 2 });
             break;
         case 'js':
             mode = 'text/javascript';
-            value = beautifier.js(text, formatOptions);
+            value = beautifier.js(text, { indent_size: 4 });
             break;
         default:
             break;
@@ -60,8 +59,8 @@ import { dom, qs$ } from './dom.js';
         gutters: [ 'CodeMirror-linenumbers' ],
         lineNumbers: true,
         lineWrapping: true,
+        matchBrackets: true,
         mode,
-        readOnly: true,
         styleActiveLine: {
             nonEmpty: true,
         },