From 387a740efff7188166355d5d3304d5ad8d946f8c Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Mon, 13 Oct 2025 11:10:21 +0200
Subject: [PATCH 1/2] AI answer hljs fallback

---
 .../SearchOrAskAi/AskAi/ChatMessage.tsx              | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
index c197bebd8..8a548339c 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
@@ -28,9 +28,15 @@ import { useEffect, useMemo } from 'react'
 const createMarkedInstance = () => {
     const renderer: RendererObject = {
         code({ text, lang }: Tokens.Code): string {
-            const highlighted = lang
-                ? hljs.highlight(text, { language: lang }).value
-                : hljs.highlightAuto(text).value
+            let highlighted: string
+            try {
+                highlighted = lang
+                    ? hljs.highlight(text, { language: lang }).value
+                    : hljs.highlightAuto(text).value
+            } catch {
+                // Fallback to auto highlighting if the specified language is not found
+                highlighted = hljs.highlightAuto(text).value
+            }
             return `<div class="highlight">
                 <pre>
                     <code class="language-${lang}">${highlighted}</code>

From 9ae0644d12e9050b0d715c20254fe2141d481e97 Mon Sep 17 00:00:00 2001
From: Jan Calanog <jan.calanog@elastic.co>
Date: Mon, 13 Oct 2025 11:20:36 +0200
Subject: [PATCH 2/2] Reuse existing hljs instance

---
 src/Elastic.Documentation.Site/Assets/hljs.ts                  | 3 +++
 .../Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx  | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/Elastic.Documentation.Site/Assets/hljs.ts b/src/Elastic.Documentation.Site/Assets/hljs.ts
index 633366c81..384bba49f 100644
--- a/src/Elastic.Documentation.Site/Assets/hljs.ts
+++ b/src/Elastic.Documentation.Site/Assets/hljs.ts
@@ -176,3 +176,6 @@ export function initHighlight() {
         hljs.highlightElement
     )
 }
+
+// Export the configured hljs instance for reuse
+export { hljs }
diff --git a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
index 8a548339c..1d79e8cbd 100644
--- a/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
+++ b/src/Elastic.Documentation.Site/Assets/web-components/SearchOrAskAi/AskAi/ChatMessage.tsx
@@ -1,4 +1,5 @@
 import { initCopyButton } from '../../../copybutton'
+import { hljs } from '../../../hljs'
 import { GeneratingStatus } from './GeneratingStatus'
 import { References } from './RelatedResources'
 import { ChatMessage as ChatMessageType } from './chat.store'
@@ -19,7 +20,6 @@ import {
 } from '@elastic/eui'
 import { css } from '@emotion/react'
 import DOMPurify from 'dompurify'
-import hljs from 'highlight.js/lib/core'
 import { Marked, RendererObject, Tokens } from 'marked'
 import * as React from 'react'
 import { useEffect, useMemo } from 'react'