diff --git a/public/app/core/components/query_part/query_part_editor.ts b/public/app/core/components/query_part/query_part_editor.ts
index 6181d020471..2cab966ed46 100644
--- a/public/app/core/components/query_part/query_part_editor.ts
+++ b/public/app/core/components/query_part/query_part_editor.ts
@@ -103,7 +103,7 @@ export function queryPartEditorDirective($compile, templateSrv) {
           $scope.$apply(() => {
             $scope.handleEvent({ $event: { name: 'get-param-options' } }).then(result => {
               const dynamicOptions = _.map(result, op => {
-                return op.value;
+                return _.escape(op.value);
               });
               callback(dynamicOptions);
             });
@@ -117,6 +117,7 @@ export function queryPartEditorDirective($compile, templateSrv) {
           minLength: 0,
           items: 1000,
           updater: value => {
+            value = _.unescape(value);
             setTimeout(() => {
               inputBlur.call($input[0], paramIndex);
             }, 0);
diff --git a/public/app/core/components/sql_part/sql_part_editor.ts b/public/app/core/components/sql_part/sql_part_editor.ts
index 8097dddeb3b..1d29c577560 100644
--- a/public/app/core/components/sql_part/sql_part_editor.ts
+++ b/public/app/core/components/sql_part/sql_part_editor.ts
@@ -109,12 +109,12 @@ export function sqlPartEditorDirective($compile, templateSrv) {
           $scope.$apply(() => {
             $scope.handleEvent({ $event: { name: 'get-param-options', param: param } }).then(result => {
               const dynamicOptions = _.map(result, op => {
-                return op.value;
+                return _.escape(op.value);
               });
 
               // add current value to dropdown if it's not in dynamicOptions
               if (_.indexOf(dynamicOptions, part.params[paramIndex]) === -1) {
-                dynamicOptions.unshift(part.params[paramIndex]);
+                dynamicOptions.unshift(_.escape(part.params[paramIndex]));
               }
 
               callback(dynamicOptions);
@@ -129,6 +129,7 @@ export function sqlPartEditorDirective($compile, templateSrv) {
           minLength: 0,
           items: 1000,
           updater: value => {
+            value = _.unescape(value);
             if (value === part.params[paramIndex]) {
               clearTimeout(cancelBlur);
               $input.focus();
diff --git a/public/app/core/directives/metric_segment.ts b/public/app/core/directives/metric_segment.ts
index de904e95fc6..85576dcffee 100644
--- a/public/app/core/directives/metric_segment.ts
+++ b/public/app/core/directives/metric_segment.ts
@@ -3,7 +3,7 @@ import $ from 'jquery';
 import coreModule from '../core_module';
 
 /** @ngInject */
-export function metricSegment($compile, $sce) {
+export function metricSegment($compile, $sce, templateSrv) {
   const inputTemplate =
     '<input type="text" data-provide="typeahead" ' +
     ' class="gf-form-input input-medium"' +
@@ -41,13 +41,11 @@ export function metricSegment($compile, $sce) {
           return;
         }
 
-        value = _.unescape(value);
-
         $scope.$apply(() => {
           const selected = _.find($scope.altSegments, { value: value });
           if (selected) {
             segment.value = selected.value;
-            segment.html = selected.html || selected.value;
+            segment.html = selected.html || $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(selected.value));
             segment.fake = false;
             segment.expandable = selected.expandable;
 
@@ -56,7 +54,7 @@ export function metricSegment($compile, $sce) {
             }
           } else if (segment.custom !== 'false') {
             segment.value = value;
-            segment.html = $sce.trustAsHtml(value);
+            segment.html = $sce.trustAsHtml(templateSrv.highlightVariablesAsHtml(value));
             segment.expandable = true;
             segment.fake = false;
           }
@@ -95,7 +93,7 @@ export function metricSegment($compile, $sce) {
             // add custom values
             if (segment.custom !== 'false') {
               if (!segment.fake && _.indexOf(options, segment.value) === -1) {
-                options.unshift(segment.value);
+                options.unshift(_.escape(segment.value));
               }
             }
 
@@ -105,6 +103,7 @@ export function metricSegment($compile, $sce) {
       };
 
       $scope.updater = value => {
+        value = _.unescape(value);
         if (value === segment.value) {
           clearTimeout(cancelBlur);
           $input.focus();