diff --git a/static/css/style.css b/static/css/style.css
index ac6239b..8274bd5 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -53,10 +53,18 @@ pre:has(> #pipeline-code:empty)::after {
   width: 20px;
 }
 
-div[class*="language-"],
-code[class*="language-"],
-code[class*="language-"] *,
-pre[class*="language-"] {
+div[class*="language-yaml"],
+code[class*="language-yaml"],
+code[class*="language-yaml"] *,
+pre[class*="language-yaml"] {
+  word-break: break-word !important;
+  white-space: pre !important;
+}
+
+div[class*="language-splunk"],
+code[class*="language-splunk"],
+code[class*="language-splunk"] *,
+pre[class*="language-splunk"] {
   word-break: break-word !important;
   white-space: pre-line !important;
 }
diff --git a/templates/index.html b/templates/index.html
index 8ae3b8e..267bb7f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -175,7 +175,7 @@
               query
             </span>
           </p>
-          <pre class="border border-sigma-blue">
+          <pre class="border border-sigma-blue language-splunk-spl">
             <code id="query-code" class="language-splunk-spl text-sm">the generated query should be displayed here :)</code></pre>
         </div>