From 2de3af536ceee5e003626274e63cab4730a67d33 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <peterbe@github.com>
Date: Thu, 11 Jan 2024 14:04:25 -0500
Subject: [PATCH] Remove possible 'highlighted' dataset before highlighting
 (#48667)

---
 src/rest/components/RestCodeSamples.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/rest/components/RestCodeSamples.tsx b/src/rest/components/RestCodeSamples.tsx
index 5a9f7878504a..41237303df44 100644
--- a/src/rest/components/RestCodeSamples.tsx
+++ b/src/rest/components/RestCodeSamples.tsx
@@ -40,6 +40,14 @@ function getLanguageHighlight(selectedLanguage: string) {
   return selectedLanguage === CodeSampleKeys.javascript ? 'javascript' : 'curl'
 }
 
+function highlightElement(element: HTMLElement) {
+  element.className = 'hljs'
+  // If the element was already highlighted, remove the dataset property
+  // otherwise the `hljs.highlightElement` function will not highlight.
+  delete element.dataset.highlighted
+  hljs.highlightElement(element)
+}
+
 export function RestCodeSamples({ operation, slug, heading }: Props) {
   const { t } = useTranslation(['rest_reference'])
   const { isEnterpriseServer } = useVersion()
@@ -147,8 +155,7 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
     // intersection observer syntax highlighting
     // (ClientSideHighlightJS) will have already handled highlighting
     if (reqElem && !firstRender.current) {
-      reqElem.className = 'hljs'
-      hljs.highlightElement(reqElem)
+      highlightElement(reqElem)
       handleResponseResize()
     }
   }, [selectedLanguage])
@@ -168,8 +175,7 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
     // intersection observer syntax highlighting
     // (ClientSideHighlightJS) will have already handled highlighting
     if (reqElem && !firstRender.current) {
-      reqElem.className = 'hljs'
-      hljs.highlightElement(reqElem)
+      highlightElement(reqElem)
     }
   }, [selectedResponse])
 
@@ -178,14 +184,12 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
   useEffect(() => {
     const reqElem = requestCodeExample.current
     if (reqElem) {
-      reqElem.className = 'hljs'
-      hljs.highlightElement(reqElem)
+      highlightElement(reqElem)
     }
 
     const resElem = responseCodeExample.current
     if (resElem) {
-      resElem.className = 'hljs'
-      hljs.highlightElement(resElem)
+      highlightElement(resElem)
     }
   }, [selectedExample])