diff --git a/awx/ui/client/legacy/styles/forms.less b/awx/ui/client/legacy/styles/forms.less
index 9f31db8a7f..f36914df31 100644
--- a/awx/ui/client/legacy/styles/forms.less
+++ b/awx/ui/client/legacy/styles/forms.less
@@ -485,6 +485,8 @@
 }
 
 .CodeMirror {
+    min-height: initial !important;
+    max-height: initial !important;
     border-radius: 5px;
     font-style: normal;
     color: @field-input-text;
diff --git a/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js b/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js
index 0a43cfb562..a44281556c 100644
--- a/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js
+++ b/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.directive.js
@@ -2,7 +2,7 @@ const templateUrl = require('~components/syntax-highlight/syntax-highlight.parti
 
 function atSyntaxHighlightController ($scope, AngularCodeMirror) {
     const vm = this;
-    const variablesName = `${$scope.name}_codemirror`;
+    const varName = `${$scope.name}_codemirror`;
 
     function init () {
         if ($scope.disabled === 'true') {
@@ -10,16 +10,14 @@ function atSyntaxHighlightController ($scope, AngularCodeMirror) {
         } else if ($scope.disabled === 'false') {
             $scope.disabled = false;
         }
-        // TODO: get default value
         $scope.value = $scope.value || $scope.default;
-        $scope.parseType = 'jinja2';
 
-        $scope.variablesName = variablesName;
-        $scope[variablesName] = $scope.value || '';
+        $scope.varName = varName;
+        $scope[varName] = $scope.value;
         const codeMirror = AngularCodeMirror($scope.disabled);
         codeMirror.addModes({
             jinja2: {
-                mode: 'jinja2',
+                mode: $scope.mode,
                 matchBrackets: true,
                 autoCloseBrackets: true,
                 styleActiveLine: true,
@@ -31,20 +29,19 @@ function atSyntaxHighlightController ($scope, AngularCodeMirror) {
         });
         codeMirror.showTextArea({
             scope: $scope,
-            model: variablesName,
+            model: varName,
             element: `${$scope.name}_codemirror`,
             lineNumbers: true,
-            mode: 'jinja2',
+            mode: $scope.mode,
         });
 
-        $scope.$watch(variablesName, () => {
-            $scope.value = $scope[variablesName];
+        $scope.$watch(varName, () => {
+            $scope.value = $scope[varName];
         });
     }
 
     vm.name = $scope.name;
-    // vm.variablesName = variablesName;
-    vm.parseType = $scope.parseType;
+    vm.rows = $scope.rows || 6;
     if ($scope.init) {
         $scope.init = init;
     }
@@ -74,7 +71,10 @@ function atCodeMirrorTextarea () {
             tooltipPlacement: '@',
             value: '=',
             name: '@',
-            init: '='
+            init: '=',
+            default: '@',
+            rows: '@',
+            mode: '@',
         }
     };
 }
diff --git a/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html b/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html
index da5c864430..0efa81b061 100644
--- a/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html
+++ b/awx/ui/client/lib/components/syntax-highlight/syntax-highlight.partial.html
@@ -23,7 +23,7 @@
     </div>
     <textarea
         ng-disabled="disabled"
-        rows="2"
+        rows="{{ vm.rows }}"
         ng-model="codeMirrorValue"
         name="{{ vm.name }}_codemirror"
         class="form-control Form-textArea"
diff --git a/awx/ui/client/src/notifications/notificationTemplates.form.js b/awx/ui/client/src/notifications/notificationTemplates.form.js
index 5ea592be93..93420a8f30 100644
--- a/awx/ui/client/src/notifications/notificationTemplates.form.js
+++ b/awx/ui/client/src/notifications/notificationTemplates.form.js
@@ -592,14 +592,16 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Start Message'),
                 class: 'Form-formGroup--fullWidth',
                 type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages",
-                rows: 1,
+                rows: 2,
             },
             start_body: {
-                label: i18n._('Start Message Expanded'),
+                label: i18n._('Start Body'),
                 class: 'Form-formGroup--fullWidth',
-                type: ' syntax_highlight',
+                type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages && notification_type.value == 'email'",
             },
@@ -607,14 +609,16 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Success Message'),
                 class: 'Form-formGroup--fullWidth',
                 type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages",
-                rows: 1,
+                rows: 2,
             },
             success_body: {
-                label: i18n._('Success Message Expanded'),
+                label: i18n._('Success Body'),
                 class: 'Form-formGroup--fullWidth',
-                type: ' syntax_highlight',
+                type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages && notification_type.value == 'email'",
             },
@@ -622,14 +626,16 @@ export default ['i18n', function(i18n) {
                 label: i18n._('Error Message'),
                 class: 'Form-formGroup--fullWidth',
                 type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages",
-                rows: 1,
+                rows: 2,
             },
             error_body: {
-                label: i18n._('Error Message Expanded'),
+                label: i18n._('Error Body'),
                 class: 'Form-formGroup--fullWidth',
-                type: ' syntax_highlight',
+                type: 'syntax_highlight',
+                mode: 'jinja2',
                 default: '',
                 ngShow: "customize_messages && notification_type.value == 'email'",
             },
diff --git a/awx/ui/client/src/shared/form-generator.js b/awx/ui/client/src/shared/form-generator.js
index d4f27a0d9c..c8eed8ebea 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1364,11 +1364,12 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `id="${form.name}_${fld}" `;
                         html += `class="${field.class}" `;
                         html += `label="${field.label}" `;
-                        html += `tooltip="${field.awPopOver}" `;
+                        html += `tooltip="${field.awPopOver || ''}" `;
                         html += `name="${fld}" `;
                         html += `value="${fld}" `;
                         html += `default="${field.default || ''}" `;
                         html += `rows="${field.rows || 6}" `;
+                        html += `mode="${field.mode}" `;
                         html += `ng-disabled="${field.ngDisabled}" `;
                         html += '></at-syntax-highlight>';
                     }