diff --git a/.editorconfig b/.editorconfig
index 885c8f7a2..2df3d0518 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -19,6 +19,11 @@ indent_size = 4
 indent_style = space
 indent_size = 2
 
+[*.{ts,tsx}]
+indent_style = space
+indent_size = 4
+quote_type = single
+
 # Dotnet code style settings:
 [*.{cs,vb}]
 trim_trailing_whitespace=true
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
index 434315bb7..a49192f40 100644
--- a/.github/workflows/pr.yml
+++ b/.github/workflows/pr.yml
@@ -59,6 +59,9 @@ jobs:
       - name: Lint
         run: npm run lint
       
+      - name: Format
+        run: npm run fmt:check
+      
 
   build:
     runs-on: ${{ matrix.os }}
diff --git a/src/Elastic.Markdown/.prettierignore b/src/Elastic.Markdown/.prettierignore
new file mode 100644
index 000000000..1b8ac8894
--- /dev/null
+++ b/src/Elastic.Markdown/.prettierignore
@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage
diff --git a/src/Elastic.Markdown/.prettierrc b/src/Elastic.Markdown/.prettierrc
new file mode 100644
index 000000000..7fe98d909
--- /dev/null
+++ b/src/Elastic.Markdown/.prettierrc
@@ -0,0 +1,6 @@
+{
+	"semi": false,
+	"trailingComma": "es5",
+	"singleQuote": true,
+	"plugins": ["prettier-plugin-tailwindcss"]
+}
diff --git a/src/Elastic.Markdown/Assets/copybutton.css b/src/Elastic.Markdown/Assets/copybutton.css
index 4b50379d6..2a1f5d668 100644
--- a/src/Elastic.Markdown/Assets/copybutton.css
+++ b/src/Elastic.Markdown/Assets/copybutton.css
@@ -1,41 +1,45 @@
 /* Copy buttons */
 button.copybtn {
-    position: absolute;
-    display: flex;
-    top: calc(var(--spacing) * 5);
-    right: calc(var(--spacing) * 4);
-    width: 1.7em;
-    height: 1.7em;
+	position: absolute;
+	display: flex;
+	top: calc(var(--spacing) * 5);
+	right: calc(var(--spacing) * 4);
+	width: 1.7em;
+	height: 1.7em;
 	opacity: 0;
-    transition: opacity 0.3s, border .3s, background-color .3s;
-    user-select: none;
+	transition:
+		opacity 0.3s,
+		border 0.3s,
+		background-color 0.3s;
+	user-select: none;
 	cursor: pointer;
-    padding: 0;
-    border: none;
-    outline: none;
-    border-radius: 0.4em;
-    background-color: rgb(34, 39, 46);
-    color: var(--color-grey-50);
+	padding: 0;
+	border: none;
+	outline: none;
+	border-radius: 0.4em;
+	background-color: rgb(34, 39, 46);
+	color: var(--color-grey-50);
 }
 
 button.copybtn.success {
 	background-color: rgb(34, 39, 46);
-    color: #22863a;
+	color: #22863a;
 }
 
 button.copybtn svg {
-    stroke: currentColor;
-    width: 1.5em;
-    height: 1.5em;
-    padding: 0.1em;
+	stroke: currentColor;
+	width: 1.5em;
+	height: 1.5em;
+	padding: 0.1em;
 }
 
-div.highlight  {
-    position: relative;
+div.highlight {
+	position: relative;
 }
 
 /* Show the copybutton */
-.highlight:hover button.copybtn, button.copybtn.success {
+.highlight:hover button.copybtn,
+button.copybtn.success {
 	opacity: 1;
 }
 
@@ -47,39 +51,43 @@ div.highlight  {
  *
  * <p class="o-tooltip--left" data-tooltip="Hey">Short</p>
  */
- .o-tooltip--left {
-  position: relative;
- }
+.o-tooltip--left {
+	position: relative;
+}
 
- .o-tooltip--left:after {
-    opacity: 0;
-    visibility: hidden;
-    position: absolute;
-    content: attr(data-tooltip);
-    padding: .2em;
-    font-size: var(--text-sm);
-    left: -.2em;
+.o-tooltip--left:after {
+	opacity: 0;
+	visibility: hidden;
+	position: absolute;
+	content: attr(data-tooltip);
+	padding: 0.2em;
+	font-size: var(--text-sm);
+	left: -0.2em;
 	background-color: rgb(34, 39, 46);
-    color: var(--color-grey-50);
-    white-space: nowrap;
-    z-index: 2;
-    border-radius: 2px;
-    transform: translateX(-102%) translateY(0);
-    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+	color: var(--color-grey-50);
+	white-space: nowrap;
+	z-index: 2;
+	border-radius: 2px;
+	transform: translateX(-102%) translateY(0);
+	transition:
+		opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1),
+		transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
 }
 
 .o-tooltip--left:hover:after {
-    display: block;
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-100%) translateY(0);
-    transition: opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1), transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
-    transition-delay: .5s;
+	display: block;
+	opacity: 1;
+	visibility: visible;
+	transform: translateX(-100%) translateY(0);
+	transition:
+		opacity 0.2s cubic-bezier(0.64, 0.09, 0.08, 1),
+		transform 0.2s cubic-bezier(0.64, 0.09, 0.08, 1);
+	transition-delay: 0.5s;
 }
 
 /* By default the copy button shouldn't show up when printing a page */
 @media print {
-    button.copybtn {
-        display: none;
-    }
+	button.copybtn {
+		display: none;
+	}
 }
diff --git a/src/Elastic.Markdown/Assets/copybutton.ts b/src/Elastic.Markdown/Assets/copybutton.ts
index 89718e26c..946c7fd8b 100644
--- a/src/Elastic.Markdown/Assets/copybutton.ts
+++ b/src/Elastic.Markdown/Assets/copybutton.ts
@@ -3,73 +3,76 @@
 import * as ClipboardJS from 'clipboard'
 
 const DOCUMENTATION_OPTIONS = {
-	VERSION: '',
-	LANGUAGE: 'en',
-	COLLAPSE_INDEX: false,
-	BUILDER: 'html',
-	FILE_SUFFIX: '.html',
-	LINK_SUFFIX: '.html',
-	HAS_SOURCE: true,
-	SOURCELINK_SUFFIX: '.txt',
-	NAVIGATION_WITH_KEYS: false,
-	SHOW_SEARCH_SUMMARY: true,
-	ENABLE_SEARCH_SHORTCUTS: true,
-};
+    VERSION: '',
+    LANGUAGE: 'en',
+    COLLAPSE_INDEX: false,
+    BUILDER: 'html',
+    FILE_SUFFIX: '.html',
+    LINK_SUFFIX: '.html',
+    HAS_SOURCE: true,
+    SOURCELINK_SUFFIX: '.txt',
+    NAVIGATION_WITH_KEYS: false,
+    SHOW_SEARCH_SUMMARY: true,
+    ENABLE_SEARCH_SHORTCUTS: true,
+}
 
 const messages = {
-  'en': {
-    'copy': 'Copy',
-    'copy_to_clipboard': 'Copy to clipboard',
-    'copy_success': 'Copied!',
-    'copy_failure': 'Failed to copy',
-  },
-  'es' : {
-    'copy': 'Copiar',
-    'copy_to_clipboard': 'Copiar al portapapeles',
-    'copy_success': '¡Copiado!',
-    'copy_failure': 'Error al copiar',
-  },
-  'de' : {
-    'copy': 'Kopieren',
-    'copy_to_clipboard': 'In die Zwischenablage kopieren',
-    'copy_success': 'Kopiert!',
-    'copy_failure': 'Fehler beim Kopieren',
-  },
-  'fr' : {
-    'copy': 'Copier',
-    'copy_to_clipboard': 'Copier dans le presse-papier',
-    'copy_success': 'Copié !',
-    'copy_failure': 'Échec de la copie',
-  },
-  'ru': {
-    'copy': 'Скопировать',
-    'copy_to_clipboard': 'Скопировать в буфер',
-    'copy_success': 'Скопировано!',
-    'copy_failure': 'Не удалось скопировать',
-  },
-  'zh-CN': {
-    'copy': '复制',
-    'copy_to_clipboard': '复制到剪贴板',
-    'copy_success': '复制成功!',
-    'copy_failure': '复制失败',
-  },
-  'it' : {
-    'copy': 'Copiare',
-    'copy_to_clipboard': 'Copiato negli appunti',
-    'copy_success': 'Copiato!',
-    'copy_failure': 'Errore durante la copia',
-  }
+    en: {
+        copy: 'Copy',
+        copy_to_clipboard: 'Copy to clipboard',
+        copy_success: 'Copied!',
+        copy_failure: 'Failed to copy',
+    },
+    es: {
+        copy: 'Copiar',
+        copy_to_clipboard: 'Copiar al portapapeles',
+        copy_success: '¡Copiado!',
+        copy_failure: 'Error al copiar',
+    },
+    de: {
+        copy: 'Kopieren',
+        copy_to_clipboard: 'In die Zwischenablage kopieren',
+        copy_success: 'Kopiert!',
+        copy_failure: 'Fehler beim Kopieren',
+    },
+    fr: {
+        copy: 'Copier',
+        copy_to_clipboard: 'Copier dans le presse-papier',
+        copy_success: 'Copié !',
+        copy_failure: 'Échec de la copie',
+    },
+    ru: {
+        copy: 'Скопировать',
+        copy_to_clipboard: 'Скопировать в буфер',
+        copy_success: 'Скопировано!',
+        copy_failure: 'Не удалось скопировать',
+    },
+    'zh-CN': {
+        copy: '复制',
+        copy_to_clipboard: '复制到剪贴板',
+        copy_success: '复制成功!',
+        copy_failure: '复制失败',
+    },
+    it: {
+        copy: 'Copiare',
+        copy_to_clipboard: 'Copiato negli appunti',
+        copy_success: 'Copiato!',
+        copy_failure: 'Errore durante la copia',
+    },
 }
 
