diff --git a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
index 7bffee7b3d1..123f15c5582 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/LokiQueryPreview.tsx
@@ -8,7 +8,11 @@ interface Props {
 }
 
 const LokiQueryPreview = ({ query }: Props) => {
-  return <RawQuery query={query} language={{ grammar: lokiGrammar, name: 'promql' }} />;
+  return (
+    <pre>
+      <RawQuery query={query} language={{ grammar: lokiGrammar, name: 'promql' }} />
+    </pre>
+  );
 };
 
 export default LokiQueryPreview;
diff --git a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
index 2d9323ef564..6db93b7e358 100644
--- a/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
+++ b/public/app/features/alerting/unified/components/rule-viewer/tabs/Query/PrometheusQueryPreview.tsx
@@ -8,7 +8,11 @@ interface Props {
 }
 
 const PrometheusQueryPreview = ({ query }: Props) => {
-  return <RawQuery query={query} language={{ grammar: promqlGrammar, name: 'promql' }} />;
+  return (
+    <pre>
+      <RawQuery query={query} language={{ grammar: promqlGrammar, name: 'promql' }} />
+    </pre>
+  );
 };
 
 export default PrometheusQueryPreview;