diff --git a/app/assets/javascripts/admin/appstack.js b/app/assets/javascripts/admin/appstack.js
index 8621f71e5bdf877393fa075df6eab64485c0c6fc..288469caaf16052c44adc410d92efad1a25c718e 100644
--- a/app/assets/javascripts/admin/appstack.js
+++ b/app/assets/javascripts/admin/appstack.js
@@ -13,8 +13,6 @@
 //= require slug/slug
 //= require cocoon
 //= require codemirror/lib/codemirror
-//= require codemirror/mode/css/css
-//= require codemirror/mode/sass/sass
 //= require_self
 //= require_tree ./commons
 //= require_tree ../application/plugins
diff --git a/app/assets/javascripts/admin/plugins/codemirror.js b/app/assets/javascripts/admin/plugins/codemirror.js
index 07a2bcddd06e67b9883564025427733929777d14..bfb64ac9709e1e799946a5ef0a5d4e84ce78249b 100644
--- a/app/assets/javascripts/admin/plugins/codemirror.js
+++ b/app/assets/javascripts/admin/plugins/codemirror.js
@@ -1,3 +1,9 @@
+//= require codemirror/mode/xml/xml
+//= require codemirror/mode/javascript/javascript
+//= require codemirror/mode/css/css
+//= require codemirror/mode/htmlmixed/htmlmixed
+//= require codemirror/mode/sass/sass
+
 /*global CodeMirror */
 
 // Add [data-provider="codemirror"] to textarea.
diff --git a/app/assets/javascripts/admin/pure.js b/app/assets/javascripts/admin/pure.js
index 8a2392187908e61810252157f9c88ec2476e521a..94017fb5f5845850521b0e158949325b6794e6f7 100644
--- a/app/assets/javascripts/admin/pure.js
+++ b/app/assets/javascripts/admin/pure.js
@@ -14,8 +14,6 @@
 //= require slug/slug
 //= require cocoon
 //= require codemirror/lib/codemirror
-//= require codemirror/mode/css/css
-//= require codemirror/mode/sass/sass
 //= require_self
 //= require_tree ./commons
 //= require_tree ../application/plugins
diff --git a/app/views/admin/communication/blocks/components/_edit.html.erb b/app/views/admin/communication/blocks/components/_edit.html.erb
index b2bc336a1db1ad86780cdde67f3b6f1f2e460177..f3c6a8352944be21b27cfb764eca6860d68614e1 100644
--- a/app/views/admin/communication/blocks/components/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/_edit.html.erb
@@ -19,6 +19,7 @@ placeholder ||= t "#{i18n_component}.placeholder", default: ''
 hint ||= t "#{i18n_component}.hint", default: ''
 none ||= t "#{i18n_component}.none", default: ''
 summernote_config ||= "mini-list"
+codemirror_mode ||= "htmlmixed"
 partial = "admin/communication/blocks/components/#{component.kind}/edit"
 
 local_assigns[:template] = template
@@ -31,5 +32,6 @@ local_assigns[:placeholder] = placeholder
 local_assigns[:hint] = hint
 local_assigns[:none] ||= t "#{i18n_component}.none", default: ''
 local_assigns[:summernote_config] ||= summernote_config
+local_assigns[:codemirror_mode] ||= codemirror_mode
 %>
 <%= render partial, **local_assigns %>
diff --git a/app/views/admin/communication/blocks/components/code/_edit.html.erb b/app/views/admin/communication/blocks/components/code/_edit.html.erb
index 378a26d41bc751c05ee349f1ddeca7895b1df33d..c21538631ba9c501802a04f93d723a9f2a6c109b 100644
--- a/app/views/admin/communication/blocks/components/code/_edit.html.erb
+++ b/app/views/admin/communication/blocks/components/code/_edit.html.erb
@@ -4,7 +4,8 @@
   <%= label %>
 </label>
 <textarea :id="<%= dom_id.html_safe %>"
-          class="form-control mb-3"
+          class="form-control mb-3 codemirror-vue"
+          data-codemirror-mode="<%= codemirror_mode %>"
           rows="<%= rows %>"
           v-model="<%= model %>.<%= property %>"
           placeholder="<%= placeholder %>"></textarea>
diff --git a/app/views/admin/communication/blocks/edit.html.erb b/app/views/admin/communication/blocks/edit.html.erb
index d57c344baacdba41e8e45f2cabe0122919169d07..b045b155e30128741f54a81c6afff8dabba57494 100644
--- a/app/views/admin/communication/blocks/edit.html.erb
+++ b/app/views/admin/communication/blocks/edit.html.erb
@@ -71,9 +71,9 @@
         this.uploadFile(event.target, files[0], object, key);
       },
       uploadFile(input, file, object, key) {
-        var size = Math.round(file.size / 1024 / 1024), 
+        var size = Math.round(file.size / 1024 / 1024),
             sizeLimit = <%= Communication::Block::IMAGE_MAX_SIZE %>,
-            sizeLimitMo = 0, 
+            sizeLimitMo = 0,
             controller;
         if (input.hasAttribute('data-size-limit')) {
           sizeLimit = input.getAttribute('data-size-limit');
@@ -107,6 +107,13 @@
           this.initSummernote($summernoteElements.get(index));
         }.bind(this));
       },
+      handleCodemirrors() {
+        var $codemirrorElements = $('.codemirror-vue');
+
+        $codemirrorElements.each(function(index){
+          this.initCodemirror($codemirrorElements.get(index));
+        }.bind(this));
+      },
       initSummernote(element) {
         var config = element.getAttribute('data-summernote-config') || 'default';
         $(element).summernote({
@@ -121,10 +128,22 @@
             }.bind(this)
           }
         });
+      },
+      initCodemirror(element) {
+        console.log(element.getAttribute('data-codemirror-mode'));
+        CodeMirror.fromTextArea(element, {
+            lineNumbers: true,
+            styleActiveLine: true,
+            indentUnit: 2,
+            viewportMargin: Infinity,
+            mode: element.getAttribute('data-codemirror-mode')
+        });
       }
     },
     mounted: function() {
       this.handleSummernotes();
+      // Use Timeout to prevent display issues
+      setTimeout(this.handleCodemirrors.bind(this), 0);
     }
   });