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 08d37ee81a..0a43cfb562 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
@@ -11,15 +11,15 @@ function atSyntaxHighlightController ($scope, AngularCodeMirror) {
             $scope.disabled = false;
         }
         // TODO: get default value
-        $scope.codeMirrorValue = $scope.codeMirrorValue || '';
+        $scope.value = $scope.value || $scope.default;
         $scope.parseType = 'jinja2';
 
         $scope.variablesName = variablesName;
-        $scope[variablesName] = $scope.codeMirrorValue;
+        $scope[variablesName] = $scope.value || '';
         const codeMirror = AngularCodeMirror($scope.disabled);
         codeMirror.addModes({
             jinja2: {
-                mode: 'text/x-jinja2',
+                mode: 'jinja2',
                 matchBrackets: true,
                 autoCloseBrackets: true,
                 styleActiveLine: true,
@@ -29,7 +29,6 @@ function atSyntaxHighlightController ($scope, AngularCodeMirror) {
                 scrollbarStyle: null,
             }
         });
-        // codeMirror.fromTextArea(document.getElementById(`${$scope.name}_codemirror`));
         codeMirror.showTextArea({
             scope: $scope,
             model: variablesName,
@@ -39,12 +38,12 @@ function atSyntaxHighlightController ($scope, AngularCodeMirror) {
         });
 
         $scope.$watch(variablesName, () => {
-            $scope.codeMirrorValue = $scope[variablesName];
+            $scope.value = $scope[variablesName];
         });
     }
 
     vm.name = $scope.name;
-    vm.variablesName = variablesName;
+    // vm.variablesName = variablesName;
     vm.parseType = $scope.parseType;
     if ($scope.init) {
         $scope.init = init;
@@ -73,7 +72,7 @@ function atCodeMirrorTextarea () {
             labelClass: '@',
             tooltip: '@',
             tooltipPlacement: '@',
-            variables: '=',
+            value: '=',
             name: '@',
             init: '='
         }
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 26f99cb7cb..da5c864430 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
@@ -1,27 +1,29 @@
 <div>
     <div class="atCodeMirror-label">
         <div class="atCodeMirror-labelLeftSide">
-             <span class="atCodeMirror-labelText" ng-class="labelClass">
-                    {{  label || vm.strings.get('code_mirror.label.VARIABLES') }}
-                </span>
-             <a id=""
-                href=""
-                aw-pop-over="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
-                data-placement="{{ tooltipPlacement || 'top' }}"
-                data-container="body"
-                over-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
-                class="help-link"
-                data-original-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
-                title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
-                tabindex="-1"
-                ng-if="tooltip">
-                 <i class="fa fa-question-circle"></i>
-             </a>
+            <span class="atCodeMirror-labelText" ng-class="labelClass">
+                {{  label || vm.strings.get('code_mirror.label.VARIABLES') }}
+            </span>
+            <a
+              id=""
+              href=""
+              aw-pop-over="{{ tooltip || vm.strings.get('code_mirror.tooltip.TOOLTIP') }}"
+              data-placement="{{ tooltipPlacement || 'top' }}"
+              data-container="body"
+              over-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+              class="help-link"
+              data-original-title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+              title="{{ label || vm.strings.get('code_mirror.label.VARIABLES') }}"
+              tabindex="-1"
+              ng-if="!!tooltip"
+            >
+                <i class="fa fa-question-circle"></i>
+            </a>
         </div>
     </div>
     <textarea
         ng-disabled="disabled"
-        rows="6"
+        rows="2"
         ng-model="codeMirrorValue"
         name="{{ vm.name }}_codemirror"
         class="form-control Form-textArea"
diff --git a/awx/ui/client/src/notifications/add/add.controller.js b/awx/ui/client/src/notifications/add/add.controller.js
index a181e416d5..335f633910 100644
--- a/awx/ui/client/src/notifications/add/add.controller.js
+++ b/awx/ui/client/src/notifications/add/add.controller.js
@@ -187,11 +187,11 @@ export default ['Rest', 'Wait', 'NotificationsFormObject',
                 "description": $scope.description,
                 "organization": $scope.organization,
                 "messages": $scope.customize_messages ? {
-                  start_message: $scope.start_message,
-                  start_body: $scope.start_body,
-                  success_message: $scope.success_message,
-                  success_body: $scope.success_body,
-                  error_message: $scope.error_message,
+                    start_message: $scope.start_message,
+                    start_body: $scope.start_body,
+                    success_message: $scope.success_message,
+                    success_body: $scope.success_body,
+                    error_message: $scope.error_message,
                   error_body: $scope.error_body,
                 } : null,
                 "notification_type": v,
diff --git a/awx/ui/client/src/notifications/notificationTemplates.form.js b/awx/ui/client/src/notifications/notificationTemplates.form.js
index 8ebd37d923..5ea592be93 100644
--- a/awx/ui/client/src/notifications/notificationTemplates.form.js
+++ b/awx/ui/client/src/notifications/notificationTemplates.form.js
@@ -593,40 +593,43 @@ export default ['i18n', function(i18n) {
                 class: 'Form-formGroup--fullWidth',
                 type: 'syntax_highlight',
                 default: '',
-                ngShow: "true || customize_messages",
+                ngShow: "customize_messages",
+                rows: 1,
             },
             start_body: {
-                label: i18n._('Start Body'),
+                label: i18n._('Start Message Expanded'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'textarea',
+                type: ' syntax_highlight',
                 default: '',
                 ngShow: "customize_messages && notification_type.value == 'email'",
             },
             success_message: {
                 label: i18n._('Success Message'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'text',
+                type: 'syntax_highlight',
                 default: '',
                 ngShow: "customize_messages",
+                rows: 1,
             },
             success_body: {
-                label: i18n._('Success Body'),
+                label: i18n._('Success Message Expanded'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'textarea',
+                type: ' syntax_highlight',
                 default: '',
                 ngShow: "customize_messages && notification_type.value == 'email'",
             },
             error_message: {
                 label: i18n._('Error Message'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'text',
+                type: 'syntax_highlight',
                 default: '',
                 ngShow: "customize_messages",
+                rows: 1,
             },
             error_body: {
-                label: i18n._('Error Body'),
+                label: i18n._('Error Message Expanded'),
                 class: 'Form-formGroup--fullWidth',
-                type: 'textarea',
+                type: ' syntax_highlight',
                 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 28ac539496..d4f27a0d9c 100644
--- a/awx/ui/client/src/shared/form-generator.js
+++ b/awx/ui/client/src/shared/form-generator.js
@@ -1366,7 +1366,9 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
                         html += `label="${field.label}" `;
                         html += `tooltip="${field.awPopOver}" `;
                         html += `name="${fld}" `;
-                        html += `variables="${field.variables}" `;
+                        html += `value="${fld}" `;
+                        html += `default="${field.default || ''}" `;
+                        html += `rows="${field.rows || 6}" `;
                         html += `ng-disabled="${field.ngDisabled}" `;
                         html += '></at-syntax-highlight>';
                     }