-const locale = 'en'
-if( document.documentElement.lang !== undefined
-    && messages[document.documentElement.lang] !== undefined ) {
-  locale = document.documentElement.lang
+let locale = 'en'
+if (
+    document.documentElement.lang !== undefined &&
+    messages[document.documentElement.lang] !== undefined
+) {
+    locale = document.documentElement.lang
 }
 
-const doc_url_root = DOCUMENTATION_OPTIONS.URL_ROOT;
+let doc_url_root =
+    'URL_ROOT' in DOCUMENTATION_OPTIONS ? DOCUMENTATION_OPTIONS.URL_ROOT : ''
 if (doc_url_root == '#') {
-    doc_url_root = '';
+    doc_url_root = ''
 }
 
 /**
@@ -82,12 +85,12 @@ const iconCheck = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabl
 </svg>`
 
 // If the user specified their own SVG use that, otherwise use the default
-const iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+let iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
   <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z" />
 </svg>
-`;
+`
 if (!iconCopy) {
-  iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
+    iconCopy = `<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-copy" width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="#000000" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <title>${messages[locale]['copy_to_clipboard']}</title>
   <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
   <rect x="8" y="8" width="12" height="12" rx="2" />
@@ -95,150 +98,172 @@ if (!iconCopy) {
 </svg>`
 }
 
-const codeCellId = index => `codecell${index}`
+const codeCellId = (index) => `codecell${index}`
 
 // Clears selected text since ClipboardJS will select the text when copying
 const clearSelection = () => {
-  if (window.getSelection) {
-    window.getSelection().removeAllRanges()
-  } else if (document.selection) {
-    document.selection.empty()
-  }
+    if (window.getSelection) {
+        window.getSelection().removeAllRanges()
+    } else if ('selection' in document) {
+        ;(document.selection as Selection).empty()
+    }
 }
 
 // Changes tooltip text for a moment, then changes it back
 // We want the timeout of our `success` class to be a bit shorter than the
 // tooltip and icon change, so that we can hide the icon before changing back.
-const timeoutIcon = 1500;
-const timeoutSuccessClass = 1500;
+const timeoutIcon = 1500
+const timeoutSuccessClass = 1500
 
 const temporarilyChangeTooltip = (el, oldText, newText) => {
-  el.setAttribute('data-tooltip', newText)
-  el.classList.add('success')
-  // Remove success a little bit sooner than we change the tooltip
-  // So that we can use CSS to hide the copybutton first
-  setTimeout(() => el.classList.remove('success'), timeoutSuccessClass)
-  setTimeout(() => el.setAttribute('data-tooltip', oldText), timeoutIcon)
+    el.setAttribute('data-tooltip', newText)
+    el.classList.add('success')
+    // Remove success a little bit sooner than we change the tooltip
+    // So that we can use CSS to hide the copybutton first
+    setTimeout(() => el.classList.remove('success'), timeoutSuccessClass)
+    setTimeout(() => el.setAttribute('data-tooltip', oldText), timeoutIcon)
 }
 
 // Changes the copy button icon for two seconds, then changes it back
 const temporarilyChangeIcon = (el) => {
-  el.innerHTML = iconCheck;
-  setTimeout(() => {el.innerHTML = iconCopy}, timeoutIcon)
+    el.innerHTML = iconCheck
+    setTimeout(() => {
+        el.innerHTML = iconCopy
+    }, timeoutIcon)
 }
 
 const addCopyButtonToCodeCells = () => {
-  // If ClipboardJS hasn't loaded, wait a bit and try again. This
-  // happens because we load ClipboardJS asynchronously.
-	
-  // Add copybuttons to all of our code cells
-  const COPYBUTTON_SELECTOR = '.highlight pre';
-  const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
-  codeCells.forEach((codeCell, index) => {
-	if (codeCell.id) {
-		return
-	}
-  
-    const id = codeCellId(index)
-    codeCell.setAttribute('id', id)
-
-    const clipboardButton = id =>
-    `<button class="copybtn o-tooltip--left" data-tooltip="${messages[locale]['copy']}" data-clipboard-target="#${id}">
+    // If ClipboardJS hasn't loaded, wait a bit and try again. This
+    // happens because we load ClipboardJS asynchronously.
+
+    // Add copybuttons to all of our code cells
+    const COPYBUTTON_SELECTOR = '.highlight pre'
+    const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
+    codeCells.forEach((codeCell, index) => {
+        if (codeCell.id) {
+            return
+        }
+
+        const id = codeCellId(index)
+        codeCell.setAttribute('id', id)
+
+        const clipboardButton = (id) =>
+            `<button class="copybtn o-tooltip--left" data-tooltip="${messages[locale]['copy']}" data-clipboard-target="#${id}">
       ${iconCopy}
     </button>`
-    codeCell.insertAdjacentHTML('afterend', clipboardButton(id))
-  })
+        codeCell.insertAdjacentHTML('afterend', clipboardButton(id))
+    })
 
-function escapeRegExp(string) {
-    return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-}
-
-function filterText(target, excludes) {
-    const clone = target.cloneNode(true);  // clone as to not modify the live DOM
-	clone.querySelectorAll(excludes).forEach(node => node.remove());
-    return clone.innerText;
-}
+    function escapeRegExp(string) {
+        return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
+    }
 
-// Callback when a copy button is clicked. Will be passed the node that was clicked
-// should then grab the text and replace pieces of text that shouldn't be used in output
-function formatCopyText(textContent, copybuttonPromptText, isRegexp = false, onlyCopyPromptLines = true, removePrompts = true, copyEmptyLines = true, lineContinuationChar = "", hereDocDelim = "") {
-    let regexp;
-    let match;
-
-    // Do we check for line continuation characters and "HERE-documents"?
-    const useLineCont = !!lineContinuationChar
-    const useHereDoc = !!hereDocDelim
-
-    // create regexp to capture prompt and remaining line
-    if (isRegexp) {
-        regexp = new RegExp('^(' + copybuttonPromptText + ')(.*)')
-    } else {
-        regexp = new RegExp('^(' + escapeRegExp(copybuttonPromptText) + ')(.*)')
+    function filterText(target, excludes) {
+        const clone = target.cloneNode(true) // clone as to not modify the live DOM
+        clone.querySelectorAll(excludes).forEach((node) => node.remove())
+        return clone.innerText
     }
 
-    const outputLines = [];
-    const promptFound = false;
-    const gotLineCont = false;
-    const gotHereDoc = false;
-    const lineGotPrompt = [];
-    for (const line of textContent.split('\n')) {
-        match = line.match(regexp)
-        if (match || gotLineCont || gotHereDoc) {
-            promptFound = regexp.test(line)
-            lineGotPrompt.push(promptFound)
-            if (removePrompts && promptFound) {
-                outputLines.push(match[2])
-            } else {
+    // Callback when a copy button is clicked. Will be passed the node that was clicked
+    // should then grab the text and replace pieces of text that shouldn't be used in output
+    function formatCopyText(
+        textContent,
+        copybuttonPromptText,
+        isRegexp = false,
+        onlyCopyPromptLines = true,
+        removePrompts = true,
+        copyEmptyLines = true,
+        lineContinuationChar = '',
+        hereDocDelim = ''
+    ) {
+        let regexp
+        let match
+
+        // Do we check for line continuation characters and "HERE-documents"?
+        const useLineCont = !!lineContinuationChar
+        const useHereDoc = !!hereDocDelim
+
+        // create regexp to capture prompt and remaining line
+        if (isRegexp) {
+            regexp = new RegExp('^(' + copybuttonPromptText + ')(.*)')
+        } else {
+            regexp = new RegExp(
+                '^(' + escapeRegExp(copybuttonPromptText) + ')(.*)'
+            )
+        }
+
+        const outputLines = []
+        let promptFound = false
+        let gotLineCont = false
+        let gotHereDoc = false
+        const lineGotPrompt = []
+        for (const line of textContent.split('\n')) {
+            match = line.match(regexp)
+            if (match || gotLineCont || gotHereDoc) {
+                promptFound = regexp.test(line)
+                lineGotPrompt.push(promptFound)
+                if (removePrompts && promptFound) {
+                    outputLines.push(match[2])
+                } else {
+                    outputLines.push(line)
+                }
+                gotLineCont = line.endsWith(lineContinuationChar) && useLineCont
+                if (line.includes(hereDocDelim) && useHereDoc)
+                    gotHereDoc = !gotHereDoc
+            } else if (!onlyCopyPromptLines) {
+                outputLines.push(line)
+            } else if (copyEmptyLines && line.trim() === '') {
                 outputLines.push(line)
             }
-            gotLineCont = line.endsWith(lineContinuationChar) & useLineCont
-            if (line.includes(hereDocDelim) & useHereDoc)
-                gotHereDoc = !gotHereDoc
-        } else if (!onlyCopyPromptLines) {
-            outputLines.push(line)
-        } else if (copyEmptyLines && line.trim() === '') {
-            outputLines.push(line)
         }
-    }
 
-    // If no lines with the prompt were found then just use original lines
-    if (lineGotPrompt.some(v => v === true)) {
-        textContent = outputLines.join('\n');
-    }
+        // If no lines with the prompt were found then just use original lines
+        if (lineGotPrompt.some((v) => v === true)) {
+            textContent = outputLines.join('\n')
+        }
 
-    // Remove a trailing newline to avoid auto-running when pasting
-    if (textContent.endsWith("\n")) {
-        textContent = textContent.slice(0, -1)
+        // Remove a trailing newline to avoid auto-running when pasting
+        if (textContent.endsWith('\n')) {
+            textContent = textContent.slice(0, -1)
+        }
+        return textContent
     }
-    return textContent
-}
-
 
-const copyTargetText = (trigger) => {
-  const target = document.querySelector(trigger.attributes['data-clipboard-target'].value);
-  // get filtered text
-  const excludes = ['.code-callout', '.linenos', '.language-apiheader'];
-  const text = Array.from(target.querySelectorAll('code'))
-    .map(code => filterText(code, excludes))
-    .join('\n');
-  return formatCopyText(text, '', false, true, true, true, '', '')
-}
+    const copyTargetText = (trigger) => {
+        const target = document.querySelector(
+            trigger.attributes['data-clipboard-target'].value
+        )
+        // get filtered text
+        const excludes = ['.code-callout', '.linenos', '.language-apiheader']
+        const text = Array.from(target.querySelectorAll('code'))
+            .map((code) => filterText(code, excludes))
+            .join('\n')
+        return formatCopyText(text, '', false, true, true, true, '', '')
+    }
 
-  // Initialize with a callback so we can modify the text before copy
-  const clipboard = new ClipboardJS('.copybtn', {text: copyTargetText})
+    // Initialize with a callback so we can modify the text before copy
+    const clipboard = new ClipboardJS('.copybtn', { text: copyTargetText })
 
-  // Update UI with error/success messages
-  clipboard.on('success', event => {
-    clearSelection()
-    temporarilyChangeTooltip(event.trigger, messages[locale]['copy'], messages[locale]['copy_success'])
-    temporarilyChangeIcon(event.trigger)
-  })
+    // Update UI with error/success messages
+    clipboard.on('success', (event) => {
+        clearSelection()
+        temporarilyChangeTooltip(
+            event.trigger,
+            messages[locale]['copy'],
+            messages[locale]['copy_success']
+        )
+        temporarilyChangeIcon(event.trigger)
+    })
 
-  clipboard.on('error', event => {
-    temporarilyChangeTooltip(event.trigger, messages[locale]['copy'], messages[locale]['copy_failure'])
-  })
+    clipboard.on('error', (event) => {
+        temporarilyChangeTooltip(
+            event.trigger,
+            messages[locale]['copy'],
+            messages[locale]['copy_failure']
+        )
+    })
 }
 
 export function initCopyButton() {
-	addCopyButtonToCodeCells();
+    addCopyButtonToCodeCells()
 }
diff --git a/src/Elastic.Markdown/Assets/fonts.css b/src/Elastic.Markdown/Assets/fonts.css
index 625b7ae43..93f01bd8b 100644
--- a/src/Elastic.Markdown/Assets/fonts.css
+++ b/src/Elastic.Markdown/Assets/fonts.css
@@ -1,26 +1,26 @@
 @font-face {
-	font-family: "Inter";
-	src: url("./fonts/InterVariable.woff2") format("woff2");
+	font-family: 'Inter';
+	src: url('./fonts/InterVariable.woff2') format('woff2');
 	font-display: swap;
 }
 
 @font-face {
-	font-family: "Mier B";
-	src: url("./fonts/MierB-Regular.woff2") format("woff2");
+	font-family: 'Mier B';
+	src: url('./fonts/MierB-Regular.woff2') format('woff2');
 	font-weight: normal;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: "Mier B";
-	src: url("./fonts/MierB-Bold.woff2") format("woff2");
+	font-family: 'Mier B';
+	src: url('./fonts/MierB-Bold.woff2') format('woff2');
 	font-weight: bold;
 	font-display: swap;
 }
 
 @font-face {
-	font-family: "Mier B";
-	src: url("./fonts/MierB-Demi.woff2") format("woff2");
+	font-family: 'Mier B';
+	src: url('./fonts/MierB-Demi.woff2') format('woff2');
 	font-weight: 600;
 	font-display: swap;
 }
diff --git a/src/Elastic.Markdown/Assets/hljs-merge-html-plugin.js b/src/Elastic.Markdown/Assets/hljs-merge-html-plugin.js
index 41da06199..592a9e6f9 100644
--- a/src/Elastic.Markdown/Assets/hljs-merge-html-plugin.js
+++ b/src/Elastic.Markdown/Assets/hljs-merge-html-plugin.js
@@ -1,7 +1,7 @@
 export const mergeHTMLPlugin = (function () {
-  'use strict';
+  'use strict'
 
-  var originalStream;
+  var originalStream
 
   /**
    * @param {string} value
@@ -13,7 +13,7 @@ export const mergeHTMLPlugin = (function () {
       .replace(/</g, '&lt;')
       .replace(/>/g, '&gt;')
       .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#x27;');
+      .replace(/'/g, '&#x27;')
   }
 
   /* plugin itself */
@@ -21,19 +21,19 @@ export const mergeHTMLPlugin = (function () {
   /** @type {HLJSPlugin} */
   const mergeHTMLPlugin = {
     // preserve the original HTML token stream
-    "before:highlightElement": ({ el }) => {
-      originalStream = nodeStream(el);
+    'before:highlightElement': ({ el }) => {
+      originalStream = nodeStream(el)
     },
     // merge it afterwards with the highlighted token stream
-    "after:highlightElement": ({ el, result, text }) => {
-      if (!originalStream.length) return;
+    'after:highlightElement': ({ el, result, text }) => {
+      if (!originalStream.length) return
 
-      const resultNode = document.createElement('div');
-      resultNode.innerHTML = result.value;
-      result.value = mergeStreams(originalStream, nodeStream(resultNode), text);
-      el.innerHTML = result.value;
-    }
-  };
+      const resultNode = document.createElement('div')
+      resultNode.innerHTML = result.value
+      result.value = mergeStreams(originalStream, nodeStream(resultNode), text)
+      el.innerHTML = result.value
+    },
+  }
 
   /* Stream merging support functions */
 
@@ -48,7 +48,7 @@ export const mergeHTMLPlugin = (function () {
    * @param {Node} node
    */
   function tag(node) {
-    return node.nodeName.toLowerCase();
+    return node.nodeName.toLowerCase()
   }
 
   /**
@@ -56,18 +56,18 @@ export const mergeHTMLPlugin = (function () {
    */
   function nodeStream(node) {
     /** @type Event[] */
-    const result = [];
-    (function _nodeStream(node, offset) {
+    const result = []
+    ;(function _nodeStream(node, offset) {
       for (let child = node.firstChild; child; child = child.nextSibling) {
         if (child.nodeType === 3) {
-          offset += child.nodeValue.length;
+          offset += child.nodeValue.length
         } else if (child.nodeType === 1) {
           result.push({
             event: 'start',
             offset: offset,
-            node: child
-          });
-          offset = _nodeStream(child, offset);
+            node: child,
+          })
+          offset = _nodeStream(child, offset)
           // Prevent void elements from having an end tag that would actually
           // double them in the output. There are more void elements in HTML
           // but we list only those realistically expected in code display.
@@ -75,14 +75,14 @@ export const mergeHTMLPlugin = (function () {
             result.push({
               event: 'stop',
               offset: offset,
-              node: child
-            });
+              node: child,
+            })
           }
         }
       }
-      return offset;
-    })(node, 0);
-    return result;
+      return offset
+    })(node, 0)
+    return result
   }
 
   /**
@@ -91,16 +91,18 @@ export const mergeHTMLPlugin = (function () {
    * @param {string} value - the original source itself
    */
   function mergeStreams(original, highlighted, value) {
-    let processed = 0;
-    let result = '';
-    const nodeStack = [];
+    let processed = 0
+    let result = ''
+    const nodeStack = []
 
     function selectStream() {
       if (!original.length || !highlighted.length) {
-        return original.length ? original : highlighted;
+        return original.length ? original : highlighted
       }
       if (original[0].offset !== highlighted[0].offset) {
-        return (original[0].offset < highlighted[0].offset) ? original : highlighted;
+        return original[0].offset < highlighted[0].offset
+          ? original
+          : highlighted
       }
 
       /*
@@ -118,7 +120,7 @@ export const mergeHTMLPlugin = (function () {
 
       ... which is collapsed to:
       */
-      return highlighted[0].event === 'start' ? original : highlighted;
+      return highlighted[0].event === 'start' ? original : highlighted
     }
 
     /**
@@ -127,29 +129,33 @@ export const mergeHTMLPlugin = (function () {
     function open(node) {
       /** @param {Attr} attr */
       function attributeString(attr) {
-        return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"';
+        return ' ' + attr.nodeName + '="' + escapeHTML(attr.value) + '"'
       }
-      result += '<' + tag(node) + [].map.call(node.attributes, attributeString).join('') + '>';
+      result +=
+        '<' +
+        tag(node) +
+        [].map.call(node.attributes, attributeString).join('') +
+        '>'
     }
 
     /**
      * @param {Node} node
      */
     function close(node) {
-      result += '</' + tag(node) + '>';
+      result += '</' + tag(node) + '>'
     }
 
     /**
      * @param {Event} event
      */
     function render(event) {
-      (event.event === 'start' ? open : close)(event.node);
+      ;(event.event === 'start' ? open : close)(event.node)
     }
 
     while (original.length || highlighted.length) {
-      let stream = selectStream();
-      result += escapeHTML(value.substring(processed, stream[0].offset));
-      processed = stream[0].offset;
+      let stream = selectStream()
+      result += escapeHTML(value.substring(processed, stream[0].offset))
+      processed = stream[0].offset
       if (stream === original) {
         /*
         On any opening or closing tag of the original markup we first close
@@ -157,23 +163,27 @@ export const mergeHTMLPlugin = (function () {
         with all the following original tags at the same offset and then
         reopen all the tags on the highlighted stack.
         */
-        nodeStack.reverse().forEach(close);
+        nodeStack.reverse().forEach(close)
         do {
-          render(stream.splice(0, 1)[0]);
-          stream = selectStream();
-        } while (stream === original && stream.length && stream[0].offset === processed);
-        nodeStack.reverse().forEach(open);
+          render(stream.splice(0, 1)[0])
+          stream = selectStream()
+        } while (
+          stream === original &&
+          stream.length &&
+          stream[0].offset === processed
+        )
+        nodeStack.reverse().forEach(open)
       } else {
         if (stream[0].event === 'start') {
-          nodeStack.push(stream[0].node);
+          nodeStack.push(stream[0].node)
         } else {
-          nodeStack.pop();
+          nodeStack.pop()
         }
-        render(stream.splice(0, 1)[0]);
+        render(stream.splice(0, 1)[0])
       }
     }
-    return result + escapeHTML(value.substr(processed));
+    return result + escapeHTML(value.substr(processed))
   }
 
-  return mergeHTMLPlugin;
-}());
+  return mergeHTMLPlugin
+})()
diff --git a/src/Elastic.Markdown/Assets/hljs.ts b/src/Elastic.Markdown/Assets/hljs.ts
index a72ba24e0..72c1aa1ad 100644
--- a/src/Elastic.Markdown/Assets/hljs.ts
+++ b/src/Elastic.Markdown/Assets/hljs.ts
@@ -1,236 +1,335 @@
-import {mergeHTMLPlugin} from "./hljs-merge-html-plugin";
-import {$$} from 'select-dom'
-
-import asciidoc from "highlight.js/lib/languages/asciidoc";
-import bash from "highlight.js/lib/languages/bash";
-import c from "highlight.js/lib/languages/c";
-import csharp from "highlight.js/lib/languages/csharp";
-import css from "highlight.js/lib/languages/css";
-import dockerfile from "highlight.js/lib/languages/dockerfile";
-import dos from "highlight.js/lib/languages/dos";
-import ebnf from "highlight.js/lib/languages/ebnf";
-import go from "highlight.js/lib/languages/go";
-import gradle from "highlight.js/lib/languages/gradle";
-import groovy from "highlight.js/lib/languages/groovy";
-import handlebars from "highlight.js/lib/languages/handlebars";
-import hljs from "highlight.js/lib/core";
-import http from "highlight.js/lib/languages/http";
-import ini from "highlight.js/lib/languages/ini";
-import java from "highlight.js/lib/languages/java";
-import javascript from "highlight.js/lib/languages/javascript";
-import json from "highlight.js/lib/languages/json";
-import kotlin from "highlight.js/lib/languages/kotlin";
-import markdown from "highlight.js/lib/languages/markdown";
-import nginx from "highlight.js/lib/languages/nginx";
-import php from "highlight.js/lib/languages/php";
-import plaintext from "highlight.js/lib/languages/plaintext";
-import powershell from "highlight.js/lib/languages/powershell";
-import properties from "highlight.js/lib/languages/properties";
-import python from "highlight.js/lib/languages/python";
-import ruby from "highlight.js/lib/languages/ruby";
-import scala from "highlight.js/lib/languages/scala";
-import shell from "highlight.js/lib/languages/shell";
-import sql from "highlight.js/lib/languages/sql";
-import swift from "highlight.js/lib/languages/swift";
-import typescript from "highlight.js/lib/languages/typescript";
-import xml from "highlight.js/lib/languages/xml";
-import yaml from "highlight.js/lib/languages/yaml";
-import { LanguageFn } from "highlight.js";
-
-const languages: Array<{ name: string, module: LanguageFn, aliases?: string[] }> = [
-	{ name: 'asciidoc', module: asciidoc },
-	{ name: 'bash', module: bash },
-	{ name: 'c', module: c  },
-	{ name: 'csharp', module: csharp },
-	{ name: 'css', module: css },
-	{ name: 'dockerfile', module: dockerfile },
-	{ name: 'dos', module: dos },
-	{ name: 'ebnf', module: ebnf },
-	{ name: 'go', module: go },
-	{ name: 'gradle', module: gradle },
-	{ name: 'groovy', module: groovy },
-	{ name: 'handlebars', module: handlebars },
-	{ name: 'http', module: http },
-	{ name: 'ini', module: ini },
-	{ name: 'java', module: java },
-	{ name: 'javascript', module: javascript },
-	{ name: 'json', module: json },
-	{ name: 'kotlin', module: kotlin},
-	{ name: 'markdown', module: markdown },
-	{ name: 'nginx', module: nginx },
-	{ name: 'php', module: php },
-	{ name: 'plaintext', module: plaintext },
-	{ name: 'powershell', module: powershell },
-	{ name: 'properties', module: properties },
-	{ name: 'python', module: python },
-	{ name: 'ruby', module: ruby },
-	{ name: 'scala', module: scala },
-	{ name: 'shell', module: shell, aliases: ['sh'] },
-	{ name: 'sql', module: sql },
-	{ name: 'swift', module: swift },
-	{ name: 'typescript', module: typescript },
-	{ name: 'xml', module: xml },
-	{ name: 'yaml', module: yaml },
-];
-
-languages.forEach(lang => {
-	hljs.registerLanguage(lang.name, lang.module);
-	if (lang.aliases) {
-		hljs.registerAliases(lang.aliases, { languageName: lang.name });
-	}
-});
-
-hljs.registerLanguage('apiheader', function() {
-	return {
-		case_insensitive: true, // language is case-insensitive
-		keywords: 'GET POST PUT DELETE HEAD OPTIONS PATCH',
-		contains: [
-			hljs.HASH_COMMENT_MODE,
-			{
-				className: "subst", // (pathname: path1/path2/dothis) color #ab5656
-				begin: /(?<=(?:\/|GET |POST |PUT |DELETE |HEAD |OPTIONS |PATH))[^?\n\r/]+/,
-			}
-		],		}
+import { mergeHTMLPlugin } from './hljs-merge-html-plugin'
+import { $$ } from 'select-dom'
+
+import asciidoc from 'highlight.js/lib/languages/asciidoc'
+import bash from 'highlight.js/lib/languages/bash'
+import c from 'highlight.js/lib/languages/c'
+import csharp from 'highlight.js/lib/languages/csharp'
+import css from 'highlight.js/lib/languages/css'
+import dockerfile from 'highlight.js/lib/languages/dockerfile'
+import dos from 'highlight.js/lib/languages/dos'
+import ebnf from 'highlight.js/lib/languages/ebnf'
+import go from 'highlight.js/lib/languages/go'
+import gradle from 'highlight.js/lib/languages/gradle'
+import groovy from 'highlight.js/lib/languages/groovy'
+import handlebars from 'highlight.js/lib/languages/handlebars'
+import hljs from 'highlight.js/lib/core'
+import http from 'highlight.js/lib/languages/http'
+import ini from 'highlight.js/lib/languages/ini'
+import java from 'highlight.js/lib/languages/java'
+import javascript from 'highlight.js/lib/languages/javascript'
+import json from 'highlight.js/lib/languages/json'
+import kotlin from 'highlight.js/lib/languages/kotlin'
+import markdown from 'highlight.js/lib/languages/markdown'
+import nginx from 'highlight.js/lib/languages/nginx'
+import php from 'highlight.js/lib/languages/php'
+import plaintext from 'highlight.js/lib/languages/plaintext'
+import powershell from 'highlight.js/lib/languages/powershell'
+import properties from 'highlight.js/lib/languages/properties'
+import python from 'highlight.js/lib/languages/python'
+import ruby from 'highlight.js/lib/languages/ruby'
+import scala from 'highlight.js/lib/languages/scala'
+import shell from 'highlight.js/lib/languages/shell'
+import sql from 'highlight.js/lib/languages/sql'
+import swift from 'highlight.js/lib/languages/swift'
+import typescript from 'highlight.js/lib/languages/typescript'
+import xml from 'highlight.js/lib/languages/xml'
+import yaml from 'highlight.js/lib/languages/yaml'
+import { LanguageFn } from 'highlight.js'
+
+const languages: Array<{
+    name: string
+    module: LanguageFn
+    aliases?: string[]
+}> = [
+    { name: 'asciidoc', module: asciidoc },
+    { name: 'bash', module: bash },
+    { name: 'c', module: c },
+    { name: 'csharp', module: csharp },
+    { name: 'css', module: css },
+    { name: 'dockerfile', module: dockerfile },
+    { name: 'dos', module: dos },
+    { name: 'ebnf', module: ebnf },
+    { name: 'go', module: go },
+    { name: 'gradle', module: gradle },
+    { name: 'groovy', module: groovy },
+    { name: 'handlebars', module: handlebars },
+    { name: 'http', module: http },
+    { name: 'ini', module: ini },
+    { name: 'java', module: java },
+    { name: 'javascript', module: javascript },
+    { name: 'json', module: json },
+    { name: 'kotlin', module: kotlin },
+    { name: 'markdown', module: markdown },
+    { name: 'nginx', module: nginx },
+    { name: 'php', module: php },
+    { name: 'plaintext', module: plaintext },
+    { name: 'powershell', module: powershell },
+    { name: 'properties', module: properties },
+    { name: 'python', module: python },
+    { name: 'ruby', module: ruby },
+    { name: 'scala', module: scala },
+    { name: 'shell', module: shell, aliases: ['sh'] },
+    { name: 'sql', module: sql },
+    { name: 'swift', module: swift },
+    { name: 'typescript', module: typescript },
+    { name: 'xml', module: xml },
+    { name: 'yaml', module: yaml },
+]
+
+languages.forEach((lang) => {
+    hljs.registerLanguage(lang.name, lang.module)
+    if (lang.aliases) {
+        hljs.registerAliases(lang.aliases, { languageName: lang.name })
+    }
+})
+
+hljs.registerLanguage('apiheader', function () {
+    return {
+        case_insensitive: true, // language is case-insensitive
+        keywords: 'GET POST PUT DELETE HEAD OPTIONS PATCH',
+        contains: [
+            hljs.HASH_COMMENT_MODE,
+            {
+                className: 'subst', // (pathname: path1/path2/dothis) color #ab5656
+                begin: /(?<=(?:\/|GET |POST |PUT |DELETE |HEAD |OPTIONS |PATH))[^?\n\r/]+/,
+            },
+        ],
+    }
 })
 
-const decimalDigits = '[0-9](_?[0-9])*';
-const frac = `\\.(${decimalDigits})`;
-const decimalInteger = `0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*`;
+const decimalDigits = '[0-9](_?[0-9])*'
+const frac = `\\.(${decimalDigits})`
+const decimalInteger = `0|[1-9](_?[0-9])*|0[0-7]*[89][0-9]*`
 const NUMBER = {
-	className: 'number',
-	variants: [
-		{ begin: `\\b(${decimalInteger})\\b((${frac})\\b|\\.)?|(${frac})\\b` },
-		{ begin: `\\b(0|[1-9](_?[0-9])*)n\\b` },
-		{ begin: "\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b" },
-		{ begin: "\\b0[bB][0-1](_?[0-1])*n?\\b" },
-		{ begin: "\\b0[oO][0-7](_?[0-7])*n?\\b" },
-		{ begin: "\\b0[0-7]+n?\\b" },
-	],
-	relevance: 0
-};
-
-hljs.registerLanguage('eql', function() {
-	return {
-		case_insensitive: true, // language is case-insensitive
-		keywords: {
-			keyword: 'where sequence sample untill and or not in in~',
-			literal: ['false','true','null'],
-			'subst': 'add between cidrMatch concat divide endsWith indexOf length modulo multiply number startsWith string stringContains substring subtract'
-		},
-		contains: [
-			hljs.QUOTE_STRING_MODE,
-			hljs.C_LINE_COMMENT_MODE,
-			{
-				scope: "operator", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:<|<=|==|:|!=|>=|>|like~?|regex~?)/,
-			},
-			{
-				scope: "punctuation", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:!?\[|\]|\|)/,
-			},
-			NUMBER,
-		]
-	}
+    className: 'number',
+    variants: [
+        { begin: `\\b(${decimalInteger})\\b((${frac})\\b|\\.)?|(${frac})\\b` },
+        { begin: `\\b(0|[1-9](_?[0-9])*)n\\b` },
+        { begin: '\\b0[xX][0-9a-fA-F](_?[0-9a-fA-F])*n?\\b' },
+        { begin: '\\b0[bB][0-1](_?[0-1])*n?\\b' },
+        { begin: '\\b0[oO][0-7](_?[0-7])*n?\\b' },
+        { begin: '\\b0[0-7]+n?\\b' },
+    ],
+    relevance: 0,
+}
+
+hljs.registerLanguage('eql', function () {
+    return {
+        case_insensitive: true, // language is case-insensitive
+        keywords: {
+            keyword: 'where sequence sample untill and or not in in~',
+            literal: ['false', 'true', 'null'],
+            subst: 'add between cidrMatch concat divide endsWith indexOf length modulo multiply number startsWith string stringContains substring subtract',
+        },
+        contains: [
+            hljs.QUOTE_STRING_MODE,
+            hljs.C_LINE_COMMENT_MODE,
+            {
+                scope: 'operator', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:<|<=|==|:|!=|>=|>|like~?|regex~?)/,
+            },
+            {
+                scope: 'punctuation', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:!?\[|\]|\|)/,
+            },
+            NUMBER,
+        ],
+    }
 })
 
-hljs.registerLanguage('painless', function() {
-	return {
-		case_insensitive: true, // language is case-insensitive
-		keywords: {
-			keyword: 'where sequence sample untill and or not in in~',
-			literal: ['false','true','null'],
-			'subst': 'add between cidrMatch concat divide endsWith indexOf length modulo multiply number startsWith string stringContains substring subtract'
-		},
-		contains: [
-			hljs.QUOTE_STRING_MODE,
-			hljs.C_LINE_COMMENT_MODE,
-			{
-				scope: "operator", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:<|<=|==|:|!=|>=|>|like~?|regex~?)/,
-			},
-			{
-				scope: "punctuation", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:!?\[|\]|\|)/,
-			},
-			NUMBER,
-		]
-	}
+hljs.registerLanguage('painless', function () {
+    return {
+        case_insensitive: true, // language is case-insensitive
+        keywords: {
+            keyword: 'where sequence sample untill and or not in in~',
+            literal: ['false', 'true', 'null'],
+            subst: 'add between cidrMatch concat divide endsWith indexOf length modulo multiply number startsWith string stringContains substring subtract',
+        },
+        contains: [
+            hljs.QUOTE_STRING_MODE,
+            hljs.C_LINE_COMMENT_MODE,
+            {
+                scope: 'operator', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:<|<=|==|:|!=|>=|>|like~?|regex~?)/,
+            },
+            {
+                scope: 'punctuation', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:!?\[|\]|\|)/,
+            },
+            NUMBER,
+        ],
+    }
 })
 
+hljs.registerLanguage('esql', function () {
+    return {
+        case_insensitive: true, // language is case-insensitive
+        keywords: {
+            keyword:
+                'FROM ROW SHOW DISSECT DROP ENRICH EVAL GROK KEEP LIMIT RENAME SORT STATS WHERE METADATA',
+            literal: ['false', 'true', 'null'],
+            function: [
+                // aggregate
+                'AVG',
+                'COUNT',
+                'COUNT_DISTINCT',
+                'MAX',
+                'MEDIAN',
+                'MEDIAN_ABSOLUTE_DEVIATION',
+                'MIN',
+                'PERCENTILE',
+                'SUM',
+                'TOP',
+                'VALUES',
+                'WEIGHTED_AVG',
+                'BUCKET',
 
-hljs.registerLanguage('esql', function() {
-	return {
-		case_insensitive: true, // language is case-insensitive
-		keywords: {
-			keyword: 'FROM ROW SHOW DISSECT DROP ENRICH EVAL GROK KEEP LIMIT RENAME SORT STATS WHERE METADATA',
-			literal: ['false','true','null'],
-			function: [
-				// aggregate
-				"AVG", "COUNT", "COUNT_DISTINCT", "MAX", "MEDIAN", "MEDIAN_ABSOLUTE_DEVIATION", "MIN",
-				"PERCENTILE", "SUM", "TOP", "VALUES", "WEIGHTED_AVG", "BUCKET",
-
-				// conditional
-				"CASE", "COALESCE", "GREATEST", "LEAST",
-
-				//Date
-				"DATE_DIFF", "DATE_EXTRACT", "DATE_FORMAT", "DATE_PARSE", "DATE_TRUNC", "NOW",
-
-				//ip
-				"CIDR_MATCH", "IP_PREFIX",
-
-				//math
-				"ABS", "ACOS", "ASIN", "ATAN", "ATAN2", "CBRT", "CEIL", "COS", "COSH", "E", "EXP", "FLOOR",
-				"HYPOT", "LOG", "LOG10", "PI", "POW", "ROUND", "SIGNUM", "SIN", "SINH", "SQRT", "TAN",
-				"TANH", "TAU",
-
-				//search
-				"MATCH", "QSTR",
-
-				//spatial
-				"ST_DISTANCE", "ST_INTERSECTS", "ST_DISJOINT", "ST_CONTAINS", "ST_WITHIN", "ST_X", "ST_Y",
-
-				//string
-
-				"BIT_LENGTH", "BYTE_LENGTH", "CONCAT", "ENDS_WITH", "FROM_BASE64", "LEFT", "LENGTH", "LOCATE",
-				"LTRIM", "REPEAT", "REPLACE", "REVERSE", "RIGHT", "RTRIM", "SPACE", "SPLIT", "STARTS_WITH",
-				"SUBSTRING", "TO_BASE64", "TO_LOWER", "TO_UPPER", "TRIM",
-
-				//type conversion
-				"TO_BOOLEAN", "TO_CARTESIANPOINT", "TO_CARTESIANSHAPE", "TO_DATETIME", "TO_DEGREES",
-				"TO_DOUBLE", "TO_GEOPOINT", "TO_GEOSHAPE", "TO_INTEGER", "TO_IP", "TO_LONG", "TO_RADIANS",
-				"TO_STRING", "TO_VERSION",
-
-				//multivalued
-				"MV_APPEND", "MV_AVG", "MV_CONCAT", "MV_COUNT", "MV_DEDUPE", "MV_FIRST", "MV_LAST", "MV_MAX",
-				"MV_MEDIAN", "MV_MEDIAN_ABSOLUTE_DEVIATION", "MV_MIN", "MV_PERCENTILE", "MV_PSERIES_WEIGHTED_SUM",
-				"MV_SORT", "MV_SLICE", "MV_SUM", "MV_ZIP",
-
-				"KQL"
-			]
-		},
-		contains: [
-			hljs.QUOTE_STRING_MODE,
-			hljs.C_LINE_COMMENT_MODE,
-			{
-				scope: "operator", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:<|<=|==|::|\w+:|!=|>=|>|LIKE|RLIKE|IS NULL|IS NOT NULL)/,
-			},
-			{
-				scope: "punctuation", // (pathname: path1/path2/dothis) color #ab5656
-				match: /(?:!?\[|\]|\|)/,
-			},
-			NUMBER,
-		]
-	}
-})
+                // conditional
+                'CASE',
+                'COALESCE',
+                'GREATEST',
+                'LEAST',
+
+                //Date
+                'DATE_DIFF',
+                'DATE_EXTRACT',
+                'DATE_FORMAT',
+                'DATE_PARSE',
+                'DATE_TRUNC',
+                'NOW',
 
+                //ip
+                'CIDR_MATCH',
+                'IP_PREFIX',
+
+                //math
+                'ABS',
+                'ACOS',
+                'ASIN',
+                'ATAN',
+                'ATAN2',
+                'CBRT',
+                'CEIL',
+                'COS',
+                'COSH',
+                'E',
+                'EXP',
+                'FLOOR',
+                'HYPOT',
+                'LOG',
+                'LOG10',
+                'PI',
+                'POW',
+                'ROUND',
+                'SIGNUM',
+                'SIN',
+                'SINH',
+                'SQRT',
+                'TAN',
+                'TANH',
+                'TAU',
+
+                //search
+                'MATCH',
+                'QSTR',
+
+                //spatial
+                'ST_DISTANCE',
+                'ST_INTERSECTS',
+                'ST_DISJOINT',
+                'ST_CONTAINS',
+                'ST_WITHIN',
+                'ST_X',
+                'ST_Y',
+
+                //string
+
+                'BIT_LENGTH',
+                'BYTE_LENGTH',
+                'CONCAT',
+                'ENDS_WITH',
+                'FROM_BASE64',
+                'LEFT',
+                'LENGTH',
+                'LOCATE',
+                'LTRIM',
+                'REPEAT',
+                'REPLACE',
+                'REVERSE',
+                'RIGHT',
+                'RTRIM',
+                'SPACE',
+                'SPLIT',
+                'STARTS_WITH',
+                'SUBSTRING',
+                'TO_BASE64',
+                'TO_LOWER',
+                'TO_UPPER',
+                'TRIM',
+
+                //type conversion
+                'TO_BOOLEAN',
+                'TO_CARTESIANPOINT',
+                'TO_CARTESIANSHAPE',
+                'TO_DATETIME',
+                'TO_DEGREES',
+                'TO_DOUBLE',
+                'TO_GEOPOINT',
+                'TO_GEOSHAPE',
+                'TO_INTEGER',
+                'TO_IP',
+                'TO_LONG',
+                'TO_RADIANS',
+                'TO_STRING',
+                'TO_VERSION',
+
+                //multivalued
+                'MV_APPEND',
+                'MV_AVG',
+                'MV_CONCAT',
+                'MV_COUNT',
+                'MV_DEDUPE',
+                'MV_FIRST',
+                'MV_LAST',
+                'MV_MAX',
+                'MV_MEDIAN',
+                'MV_MEDIAN_ABSOLUTE_DEVIATION',
+                'MV_MIN',
+                'MV_PERCENTILE',
+                'MV_PSERIES_WEIGHTED_SUM',
+                'MV_SORT',
+                'MV_SLICE',
+                'MV_SUM',
+                'MV_ZIP',
+
+                'KQL',
+            ],
+        },
+        contains: [
+            hljs.QUOTE_STRING_MODE,
+            hljs.C_LINE_COMMENT_MODE,
+            {
+                scope: 'operator', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:<|<=|==|::|\w+:|!=|>=|>|LIKE|RLIKE|IS NULL|IS NOT NULL)/,
+            },
+            {
+                scope: 'punctuation', // (pathname: path1/path2/dothis) color #ab5656
+                match: /(?:!?\[|\]|\|)/,
+            },
+            NUMBER,
+        ],
+    }
+})
 
-hljs.addPlugin(mergeHTMLPlugin);
+hljs.addPlugin(mergeHTMLPlugin)
 
 // The unescaped HTML warning is caused by the mergeHTMLPlugin which we are using
 // for code callouts
-hljs.configure({ ignoreUnescapedHTML: true });
+hljs.configure({ ignoreUnescapedHTML: true })
 
 export function initHighlight() {
-	$$('#markdown-content pre code:not([data-highlighted])').forEach(hljs.highlightElement);
+    $$('#markdown-content pre code:not([data-highlighted])').forEach(
+        hljs.highlightElement
+    )
 }
diff --git a/src/Elastic.Markdown/Assets/main.ts b/src/Elastic.Markdown/Assets/main.ts
index b5c8a7fd8..81defa7a3 100644
--- a/src/Elastic.Markdown/Assets/main.ts
+++ b/src/Elastic.Markdown/Assets/main.ts
@@ -1,74 +1,84 @@
-import "htmx.org"
-import "htmx-ext-preload"
-import "htmx-ext-head-support"
+import 'htmx.org'
+import 'htmx-ext-preload'
+import 'htmx-ext-head-support'
 
-import {initTocNav} from "./toc-nav";
-import {initHighlight} from "./hljs";
-import {initTabs} from "./tabs";
-import {initCopyButton} from "./copybutton";
-import {initNav} from "./pages-nav";
-import {openDetailsWithAnchor} from "./open-details-with-anchor";
-import {$, $$} from "select-dom"
+import { initTocNav } from './toc-nav'
+import { initHighlight } from './hljs'
+import { initTabs } from './tabs'
+import { initCopyButton } from './copybutton'
+import { initNav } from './pages-nav'
+import { openDetailsWithAnchor } from './open-details-with-anchor'
+import { $, $$ } from 'select-dom'
 
-import { UAParser } from 'ua-parser-js';
-const { getOS } = new UAParser();
-
-document.addEventListener('htmx:load', function() {
-	initTocNav();
-	initHighlight();
-	initCopyButton();
-	initTabs();
-	initNav()
-	openDetailsWithAnchor();
-});
+import { UAParser } from 'ua-parser-js'
+const { getOS } = new UAParser()
 
+document.addEventListener('htmx:load', function () {
+    initTocNav()
+    initHighlight()
+    initCopyButton()
+    initTabs()
+    initNav()
+    openDetailsWithAnchor()
+})
 
 // Don't remove style tags because they are used by the elastic global nav.
-document.addEventListener('htmx:removingHeadElement', function(event) {
-	const tagName = event.detail.headElement.tagName;
-	if (tagName === 'STYLE') {
-		event.preventDefault();
-	}
-});
+document.addEventListener('htmx:removingHeadElement', function (event) {
+    const tagName = event.detail.headElement.tagName
+    if (tagName === 'STYLE') {
+        event.preventDefault()
+    }
+})
 
-document.addEventListener('htmx:beforeRequest', function(event) {
-	if (event.detail.requestConfig.verb === 'get' && event.detail.requestConfig.triggeringEvent) {
-		const { ctrlKey, metaKey, shiftKey }: PointerEvent = event.detail.requestConfig.triggeringEvent;
-		const { name: os } = getOS();
-		const modifierKey: boolean = os === 'macOS' ? metaKey : ctrlKey;
-		if (shiftKey || modifierKey) {
-			event.preventDefault();
-			window.open(event.detail.requestConfig.path, '_blank', 'noopener,noreferrer');
-		}
-	}
-});
+document.addEventListener('htmx:beforeRequest', function (event) {
+    if (
+        event.detail.requestConfig.verb === 'get' &&
+        event.detail.requestConfig.triggeringEvent
+    ) {
+        const { ctrlKey, metaKey, shiftKey }: PointerEvent =
+            event.detail.requestConfig.triggeringEvent
+        const { name: os } = getOS()
+        const modifierKey: boolean = os === 'macOS' ? metaKey : ctrlKey
+        if (shiftKey || modifierKey) {
+            event.preventDefault()
+            window.open(
+                event.detail.requestConfig.path,
+                '_blank',
+                'noopener,noreferrer'
+            )
+        }
+    }
+})
 
-document.body.addEventListener('htmx:oobBeforeSwap', function(event) {
-	// This is needed to scroll to the top of the page when the content is swapped
-	if (event.target.id === 'markdown-content' || event.target.id === 'content-container') {
-		window.scrollTo(0, 0);
-	}
-});
+document.body.addEventListener('htmx:oobBeforeSwap', function (event) {
+    // This is needed to scroll to the top of the page when the content is swapped
+    if (
+        event.target.id === 'markdown-content' ||
+        event.target.id === 'content-container'
+    ) {
+        window.scrollTo(0, 0)
+    }
+})
 
-document.body.addEventListener('htmx:pushedIntoHistory', function(event) {
-	const pagesNav = $('#pages-nav');
-	const currentNavItem = $$('.current', pagesNav);
-	currentNavItem.forEach(el => {
-		el.classList.remove('current');
-	})
-	const navItems = $$('a[href="' + event.detail.path + '"]', pagesNav);
-	navItems.forEach(navItem => {
-		navItem.classList.add('current');
-	});
-});
+document.body.addEventListener('htmx:pushedIntoHistory', function (event) {
+    const pagesNav = $('#pages-nav')
+    const currentNavItem = $$('.current', pagesNav)
+    currentNavItem.forEach((el) => {
+        el.classList.remove('current')
+    })
+    const navItems = $$('a[href="' + event.detail.path + '"]', pagesNav)
+    navItems.forEach((navItem) => {
+        navItem.classList.add('current')
+    })
+})
 
-document.body.addEventListener('htmx:responseError', function(event) {
-	// If you get a 404 error while clicking on a hx-get link, actually open the link
-	// This is needed because the browser doesn't update the URL when the response is a 404
-	// In production, cloudfront handles serving the 404 page.
-	// Locally, the DocumentationWebHost handles it.
-	// On previews, a generic 404 page is shown.
-	if (event.detail.xhr.status === 404) {
-		window.location.assign(event.detail.pathInfo.requestPath);
-	}
-});
+document.body.addEventListener('htmx:responseError', function (event) {
+    // If you get a 404 error while clicking on a hx-get link, actually open the link
+    // This is needed because the browser doesn't update the URL when the response is a 404
+    // In production, cloudfront handles serving the 404 page.
+    // Locally, the DocumentationWebHost handles it.
+    // On previews, a generic 404 page is shown.
+    if (event.detail.xhr.status === 404) {
+        window.location.assign(event.detail.pathInfo.requestPath)
+    }
+})
diff --git a/src/Elastic.Markdown/Assets/markdown/admonition.css b/src/Elastic.Markdown/Assets/markdown/admonition.css
index 1a9bc5697..4e076bc6e 100644
--- a/src/Elastic.Markdown/Assets/markdown/admonition.css
+++ b/src/Elastic.Markdown/Assets/markdown/admonition.css
@@ -1,28 +1,28 @@
 @layer components {
 	.admonition {
-		@apply mt-4 pb-4 rounded-sm border-1;
-		
+		@apply mt-4 rounded-sm border-1 pb-4;
+
 		.admonition-title {
-			@apply px-4 py-2 font-bold flex items-center gap-2 rounded-t-sm;
+			@apply flex items-center gap-2 rounded-t-sm px-4 py-2 font-bold;
 			svg {
 				@apply size-6;
 			}
 		}
 		.admonition-content {
 			@apply px-4;
-			
+
 			& > *:first-child {
 				@apply mt-3!;
 			}
 		}
-		
+
 		&.note {
 			@apply border-blue-elastic-40 bg-blue-elastic-10;
 			.admonition-title {
 				@apply text-blue-elastic-90 bg-blue-elastic-20;
 			}
 		}
-		
+
 		&.tip {
 			@apply border-teal-40 bg-teal-10;
 			.admonition-title {
@@ -32,20 +32,20 @@
 
 		&.warning {
 			@apply border-yellow-40 bg-yellow-10;
-			
+
 			.admonition-title {
 				@apply text-yellow-90 bg-yellow-20;
 			}
 		}
-		
+
 		&.important {
 			@apply border-purple-40 bg-purple-10;
-			
+
 			.admonition-title {
 				@apply text-purple-90 bg-purple-20;
 			}
 		}
-		
+
 		&.plain {
 			@apply border-grey-40 bg-grey-10;
 
diff --git a/src/Elastic.Markdown/Assets/markdown/code.css b/src/Elastic.Markdown/Assets/markdown/code.css
index 24f407c53..b93fe66f8 100644
--- a/src/Elastic.Markdown/Assets/markdown/code.css
+++ b/src/Elastic.Markdown/Assets/markdown/code.css
@@ -2,17 +2,11 @@
 	.highlight {
 		@apply mt-4;
 	}
-	
+
 	pre {
 		@apply grid;
 		code {
-			@apply text-sm
-				text-grey-30
-				rounded-none 
-				border-0 
-				overflow-x-auto
-				p-6!
-			;
+			@apply text-grey-30 overflow-x-auto rounded-none border-0 p-6! text-sm;
 			background-color: #22272e;
 			mix-blend-mode: unset;
 		}
@@ -23,23 +17,23 @@
 			@apply rounded-b-sm;
 		}
 		code.language-apiheader {
-			@apply border-b-1 border-b-grey-80;
+			@apply border-b-grey-80 border-b-1;
 		}
 	}
-	
+
 	pre code .code-callout {
 		@apply ml-1;
 		transform: translateY(-1px);
 		user-select: none;
 	}
-	
+
 	ol.code-callouts {
 		li {
 			@apply relative pl-1;
 			counter-increment: code-callout-counter;
 			list-style-type: none;
 		}
-		
+
 		li::before {
 			content: counter(code-callout-counter);
 			position: absolute;
@@ -47,32 +41,18 @@
 			left: calc(-1 * var(--spacing) * 6);
 		}
 	}
-	
+
 	pre code .code-callout .hljs-number {
 		@apply text-white!;
 	}
 
 	pre code .code-callout,
 	ol.code-callouts li::before {
-		@apply text-xs!
-			text-white!
-			font-mono
-			bg-blue-elastic
-			rounded-full
-			size-5
-			inline-flex
-			justify-center
-			items-center
-		;
+		@apply bg-blue-elastic inline-flex size-5 items-center justify-center rounded-full font-mono text-xs! text-white!;
 	}
 
 	code {
-		@apply font-mono
-		bg-grey-10
-		rounded-xs
-		border-1
-		border-grey-20
-		;
+		@apply bg-grey-10 border-grey-20 rounded-xs border-1 font-mono;
 		font-size: 0.875em;
 		line-height: 1.4em;
 		padding-left: 0.2em;
@@ -83,40 +63,39 @@
 		mix-blend-mode: multiply;
 	}
 
-
 	.hljs-built_in,
 	.hljs-selector-tag,
 	.hljs-section,
 	.hljs-link {
-		color: var(--color-blue-elastic-70)
+		color: var(--color-blue-elastic-70);
 	}
 
 	.hljs-keyword {
-		color: var(--color-blue-elastic-70)
+		color: var(--color-blue-elastic-70);
 	}
 
 	.hljs {
-		color: var(--color-blue-elastic-30)  !important;
+		color: var(--color-blue-elastic-30) !important;
 	}
 	.hljs-subst {
-		color: var(--color-purple-60)
+		color: var(--color-purple-60);
 	}
 	.hljs-function {
-		color: var(--color-purple-60)
+		color: var(--color-purple-60);
 	}
 
 	.hljs-title,
 	.hljs-title.function,
 	.hljs-attr,
 	.hljs-meta-keyword {
-		color: var(--color-yellow-50)
+		color: var(--color-yellow-50);
 	}
 
 	.hljs-string {
-		color: var(--color-green-50)
+		color: var(--color-green-50);
 	}
 	.hljs-operator {
-		color: var(--color-yellow-50)
+		color: var(--color-yellow-50);
 	}
 
 	.hljs-meta,
@@ -125,21 +104,21 @@
 	.hljs-addition,
 	.hljs-template-tag,
 	.hljs-template-variable {
-		color: var(--color-yellow-50)
+		color: var(--color-yellow-50);
 	}
 
 	.hljs-type,
 	.hljs-symbol {
-		color: var(--color-teal-50)
+		color: var(--color-teal-50);
 	}
 	.hljs-variable {
-		color: var(--color-purple-50)
+		color: var(--color-purple-50);
 	}
 
 	.hljs-comment,
 	.hljs-quote,
 	.hljs-deletion {
-		color: var(--color-grey-70)
+		color: var(--color-grey-70);
 	}
 
 	.hljs-punctuation {
@@ -160,10 +139,10 @@
 	}
 
 	.hljs-literal {
-		color: var(--color-pink-50)
+		color: var(--color-pink-50);
 	}
 	.hljs-number {
-		color: var(--color-red-50)
+		color: var(--color-red-50);
 	}
 
 	.hljs-emphasis {
diff --git a/src/Elastic.Markdown/Assets/markdown/definition-list.css b/src/Elastic.Markdown/Assets/markdown/definition-list.css
index 10e115b35..9835c246f 100644
--- a/src/Elastic.Markdown/Assets/markdown/definition-list.css
+++ b/src/Elastic.Markdown/Assets/markdown/definition-list.css
@@ -4,7 +4,7 @@
 			@apply mt-4;
 		}
 		dt {
-			@apply text-black mt-6;
+			@apply mt-6 text-black;
 		}
 		dd {
 			@apply text-ink-light mt-2 ml-4;
diff --git a/src/Elastic.Markdown/Assets/markdown/dropdown.css b/src/Elastic.Markdown/Assets/markdown/dropdown.css
index 3de069dd6..e831b9abb 100644
--- a/src/Elastic.Markdown/Assets/markdown/dropdown.css
+++ b/src/Elastic.Markdown/Assets/markdown/dropdown.css
@@ -1,32 +1,22 @@
 @layer components {
 	.markdown-content {
-
 		details > summary::-webkit-details-marker {
 			display: none;
 		}
-		
+
 		details.dropdown {
-			@apply mt-4 block border-1 border-grey-20 rounded-sm shadow-xs;
+			@apply border-grey-20 mt-4 block rounded-sm border-1 shadow-xs;
 			summary.dropdown-title {
-				@apply flex 
-				justify-between
-				items-center
-				px-4
-				py-2
-				cursor-pointer
-				font-sans
-				font-bold
-				text-ink-dark
-				;
+				@apply text-ink-dark flex cursor-pointer items-center justify-between px-4 py-2 font-sans font-bold;
 			}
-			
+
 			&[open] .dropdown-title {
-				@apply border-b-1 border-b-grey-20;
+				@apply border-b-grey-20 border-b-1;
 				svg {
 					transform: rotate(90deg);
 				}
 			}
-			
+
 			.dropdown-content {
 				@apply px-4 pb-4;
 			}
diff --git a/src/Elastic.Markdown/Assets/markdown/images.css b/src/Elastic.Markdown/Assets/markdown/images.css
index 274622844..d9c82464d 100644
--- a/src/Elastic.Markdown/Assets/markdown/images.css
+++ b/src/Elastic.Markdown/Assets/markdown/images.css
@@ -1,8 +1,8 @@
 @layer components {
 	.markdown-content {
 		a.image-reference {
-			@apply block mt-4 align-middle;
-			&>img {
+			@apply mt-4 block align-middle;
+			& > img {
 				@apply block;
 			}
 		}
@@ -14,8 +14,8 @@
 			display: initial;
 			vertical-align: initial;
 		}
-        .screenshot {
-            @apply border-1 border-grey-20 p-4 bg-grey-10 shadow-md;
-        }
+		.screenshot {
+			@apply border-grey-20 bg-grey-10 border-1 p-4 shadow-md;
+		}
 	}
 }
diff --git a/src/Elastic.Markdown/Assets/markdown/list.css b/src/Elastic.Markdown/Assets/markdown/list.css
index cb094e485..18a942da9 100644
--- a/src/Elastic.Markdown/Assets/markdown/list.css
+++ b/src/Elastic.Markdown/Assets/markdown/list.css
@@ -1,5 +1,6 @@
 .markdown-content {
-	ol,ul {
+	ol,
+	ul {
 		line-height: 1.5em;
 		letter-spacing: 0;
 		margin-left: 1.5em;
@@ -7,22 +8,46 @@
 			@apply text-grey-80;
 		}
 	}
-	
+
 	li {
 		@apply mt-4;
 	}
-	
-	ul {list-style-type: disc; }
-	ul>li>ul { list-style-type: square; }
-	ul>li>ul>li>ul { list-style-type: circle; }
-	ul>li>ul>li>ul>li>ul { list-style-type: disc; }
-	ul>li>ul>li>ul>li>ul>li>ul { list-style-type: square; }
-	ul>li>ul>li>ul>li>ul>li>ul>li>ul { list-style-type: circle; }
-	
-	ol { list-style-type: decimal; }
-	ol>li>ol { list-style-type: lower-alpha; }
-	ol>li>ol>li>ol { list-style-type: lower-roman; }
-	ol>li>ol>li>ol>li>ol { list-style-type: decimal; }
-	ol>li>ol>li>ol>li>ol>li>ol { list-style-type: lower-alpha; }
-	ol>li>ol>li>ol>li>ol>li>ol>li>ol { list-style-type: lower-roman; }
+
+	ul {
+		list-style-type: disc;
+	}
+	ul > li > ul {
+		list-style-type: square;
+	}
+	ul > li > ul > li > ul {
+		list-style-type: circle;
+	}
+	ul > li > ul > li > ul > li > ul {
+		list-style-type: disc;
+	}
+	ul > li > ul > li > ul > li > ul > li > ul {
+		list-style-type: square;
+	}
+	ul > li > ul > li > ul > li > ul > li > ul > li > ul {
+		list-style-type: circle;
+	}
+
+	ol {
+		list-style-type: decimal;
+	}
+	ol > li > ol {
+		list-style-type: lower-alpha;
+	}
+	ol > li > ol > li > ol {
+		list-style-type: lower-roman;
+	}
+	ol > li > ol > li > ol > li > ol {
+		list-style-type: decimal;
+	}
+	ol > li > ol > li > ol > li > ol > li > ol {
+		list-style-type: lower-alpha;
+	}
+	ol > li > ol > li > ol > li > ol > li > ol > li > ol {
+		list-style-type: lower-roman;
+	}
 }
diff --git a/src/Elastic.Markdown/Assets/markdown/table.css b/src/Elastic.Markdown/Assets/markdown/table.css
index 92f772f2b..1564b225d 100644
--- a/src/Elastic.Markdown/Assets/markdown/table.css
+++ b/src/Elastic.Markdown/Assets/markdown/table.css
@@ -1,14 +1,11 @@
-
 @layer components {
-
 	.table-wrapper {
-
-		@apply w-full overflow-x-auto my-4;
+		@apply my-4 w-full overflow-x-auto;
 
 		&::-webkit-scrollbar {
-			@apply h-2 bg-grey-10 border-b-1 border-grey-20;
+			@apply bg-grey-10 border-grey-20 h-2 border-b-1;
 		}
-		
+
 		&::-webkit-scrollbar-thumb {
 			@apply bg-grey-80 rounded-full;
 		}
@@ -16,26 +13,27 @@
 		&::-webkit-scrollbar-thumb:hover {
 			@apply bg-grey-100;
 		}
-		
+
 		table {
-			@apply w-full border-collapse border-1 border-grey-20;
+			@apply border-grey-20 w-full border-collapse border-1;
 		}
-		
-		th, td {
-			@apply py-2 px-4 min-w-30 not-first:border-l-1 border-grey-20;
+
+		th,
+		td {
+			@apply border-grey-20 min-w-30 px-4 py-2 not-first:border-l-1;
 		}
-		
+
 		thead {
-			@apply font-sans font-semibold text-left align-top border-b-1 border-grey-20 bg-grey-10;
+			@apply border-grey-20 bg-grey-10 border-b-1 text-left align-top font-sans font-semibold;
 			:empty {
 				display: none;
 			}
 		}
-		
+
 		tbody {
 			@apply align-top;
 			tr {
-				@apply not-last:border-b-1 border-grey-20 hover:bg-grey-10;
+				@apply border-grey-20 hover:bg-grey-10 not-last:border-b-1;
 			}
 		}
 	}
diff --git a/src/Elastic.Markdown/Assets/markdown/tabs.css b/src/Elastic.Markdown/Assets/markdown/tabs.css
index 6bc7a473e..b3be6752d 100644
--- a/src/Elastic.Markdown/Assets/markdown/tabs.css
+++ b/src/Elastic.Markdown/Assets/markdown/tabs.css
@@ -1,37 +1,38 @@
 @layer components {
 	.tabs {
-		@apply flex flex-wrap relative overflow-hidden mt-4;
-		
+		@apply relative mt-4 flex flex-wrap overflow-hidden;
+
 		.tabs-label {
-			@apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center border-1 border-grey-20 -mb-[1px];
+			@apply text-ink-light border-grey-20 z-20 -mb-[1px] flex cursor-pointer items-center border-1 px-6 py-2;
 			&:not(:nth-of-type(1)) {
 				margin-left: -1px;
 			}
-			
+
 			&:hover {
-				@apply border-b-1 border-b-black text-black bg-grey-10;
+				@apply bg-grey-10 border-b-1 border-b-black text-black;
 			}
 		}
-		
+
 		.tabs-input {
-			@apply opacity-0 absolute;
+			@apply absolute opacity-0;
 		}
-		
+
 		.tabs-content {
-			@apply w-full order-99 border-1 border-grey-20 px-6 z-0 hidden pb-6 pt-2;
+			@apply border-grey-20 z-0 order-99 hidden w-full border-1 px-6 pt-2 pb-6;
 		}
-		
-		.tabs-input:checked+.tabs-label+.tabs-content {
+
+		.tabs-input:checked + .tabs-label + .tabs-content {
 			@apply block;
 		}
 
-		.tabs-input:checked+.tabs-label, 
+		.tabs-input:checked + .tabs-label,
 		.tabs-label:active {
-			@apply border-b-1 border-b-blue-elastic text-blue-elastic;
+			@apply border-b-blue-elastic text-blue-elastic border-b-1;
 		}
 
-		.tabs-input:focus-visible+.tabs-label {
-			outline: var(--outline-size) var(--outline-style) var(--outline-color);
+		.tabs-input:focus-visible + .tabs-label {
+			outline: var(--outline-size) var(--outline-style)
+				var(--outline-color);
 			outline-offset: var(--outline-offset, var(--outline-size));
 		}
 	}
diff --git a/src/Elastic.Markdown/Assets/markdown/typography.css b/src/Elastic.Markdown/Assets/markdown/typography.css
index 7fb231704..016a41e0e 100644
--- a/src/Elastic.Markdown/Assets/markdown/typography.css
+++ b/src/Elastic.Markdown/Assets/markdown/typography.css
@@ -1,51 +1,54 @@
 .markdown-content {
-	
-	@apply text-ink text-base font-body;
+	@apply text-ink font-body text-base;
 
 	h1 {
-		@apply text-5xl text-ink-dark font-semibold;
+		@apply text-ink-dark text-5xl font-semibold;
 		line-height: 1.2em;
 	}
-	
-	h2 {
 
-		@apply text-4xl text-ink-dark font-bold mt-10;
+	h2 {
+		@apply text-ink-dark mt-10 text-4xl font-bold;
 		line-height: 1.2em;
 	}
-	
+
 	h3 {
-		@apply text-2xl text-ink-dark font-bold mt-8;
+		@apply text-ink-dark mt-8 text-2xl font-bold;
 		line-height: 1.2em;
 	}
 
 	h4 {
-		@apply text-xl text-ink-dark font-bold mt-8;
+		@apply text-ink-dark mt-8 text-xl font-bold;
 		line-height: 1.2em;
 	}
 
 	h5 {
-		@apply text-base text-ink-dark font-bold mt-8;
+		@apply text-ink-dark mt-8 text-base font-bold;
 		line-height: 1.2em;
 	}
 
 	h6 {
-		@apply text-sm text-ink-dark font-bold mt-8;
+		@apply text-ink-dark mt-8 text-sm font-bold;
 		line-height: 1.2em;
 	}
-	
-	h1, h2, h3, h4, h5, h6 {
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
 		@apply font-sans;
 		a {
-			@apply font-sans text-ink-dark hover:text-ink-dark no-underline;
+			@apply text-ink-dark hover:text-ink-dark font-sans no-underline;
 		}
 	}
-	
+
 	p {
 		@apply mt-4;
 		line-height: 1.5em;
 		text-wrap: pretty;
 	}
-	
+
 	a {
 		@apply font-body text-blue-elastic hover:text-blue-elastic-100 underline;
 	}
diff --git a/src/Elastic.Markdown/Assets/modal.css b/src/Elastic.Markdown/Assets/modal.css
index 108b3b95e..66af72638 100644
--- a/src/Elastic.Markdown/Assets/modal.css
+++ b/src/Elastic.Markdown/Assets/modal.css
@@ -1,31 +1,31 @@
 .modal {
-    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden;
+	@apply fixed inset-0 z-50 flex hidden items-center justify-center bg-black/50;
 }
 
 .modal-content {
-    @apply relative bg-white p-6 rounded-lg shadow-lg max-w-3xl w-full items-center;
+	@apply relative w-full max-w-3xl items-center rounded-lg bg-white p-6 shadow-lg;
 }
 
 .modal-content figure {
-    @apply text-center;
+	@apply text-center;
 }
 
 .modal-content img {
-    @apply max-w-full h-auto rounded-lg mx-auto;
+	@apply mx-auto h-auto max-w-full rounded-lg;
 }
 
 .modal-content figcaption {
-    @apply mt-4 text-sm;
+	@apply mt-4 text-sm;
 }
 
 .modal-footer {
-    @apply mt-4 text-right;
+	@apply mt-4 text-right;
 }
 
 .modal-close {
-    @apply cursor-pointer absolute top-2 right-4 transition-colors;
+	@apply absolute top-2 right-4 cursor-pointer transition-colors;
 
-    & > a {
-        @apply no-underline text-2xl font-bold text-ink-dark hover:text-ink;
-    }
+	& > a {
+		@apply text-ink-dark hover:text-ink text-2xl font-bold no-underline;
+	}
 }
diff --git a/src/Elastic.Markdown/Assets/open-details-with-anchor.ts b/src/Elastic.Markdown/Assets/open-details-with-anchor.ts
index eddd4cb56..b87010f0e 100644
--- a/src/Elastic.Markdown/Assets/open-details-with-anchor.ts
+++ b/src/Elastic.Markdown/Assets/open-details-with-anchor.ts
@@ -1,19 +1,22 @@
-import { UAParser } from 'ua-parser-js';
-const { getBrowser } = new UAParser();
+import { UAParser } from 'ua-parser-js'
+const { getBrowser } = new UAParser()
 
 // This is a fix for anchors in details elements in non-Chrome browsers.
 export function openDetailsWithAnchor() {
-	if (window.location.hash) {
-		const target = document.querySelector(window.location.hash);
-		if (target) {
-			const closestDetails = target.closest('details');
-			if (closestDetails) {
-				const browser = getBrowser();
-				if (browser.name !== 'Chrome') {
-					closestDetails.open = true;
-					target.scrollIntoView({ behavior: "instant", block: "start" });
-				}
-			}
-		}
-	}
+    if (window.location.hash) {
+        const target = document.querySelector(window.location.hash)
+        if (target) {
+            const closestDetails = target.closest('details')
+            if (closestDetails) {
+                const browser = getBrowser()
+                if (browser.name !== 'Chrome') {
+                    closestDetails.open = true
+                    target.scrollIntoView({
+                        behavior: 'instant',
+                        block: 'start',
+                    })
+                }
+            }
+        }
+    }
 }
diff --git a/src/Elastic.Markdown/Assets/pages-nav.ts b/src/Elastic.Markdown/Assets/pages-nav.ts
index fdaad09ef..0e9123a79 100644
--- a/src/Elastic.Markdown/Assets/pages-nav.ts
+++ b/src/Elastic.Markdown/Assets/pages-nav.ts
@@ -1,51 +1,62 @@
-import {$, $$} from "select-dom";
+import { $, $$ } from 'select-dom'
 
 function expandAllParents(navItem: HTMLElement) {
-	let parent = navItem?.closest('li');
-	while (parent) {
-		const input = parent.querySelector('input');
-		if (input) {
-			(input as HTMLInputElement).checked = true;
-		}
-		parent = parent.parentElement?.closest('li');
-	}
+    let parent = navItem?.closest('li')
+    while (parent) {
+        const input = parent.querySelector('input')
+        if (input) {
+            ;(input as HTMLInputElement).checked = true
+        }
+        parent = parent.parentElement?.closest('li')
+    }
 }
 
 function scrollCurrentNaviItemIntoView(nav: HTMLElement) {
-	const currentNavItem = $('.current', nav);
-	expandAllParents(currentNavItem);
-	if (currentNavItem && !isElementInViewport(nav, currentNavItem)) {
-		const navRect = nav.getBoundingClientRect();
-		const currentNavItemRect = currentNavItem.getBoundingClientRect();
-		// Calculate the offset needed to scroll the current navigation item into view.
-		// The offset is determined by the difference between the top of the current navigation item and the top of the navigation container,
-		// adjusted by one-third of the height of the navigation container and half the height of the current navigation item.
-		const offset = currentNavItemRect.top - navRect.top - navRect.height / 3 + currentNavItemRect.height / 2;
-		
-		// Scroll the navigation container by the calculated offset to bring the current navigation item into view.
-		nav.scrollTop = nav.scrollTop + offset;
-	}
+    const currentNavItem = $('.current', nav)
+    expandAllParents(currentNavItem)
+    if (currentNavItem && !isElementInViewport(nav, currentNavItem)) {
+        const navRect = nav.getBoundingClientRect()
+        const currentNavItemRect = currentNavItem.getBoundingClientRect()
+        // Calculate the offset needed to scroll the current navigation item into view.
+        // The offset is determined by the difference between the top of the current navigation item and the top of the navigation container,
+        // adjusted by one-third of the height of the navigation container and half the height of the current navigation item.
+        const offset =
+            currentNavItemRect.top -
+            navRect.top -
+            navRect.height / 3 +
+            currentNavItemRect.height / 2
+
+        // Scroll the navigation container by the calculated offset to bring the current navigation item into view.
+        nav.scrollTop = nav.scrollTop + offset
+    }
 }
 
-function isElementInViewport(parent: HTMLElement, child: HTMLElement, ): boolean {
-	const childRect = child.getBoundingClientRect();
-	const parentRect = parent.getBoundingClientRect();
-	return (
-		childRect.top >= parentRect.top &&
-		childRect.left >= parentRect.left &&
-		childRect.bottom <= parentRect.bottom &&
-		childRect.right <= parentRect.right
-	);
+function isElementInViewport(parent: HTMLElement, child: HTMLElement): boolean {
+    const childRect = child.getBoundingClientRect()
+    const parentRect = parent.getBoundingClientRect()
+    return (
+        childRect.top >= parentRect.top &&
+        childRect.left >= parentRect.left &&
+        childRect.bottom <= parentRect.bottom &&
+        childRect.right <= parentRect.right
+    )
 }
 
 export function initNav() {
-	const pagesNav = $('#pages-nav');
-	if (!pagesNav) {
-		return;
-	}
-	const navItems = $$('a[href="' + window.location.pathname + '"], a[href="' + window.location.pathname + '/"]', pagesNav);
-	navItems.forEach(el => {
-		el.classList.add('current');
-	});
-	scrollCurrentNaviItemIntoView(pagesNav);
+    const pagesNav = $('#pages-nav')
+    if (!pagesNav) {
+        return
+    }
+    const navItems = $$(
+        'a[href="' +
+            window.location.pathname +
+            '"], a[href="' +
+            window.location.pathname +
+            '/"]',
+        pagesNav
+    )
+    navItems.forEach((el) => {
+        el.classList.add('current')
+    })
+    scrollCurrentNaviItemIntoView(pagesNav)
 }
diff --git a/src/Elastic.Markdown/Assets/styles.css b/src/Elastic.Markdown/Assets/styles.css
index 2583aea32..3f8e97cdb 100644
--- a/src/Elastic.Markdown/Assets/styles.css
+++ b/src/Elastic.Markdown/Assets/styles.css
@@ -1,18 +1,17 @@
-@import "tailwindcss";
-@import "./fonts.css";
-@import "./theme.css";
-@import "./markdown/typography.css";
-@import "./markdown/list.css";
-@import "./markdown/tabs.css";
-@import "./markdown/code.css";
-@import "./copybutton.css";
-@import "./markdown/admonition.css";
-@import "./markdown/dropdown.css";
-@import "./markdown/table.css";
-@import "./markdown/definition-list.css";
-@import "./markdown/images.css";
-@import "./modal.css";
-
+@import 'tailwindcss';
+@import './fonts.css';
+@import './theme.css';
+@import './markdown/typography.css';
+@import './markdown/list.css';
+@import './markdown/tabs.css';
+@import './markdown/code.css';
+@import './copybutton.css';
+@import './markdown/admonition.css';
+@import './markdown/dropdown.css';
+@import './markdown/table.css';
+@import './markdown/definition-list.css';
+@import './markdown/images.css';
+@import './modal.css';
 
 :root {
 	--outline-size: max(2px, 0.08em);
@@ -37,36 +36,16 @@
 	}
 }
 
-
-
-/*@media screen and (min-width: 767px) {*/
-/*	:root {*/
-/*		--offset-top: 131px;*/
-/*	}*/
-/*}*/
-
 @media screen and (min-width: 1200px) {
 	:root {
 		--offset-top: 72px;
 	}
 }
 
-/*#default-search::-webkit-search-cancel-button {*/
-/*	padding-right: calc(var(--spacing) * 2);*/
-/*	-webkit-appearance: none;*/
-/*	height: 16px;*/
-/*	width: 16px;*/
-/*	margin-left: .4em;*/
-/*	background-image: url("data:image/svg+xml;utf8,<svg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 24 24'><path stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 18 17.94 6M18 18 6.06 6'/></svg>");*/
-/*	cursor: pointer;*/
-/*	background-repeat: no-repeat;*/
-/*}*/
-
-
 #pages-nav li.current {
 	position: relative;
 	&::before {
-		content: "";
+		content: '';
 		position: absolute;
 		top: 50%;
 		left: -1px;
@@ -85,40 +64,23 @@
 
 @layer components {
 	.link {
-		@apply 
-			font-sans
-			text-blue-elastic 
-			text-nowrap
-			font-semibold
-			hover:text-blue-elastic-100
-			inline-flex
-			justify-center
-			items-center;
+		@apply text-blue-elastic hover:text-blue-elastic-100 inline-flex items-center justify-center font-sans font-semibold text-nowrap;
 
 		.link-icon {
-			@apply 
-				shrink-0 
-				size-4
-				ml-0
-				mr-1
-			}
-			
+			@apply mr-1 ml-0 size-4 shrink-0;
+		}
+
 		.link-arrow {
-			@apply 
-				shrink-0 
-				size-7
-				ml-2
-				transition-transform
-				ease-out;
+			@apply ml-2 size-7 shrink-0 transition-transform ease-out;
 		}
 
-		&:hover{
+		&:hover {
 			svg:not(.link-icon) {
 				@apply translate-x-2;
 			}
 		}
 	}
-	
+
 	.sidebar {
 		.sidebar-nav {
 			@apply sticky top-(--offset-top) z-30 overflow-y-auto;
@@ -126,18 +88,12 @@
 			scrollbar-gutter: stable;
 			scroll-behavior: smooth;
 		}
-		
+
 		.sidebar-link {
-			@apply
-				text-ink-light
-				hover:text-black
-				md:text-sm
-				text-wrap
-				inline-block
-			    leading-[1.2em]
+			@apply text-ink-light inline-block leading-[1.2em] text-wrap hover:text-black md:text-sm;
 		}
 	}
-	
+
 	.content-container {
 		@apply w-full max-w-[80ch];
 	}
@@ -171,8 +127,6 @@
 	scroll-margin-top: calc(var(--offset-top) + var(--spacing) * 6);
 }
 
-
-
 :is(a, button, input, textarea, summary):focus {
 	outline: var(--outline-size) var(--outline-style) var(--outline-color);
 	outline-offset: var(--outline-offset, var(--outline-size));
@@ -188,11 +142,11 @@
 }
 
 .htmx-indicator {
-	display:none;
+	display: none;
 }
 .htmx-request .htmx-indicator,
-.htmx-request.htmx-indicator{
-	display:block;
+.htmx-request.htmx-indicator {
+	display: block;
 	z-index: 9999;
 }
 
@@ -205,18 +159,18 @@
 }
 @keyframes progress {
 	0% {
-		transform:  translateX(0) scaleX(0);
+		transform: translateX(0) scaleX(0);
 	}
 	40% {
-		transform:  translateX(0) scaleX(0.4);
+		transform: translateX(0) scaleX(0.4);
 	}
 	100% {
-		transform:  translateX(100%) scaleX(0.5);
+		transform: translateX(100%) scaleX(0.5);
 	}
 }
 
 #pages-nav .current {
-	@apply font-semibold text-blue-elastic!;
+	@apply text-blue-elastic! font-semibold;
 }
 
 .markdown-content {
@@ -225,16 +179,16 @@
 
 .container {
 	@apply lg:px-3;
-	
+
 	max-width: 1250px !important;
 }
 
-
 #elastic-nav {
 	min-height: var(--offset-top);
 }
 
-html, body {
+html,
+body {
 	height: 100%;
 }
 
diff --git a/src/Elastic.Markdown/Assets/tabs.ts b/src/Elastic.Markdown/Assets/tabs.ts
index 18983abc6..05396332a 100644
--- a/src/Elastic.Markdown/Assets/tabs.ts
+++ b/src/Elastic.Markdown/Assets/tabs.ts
@@ -5,14 +5,14 @@
 // Extra JS capability for selected tabs to be synced
 // The selection is stored in local storage so that it persists across page loads.
 
-const sd_id_to_elements = {};
-const storageKeyPrefix = "sphinx-design-tab-id-";
+const sd_id_to_elements = {}
+const storageKeyPrefix = 'sphinx-design-tab-id-'
 
 function create_key(el: HTMLElement) {
-  const syncId = el.getAttribute("data-sync-id");
-  const syncGroup = el.getAttribute("data-sync-group");
-  if (!syncId || !syncGroup) return null;
-  return [syncGroup, syncId, syncGroup + "--" + syncId];
+    const syncId = el.getAttribute('data-sync-id')
+    const syncGroup = el.getAttribute('data-sync-group')
+    if (!syncId || !syncGroup) return null
+    return [syncGroup, syncId, syncGroup + '--' + syncId]
 }
 
 /**
@@ -20,46 +20,51 @@ function create_key(el: HTMLElement) {
  *
  */
 function ready() {
-  // Find all tabs with sync data
+    // Find all tabs with sync data
 
-  const groups = [];
+    const groups = []
 
-  document.querySelectorAll(".tabs-label").forEach((label) => {
-    if (label instanceof HTMLElement) {
-      const data = create_key(label);
-      if (data) {
-        const [group, id, key] = data;
+    document.querySelectorAll('.tabs-label').forEach((label) => {
+        if (label instanceof HTMLElement) {
+            const data = create_key(label)
+            if (data) {
+                const [group, id, key] = data
 
-        // add click event listener
-        label.onclick = onSDLabelClick;
+                // add click event listener
+                label.onclick = onSDLabelClick
 
-        // store map of key to elements
-        if (!sd_id_to_elements[key]) {
-          sd_id_to_elements[key] = [];
-        }
-        sd_id_to_elements[key].push(label);
+                // store map of key to elements
+                if (!sd_id_to_elements[key]) {
+                    sd_id_to_elements[key] = []
+                }
+                sd_id_to_elements[key].push(label)
 
-        if (groups.indexOf(group) === -1) {
-          groups.push(group);
-          // Check if a specific tab has been selected via URL parameter
-          const tabParam = new URLSearchParams(window.location.search).get(
-            group
-          );
-          if (tabParam) {
-            window.sessionStorage.setItem(storageKeyPrefix + group, tabParam);
-          }
-        }
+                if (groups.indexOf(group) === -1) {
+                    groups.push(group)
+                    // Check if a specific tab has been selected via URL parameter
+                    const tabParam = new URLSearchParams(
+                        window.location.search
+                    ).get(group)
+                    if (tabParam) {
+                        window.sessionStorage.setItem(
+                            storageKeyPrefix + group,
+                            tabParam
+                        )
+                    }
+                }
 
-        // Check is a specific tab has been selected previously
-        const previousId = window.sessionStorage.getItem(
-          storageKeyPrefix + group
-        );
-        if (previousId === id) {
-          label.previousElementSibling.checked = true;
+                // Check is a specific tab has been selected previously
+                const previousId = window.sessionStorage.getItem(
+                    storageKeyPrefix + group
+                )
+                if (previousId === id) {
+                    ;(
+                        label.previousElementSibling as HTMLInputElement
+                    ).checked = true
+                }
+            }
         }
-      }
-    }
-  });
+    })
 }
 
 /**
@@ -68,16 +73,16 @@ function ready() {
  * @this {HTMLElement} - The element that was clicked.
  */
 function onSDLabelClick() {
-  const data = create_key(this);
-  if (!data) return;
-  const [group, id, key] = data;
-  for (const label of sd_id_to_elements[key]) {
-    if (label === this) continue;
-    label.previousElementSibling.checked = true;
-  }
-  window.sessionStorage.setItem(storageKeyPrefix + group, id);
+    const data = create_key(this)
+    if (!data) return
+    const [group, id, key] = data
+    for (const label of sd_id_to_elements[key]) {
+        if (label === this) continue
+        label.previousElementSibling.checked = true
+    }
+    window.sessionStorage.setItem(storageKeyPrefix + group, id)
 }
 
 export function initTabs() {
-  ready();
+    ready()
 }
diff --git a/src/Elastic.Markdown/Assets/theme.css b/src/Elastic.Markdown/Assets/theme.css
index f31bf9da4..969f072c1 100644
--- a/src/Elastic.Markdown/Assets/theme.css
+++ b/src/Elastic.Markdown/Assets/theme.css
@@ -1,164 +1,161 @@
 @theme {
-
-
 	--breakpoint-sm: 40rem;
 	--breakpoint-md: 768px;
 	--breakpoint-lg: 1280px;
 	--breakpoint-xl: 1920px;
 	--breakpoint-2xl: 2000px;
 
-	--font-sans: "Mier B", "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-	--font-body: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-sans:
+		'Mier B', 'Inter', ui-sans-serif, system-ui, sans-serif,
+		'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+		'Noto Color Emoji';
+	--font-body:
+		'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
+		'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
 	--color-*: initial;
 
-	--color-white: #FFFFFF;
+	--color-white: #ffffff;
 	--color-black: #000000;
-	
+
 	--color-body: #515151;
 
 	--color-ink: #343741;
 	--color-ink-light: #535966;
-	--color-ink-dark: #1C1E23;
-
-	--color-blue-sky: #36B9FF;
-	--color-blue-midnight: #20377D;
-	--color-blue-developer: #101C3F;
-	
-	
-	--color-blue-elastic-10: #E8F1FF;
-	--color-blue-elastic-20: #D9E8FF;
-	--color-blue-elastic-30: #B8D4FF;
-	--color-blue-elastic-40: #A3CBFF;
-	--color-blue-elastic-50: #85B7FF;
-	--color-blue-elastic-60: #61A2FF;
-	--color-blue-elastic-70: #3788FF;
-	--color-blue-elastic-80: #2476F0;
-	--color-blue-elastic-90: #0B64DD;
-	--color-blue-elastic-100: #1750BA;
+	--color-ink-dark: #1c1e23;
+
+	--color-blue-sky: #36b9ff;
+	--color-blue-midnight: #20377d;
+	--color-blue-developer: #101c3f;
+
+	--color-blue-elastic-10: #e8f1ff;
+	--color-blue-elastic-20: #d9e8ff;
+	--color-blue-elastic-30: #b8d4ff;
+	--color-blue-elastic-40: #a3cbff;
+	--color-blue-elastic-50: #85b7ff;
+	--color-blue-elastic-60: #61a2ff;
+	--color-blue-elastic-70: #3788ff;
+	--color-blue-elastic-80: #2476f0;
+	--color-blue-elastic-90: #0b64dd;
+	--color-blue-elastic-100: #1750ba;
 	--color-blue-elastic-110: #154399;
 	--color-blue-elastic-120: #123778;
-	--color-blue-elastic-130: #0D2F5E;
-	--color-blue-elastic-140: #0A2342;
-	--color-blue-elastic: #0B64DD; /* == --color-blue-elastic-90 */
-	
-	--color-pink-10: #FFEBF5;
-	--color-pink-20: #FDDDE9;
-	--color-pink-30: #FFC7DB;
-	--color-pink-40: #FBADCA;
-	--color-pink-50: #F58EB7;
-	--color-pink-60: #EE72A6;
-	--color-pink-70: #E54A91;
-	--color-pink-80: #D13680;
-	--color-pink-90: #BD1F70;
-	--color-pink-100: #A11262;
-	--color-pink-110: #801A54;
-	--color-pink-120: #5E1E47;
-	--color-pink-130: #481B3B;
-	--color-pink-140: #35172E;
-	--color-pink: #BD1F70; /* == --color-pink-90 */
-
-	--color-teal-10: #E2F9F7;
-	--color-teal-20: #C9F3F0;
-	--color-teal-30: #A6EDEA;
-	--color-teal-40: #77E5E0;
-	--color-teal-50: #51D6D2;
-	--color-teal-60: #16C5C0;
-	--color-teal-70: #00B0AA;
-	--color-teal-80: #009E99;
-	--color-teal-90: #008C88;
+	--color-blue-elastic-130: #0d2f5e;
+	--color-blue-elastic-140: #0a2342;
+	--color-blue-elastic: #0b64dd; /* == --color-blue-elastic-90 */
+
+	--color-pink-10: #ffebf5;
+	--color-pink-20: #fddde9;
+	--color-pink-30: #ffc7db;
+	--color-pink-40: #fbadca;
+	--color-pink-50: #f58eb7;
+	--color-pink-60: #ee72a6;
+	--color-pink-70: #e54a91;
+	--color-pink-80: #d13680;
+	--color-pink-90: #bd1f70;
+	--color-pink-100: #a11262;
+	--color-pink-110: #801a54;
+	--color-pink-120: #5e1e47;
+	--color-pink-130: #481b3b;
+	--color-pink-140: #35172e;
+	--color-pink: #bd1f70; /* == --color-pink-90 */
+
+	--color-teal-10: #e2f9f7;
+	--color-teal-20: #c9f3f0;
+	--color-teal-30: #a6edea;
+	--color-teal-40: #77e5e0;
+	--color-teal-50: #51d6d2;
+	--color-teal-60: #16c5c0;
+	--color-teal-70: #00b0aa;
+	--color-teal-80: #009e99;
+	--color-teal-90: #008c88;
 	--color-teal-100: #047471;
-	--color-teal-110: #065B58;
+	--color-teal-110: #065b58;
 	--color-teal-120: #044949;
 	--color-teal-130: #023436;
-	--color-teal-140: #03282B;
-	--color-teal: #008C88; /* == --color-teal-90 */
-
-
-	--color-yellow-10: #FDF3D8;
-	--color-yellow-20: #FDE9B5;
-	--color-yellow-30: #FCD883;
-	--color-yellow-40: #FACB3D;
-	--color-yellow-50: #F5BC00;
-	--color-yellow-60: #EAAE01;
-	--color-yellow-70: #CA9601;
-	--color-yellow-80: #AD7E00;
-	--color-yellow-90: #966B03;
+	--color-teal-140: #03282b;
+	--color-teal: #008c88; /* == --color-teal-90 */
+
+	--color-yellow-10: #fdf3d8;
+	--color-yellow-20: #fde9b5;
+	--color-yellow-30: #fcd883;
+	--color-yellow-40: #facb3d;
+	--color-yellow-50: #f5bc00;
+	--color-yellow-60: #eaae01;
+	--color-yellow-70: #ca9601;
+	--color-yellow-80: #ad7e00;
+	--color-yellow-90: #966b03;
 	--color-yellow-100: #825803;
-	--color-yellow-110: #6A4906;
+	--color-yellow-110: #6a4906;
 	--color-yellow-120: #513910;
-	--color-yellow-130: #3D3014;
-	--color-yellow-140: #2C2721;
-	--color-yellow: #966B03; /* == --color-yellow-90 */
-
-
-	--color-red-10: #FFE8E5;
-	--color-red-20: #FDDDD8;
-	--color-red-30: #FFC9C2;
-	--color-red-40: #FFB5AD;
-	--color-red-50: #FC9188;
-	--color-red-60: #F6726A;
-	--color-red-70: #EE4C48;
-	--color-red-80: #DA3737;
-	--color-red-90: #C61E25;
-	--color-red-100: #A71627;
-	--color-red-110: #7F1F27;
-	--color-red-120: #5E2129;
-	--color-red-130: #491D27;
+	--color-yellow-130: #3d3014;
+	--color-yellow-140: #2c2721;
+	--color-yellow: #966b03; /* == --color-yellow-90 */
+
+	--color-red-10: #ffe8e5;
+	--color-red-20: #fdddd8;
+	--color-red-30: #ffc9c2;
+	--color-red-40: #ffb5ad;
+	--color-red-50: #fc9188;
+	--color-red-60: #f6726a;
+	--color-red-70: #ee4c48;
+	--color-red-80: #da3737;
+	--color-red-90: #c61e25;
+	--color-red-100: #a71627;
+	--color-red-110: #7f1f27;
+	--color-red-120: #5e2129;
+	--color-red-130: #491d27;
 	--color-red-140: #351721;
-	--color-red: #C61E25; /* == --color-red-90 */
-
-	--color-green-10: #E2F8F0;
-	--color-green-20: #C9F3E3;
-	--color-green-30: #AEE8D2;
-	--color-green-40: #88E3C3;
-	--color-green-50: #59CFAA;
-	--color-green-60: #24C292;
-	--color-green-70: #04AE7E;
-	--color-green-80: #00996B;
-	--color-green-90: #008A5E;
-	--color-green-100: #09724D;
-	--color-green-110: #0C5A3F;
+	--color-red: #c61e25; /* == --color-red-90 */
+
+	--color-green-10: #e2f8f0;
+	--color-green-20: #c9f3e3;
+	--color-green-30: #aee8d2;
+	--color-green-40: #88e3c3;
+	--color-green-50: #59cfaa;
+	--color-green-60: #24c292;
+	--color-green-70: #04ae7e;
+	--color-green-80: #00996b;
+	--color-green-90: #008a5e;
+	--color-green-100: #09724d;
+	--color-green-110: #0c5a3f;
 	--color-green-120: #094837;
-	--color-green-130: #0D362B;
-	--color-green-140: #092A26;
-	--color-green: #008A5E; /* == --color-green-90 */
-
-
-	--color-purple-10: #F3ECFE;
-	--color-purple-20: #ECE2FE;
-	--color-purple-30: #E2D3FE;
-	--color-purple-40: #D1BAFC;
-	--color-purple-50: #C5A5FA;
-	--color-purple-60: #B386F9;
-	--color-purple-70: #A36DEF;
-	--color-purple-80: #925CDA;
-	--color-purple-90: #8144CC;
-	--color-purple-100: #6B3C9F;
-	--color-purple-110: #52357E;
-	--color-purple-120: #3E2C63;
+	--color-green-130: #0d362b;
+	--color-green-140: #092a26;
+	--color-green: #008a5e; /* == --color-green-90 */
+
+	--color-purple-10: #f3ecfe;
+	--color-purple-20: #ece2fe;
+	--color-purple-30: #e2d3fe;
+	--color-purple-40: #d1bafc;
+	--color-purple-50: #c5a5fa;
+	--color-purple-60: #b386f9;
+	--color-purple-70: #a36def;
+	--color-purple-80: #925cda;
+	--color-purple-90: #8144cc;
+	--color-purple-100: #6b3c9f;
+	--color-purple-110: #52357e;
+	--color-purple-120: #3e2c63;
 	--color-purple-130: #322452;
-	--color-purple-140: #2A1E3E;
-	--color-purple: #8144CC; /* == --color-purple-90 */
+	--color-purple-140: #2a1e3e;
+	--color-purple: #8144cc; /* == --color-purple-90 */
 
-	
 	/* TODO: Add these colors also for "gray" (a) and replace current occurrences */
-	--color-grey-10: #F6F9FC;
-	--color-grey-20: #E5E9F0;
-	--color-grey-30: #D0D4DA;
-	--color-grey-40: #BDC2CA;
-	--color-grey-50: #AAB0BA;
-	--color-grey-60: #989FAA;
-	--color-grey-70: #868E9A;
-	--color-grey-80: #767D89;
-	--color-grey-90: #666D78;
-	--color-grey-100: #555C67;
-	--color-grey-110: #464C56;
-	--color-grey-120: #373D45;
-	--color-grey-130: #292E34;
-	--color-grey-140: #1C1F24;
-	--color-grey: #666D78; /* == --color-grey-90 */
-	
-	
+	--color-grey-10: #f6f9fc;
+	--color-grey-20: #e5e9f0;
+	--color-grey-30: #d0d4da;
+	--color-grey-40: #bdc2ca;
+	--color-grey-50: #aab0ba;
+	--color-grey-60: #989faa;
+	--color-grey-70: #868e9a;
+	--color-grey-80: #767d89;
+	--color-grey-90: #666d78;
+	--color-grey-100: #555c67;
+	--color-grey-110: #464c56;
+	--color-grey-120: #373d45;
+	--color-grey-130: #292e34;
+	--color-grey-140: #1c1f24;
+	--color-grey: #666d78; /* == --color-grey-90 */
+
 	--spacing: 4px;
 }
diff --git a/src/Elastic.Markdown/Assets/toc-nav.ts b/src/Elastic.Markdown/Assets/toc-nav.ts
index 48e870171..bd3aa6cb1 100644
--- a/src/Elastic.Markdown/Assets/toc-nav.ts
+++ b/src/Elastic.Markdown/Assets/toc-nav.ts
@@ -1,53 +1,61 @@
-import { $$, $ } from 'select-dom';
+import { $$, $ } from 'select-dom'
 
 interface TocElements {
-	headings: Element[];
-	tocLinks: HTMLAnchorElement[];
-	tocContainer: HTMLUListElement | null;
-	progressIndicator: HTMLDivElement;
+    headings: Element[]
+    tocLinks: HTMLAnchorElement[]
+    tocContainer: HTMLDivElement | null
+    progressIndicator: HTMLDivElement
 }
 
 // 34 is the height of the header + some padding
 // 4 is the base spacing unit
-const HEADING_OFFSET = 34 * 4; 
+const HEADING_OFFSET = 34 * 4
 
 function initializeTocElements(): TocElements {
-	const headings = $$('#markdown-content h2, #markdown-content h3');
-	const tocLinks = $$('#toc-nav li>a') as HTMLAnchorElement[];
-	const tocContainer = $('#toc-nav .toc-progress-container') as HTMLDivElement;
-	const progressIndicator = $('.toc-progress-indicator', tocContainer) as HTMLDivElement;
-	return { headings, tocLinks, tocContainer, progressIndicator };
+    const headings = $$('#markdown-content h2, #markdown-content h3')
+    const tocLinks = $$('#toc-nav li>a') as HTMLAnchorElement[]
+    const tocContainer = $('#toc-nav .toc-progress-container') as HTMLDivElement
+    const progressIndicator = $(
+        '.toc-progress-indicator',
+        tocContainer
+    ) as HTMLDivElement
+    return { headings, tocLinks, tocContainer, progressIndicator }
 }
 
 // Find the current TOC links based on visible headings
 // It can return multiple links because headings in a tab can have the same position
 function findCurrentTocLinks(elements: TocElements): HTMLAnchorElement[] {
-	let currentTocLinks: HTMLAnchorElement[] = [];
-	let currentTop: number | null = null;
-	for (const heading of elements.headings) {
-		const rect = heading.getBoundingClientRect();
-		if (rect.top <= HEADING_OFFSET) {
-			if (currentTop !== null && Math.abs(rect.top - currentTop) > 1) {
-				currentTocLinks = [];
-			}
-			currentTop = rect.top;
-			const foundLink = elements.tocLinks.find(link => 
-				link.getAttribute('href') === `#${heading.closest('.heading-wrapper')?.id}`
-			);
-			if (foundLink) {
-				currentTocLinks.push(foundLink);
-			}
-		}
-	}
-	return currentTocLinks;
+    let currentTocLinks: HTMLAnchorElement[] = []
+    let currentTop: number | null = null
+    for (const heading of elements.headings) {
+        const rect = heading.getBoundingClientRect()
+        if (rect.top <= HEADING_OFFSET) {
+            if (currentTop !== null && Math.abs(rect.top - currentTop) > 1) {
+                currentTocLinks = []
+            }
+            currentTop = rect.top
+            const foundLink = elements.tocLinks.find(
+                (link) =>
+                    link.getAttribute('href') ===
+                    `#${heading.closest('.heading-wrapper')?.id}`
+            )
+            if (foundLink) {
+                currentTocLinks.push(foundLink)
+            }
+        }
+    }
+    return currentTocLinks
 }
 
 // Get visible headings in viewport
 function getVisibleHeadings(elements: TocElements) {
-	return elements.headings.filter(heading => {
-		const rect = heading.getBoundingClientRect();
-		return rect.top - HEADING_OFFSET + 64 >= 0 && rect.top <= window.innerHeight;
-	});
+    return elements.headings.filter((heading) => {
+        const rect = heading.getBoundingClientRect()
+        return (
+            rect.top - HEADING_OFFSET + 64 >= 0 &&
+            rect.top <= window.innerHeight
+        )
+    })
 }
 
 // If the user has scrolled to the bottom of the page,
@@ -55,86 +63,97 @@ function getVisibleHeadings(elements: TocElements) {
 // handle the progress indicator differently.
 // In this case it sets the indicator for all visible headings.
 function handleBottomScroll(elements: TocElements) {
-	const visibleHeadings = getVisibleHeadings(elements);
-	if (visibleHeadings.length === 0) return;
-	const firstHeading = visibleHeadings[0];
-	const lastHeading = visibleHeadings[visibleHeadings.length - 1];
-	const firstLink = elements.tocLinks.find(link => 
-		link.getAttribute('href') === `#${firstHeading.parentElement?.id}`
-	)?.closest('li');
-	const lastLink = elements.tocLinks.find(link => 
-		link.getAttribute('href') === `#${lastHeading.parentElement?.id}`
-	)?.closest('li');
-	if (firstLink && lastLink && elements.tocContainer) {
-		const tocRect = elements.tocContainer.getBoundingClientRect();
-		const firstRect = firstLink.getBoundingClientRect();
-		const lastRect = lastLink.getBoundingClientRect();
-		updateProgressIndicatorPosition(
-			elements.progressIndicator,
-			firstRect.top - tocRect.top,
-			(lastRect.top + lastRect.height) - firstRect.top
-		);
-	}
+    const visibleHeadings = getVisibleHeadings(elements)
+    if (visibleHeadings.length === 0) return
+    const firstHeading = visibleHeadings[0]
+    const lastHeading = visibleHeadings[visibleHeadings.length - 1]
+    const firstLink = elements.tocLinks
+        .find(
+            (link) =>
+                link.getAttribute('href') ===
+                `#${firstHeading.parentElement?.id}`
+        )
+        ?.closest('li')
+    const lastLink = elements.tocLinks
+        .find(
+            (link) =>
+                link.getAttribute('href') ===
+                `#${lastHeading.parentElement?.id}`
+        )
+        ?.closest('li')
+    if (firstLink && lastLink && elements.tocContainer) {
+        const tocRect = elements.tocContainer.getBoundingClientRect()
+        const firstRect = firstLink.getBoundingClientRect()
+        const lastRect = lastLink.getBoundingClientRect()
+        updateProgressIndicatorPosition(
+            elements.progressIndicator,
+            firstRect.top - tocRect.top,
+            lastRect.top + lastRect.height - firstRect.top
+        )
+    }
 }
 
 function updateProgressIndicatorPosition(
-	indicator: HTMLDivElement,
-	top: number,
-	height: number
+    indicator: HTMLDivElement,
+    top: number,
+    height: number
 ) {
-	indicator.style.top = `${top}px`;
-	indicator.style.height = `${height}px`;
+    indicator.style.top = `${top}px`
+    indicator.style.height = `${height}px`
 }
 
 function updateIndicator(elements: TocElements) {
-	if (!elements.tocContainer) return;
+    if (!elements.tocContainer) return
 
-	const isAtBottom = window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 10;
-	const currentTocLinks = findCurrentTocLinks(elements);
+    const isAtBottom =
+        window.innerHeight + window.scrollY >=
+        document.documentElement.scrollHeight - 10
+    const currentTocLinks = findCurrentTocLinks(elements)
 
-	if (isAtBottom) {
-		handleBottomScroll(elements);
-	} else if (currentTocLinks.length > 0) {
-		const tocRect = elements.tocContainer.getBoundingClientRect();
-		const linkElements = currentTocLinks
-			.map(link => link.closest('li'))
-			.filter((li): li is HTMLLIElement => li !== null);
-		if (linkElements.length === 0) return;
-		const firstLinkRect = linkElements[0].getBoundingClientRect();
-		const lastLinkRect = linkElements[linkElements.length - 1].getBoundingClientRect();
-		updateProgressIndicatorPosition(
-			elements.progressIndicator,
-			firstLinkRect.top - tocRect.top,
-			(lastLinkRect.top + lastLinkRect.height) - firstLinkRect.top
-		);
-	}
+    if (isAtBottom) {
+        handleBottomScroll(elements)
+    } else if (currentTocLinks.length > 0) {
+        const tocRect = elements.tocContainer.getBoundingClientRect()
+        const linkElements = currentTocLinks
+            .map((link) => link.closest('li'))
+            .filter((li): li is HTMLLIElement => li !== null)
+        if (linkElements.length === 0) return
+        const firstLinkRect = linkElements[0].getBoundingClientRect()
+        const lastLinkRect =
+            linkElements[linkElements.length - 1].getBoundingClientRect()
+        updateProgressIndicatorPosition(
+            elements.progressIndicator,
+            firstLinkRect.top - tocRect.top,
+            lastLinkRect.top + lastLinkRect.height - firstLinkRect.top
+        )
+    }
 }
 
 function setupSmoothScrolling(elements: TocElements) {
-	elements.tocLinks.forEach(link => {
-		link.addEventListener('click', (e) => {
-			const href = link.getAttribute('href');
-			if (href?.charAt(0) === '#') {
-				e.preventDefault();
-				const target = document.getElementById(href.slice(1));
-				if (target) {
-					target.scrollIntoView({ behavior: 'smooth' });
-					history.pushState(null, '', href);
-				}
-			}
-		});
-	});
+    elements.tocLinks.forEach((link) => {
+        link.addEventListener('click', (e) => {
+            const href = link.getAttribute('href')
+            if (href?.charAt(0) === '#') {
+                e.preventDefault()
+                const target = document.getElementById(href.slice(1))
+                if (target) {
+                    target.scrollIntoView({ behavior: 'smooth' })
+                    history.pushState(null, '', href)
+                }
+            }
+        })
+    })
 }
 
 export function initTocNav() {
-	const elements = initializeTocElements();
-	if (elements.progressIndicator != null) {
-		elements.progressIndicator.style.height = '0';
-		elements.progressIndicator.style.top = '0';
-	}
-	const update = () => updateIndicator(elements)
-	update();
-	window.addEventListener('scroll', update);
-	window.addEventListener('resize', update);
-	setupSmoothScrolling(elements);
+    const elements = initializeTocElements()
+    if (elements.progressIndicator != null) {
+        elements.progressIndicator.style.height = '0'
+        elements.progressIndicator.style.top = '0'
+    }
+    const update = () => updateIndicator(elements)
+    update()
+    window.addEventListener('scroll', update)
+    window.addEventListener('resize', update)
+    setupSmoothScrolling(elements)
 }
diff --git a/src/Elastic.Markdown/eslint.config.mjs b/src/Elastic.Markdown/eslint.config.mjs
index ac1d353e9..7713bb888 100644
--- a/src/Elastic.Markdown/eslint.config.mjs
+++ b/src/Elastic.Markdown/eslint.config.mjs
@@ -1,15 +1,19 @@
-import { defineConfig, globalIgnores } from "eslint/config";
-import globals from "globals";
-import js from "@eslint/js";
-import tseslint from "typescript-eslint";
-
+import { defineConfig, globalIgnores } from 'eslint/config'
+import globals from 'globals'
+import js from '@eslint/js'
+import tseslint from 'typescript-eslint'
 
 export default defineConfig([
-	globalIgnores([
-		"_static/main.js",
-	]),
-	{ files: ["**/*.{js,mjs,cjs,ts}"] }, 
-	{ files: ["**/*.{js,mjs,cjs,ts}"], languageOptions: { globals: globals.browser } }, 
-	{ files: ["**/*.{js,mjs,cjs,ts}"], plugins: { js }, extends: ["js/recommended"] }, 
+	globalIgnores(['_static/main.js']),
+	{ files: ['**/*.{js,mjs,cjs,ts}'] },
+	{
+		files: ['**/*.{js,mjs,cjs,ts}'],
+		languageOptions: { globals: globals.browser },
+	},
+	{
+		files: ['**/*.{js,mjs,cjs,ts}'],
+		plugins: { js },
+		extends: ['js/recommended'],
+	},
 	tseslint.configs.recommended,
-]);
+])
diff --git a/src/Elastic.Markdown/package-lock.json b/src/Elastic.Markdown/package-lock.json
index 8e9b7a4a9..9e1b986c8 100644
--- a/src/Elastic.Markdown/package-lock.json
+++ b/src/Elastic.Markdown/package-lock.json
@@ -25,6 +25,8 @@
         "parcel": "2.14.4",
         "postcss": "8.5.3",
         "postcss-import": "16.1.0",
+        "prettier": "3.5.3",
+        "prettier-plugin-tailwindcss": "0.6.11",
         "typescript-eslint": "8.28.0"
       }
     },
@@ -4999,6 +5001,99 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
+      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.11.tgz",
+      "integrity": "sha512-YxaYSIvZPAqhrrEpRtonnrXdghZg1irNg4qrjboCXrpybLWVs55cW2N3juhspVJiO0JBvYJT8SYsJpc8OQSnsA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.21.3"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-import-sort": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-style-order": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-import-sort": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-style-order": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/src/Elastic.Markdown/package.json b/src/Elastic.Markdown/package.json
index b7cbd888f..07b77c700 100644
--- a/src/Elastic.Markdown/package.json
+++ b/src/Elastic.Markdown/package.json
@@ -7,7 +7,9 @@
   "scripts": {
     "watch": "parcel watch",
     "build": "parcel build",
-    "lint": "eslint ."
+    "lint": "eslint .",
+    "fmt:check": "prettier --check .",
+    "fmt:write": "prettier --write ."
   },
   "targets": {
     "js": {
@@ -25,13 +27,15 @@
   },
   "private": true,
   "devDependencies": {
-    "@tailwindcss/postcss": "4.0.3",
     "@eslint/js": "9.23.0",
+    "@tailwindcss/postcss": "4.0.3",
     "eslint": "9.23.0",
     "globals": "16.0.0",
     "parcel": "2.14.4",
     "postcss": "8.5.3",
     "postcss-import": "16.1.0",
+    "prettier": "3.5.3",
+    "prettier-plugin-tailwindcss": "0.6.11",
     "typescript-eslint": "8.28.0"
   },
   "browserslist": [