feat: defaults to plaintext / map languages to be rendered as another

oramasearch · Jul 27, 2024 · dc4b479 · dc4b479
1 parent ced6061
commit dc4b479
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 10 deletions.
diff --git a/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx b/apps/storybook/stories/internal/orama-chat-assistent-message.stories.tsx
@@ -52,10 +52,20 @@ Ready to start writing?  Either start changing stuff on the left or
 [Marked]: https://github.com/markedjs/marked/
 [Markdown]: http://daringfireball.net/projects/markdown/
 
-\`\`\`javascript
-function helloWorld() {
-  console.log('Hello World!')
-}
+\`\`\`html
+<html>
+  <head>
+    <title>Hello World</title>
+  </head>
+  <body>
+  <script>
+    function helloWorld() {
+      console.log('Hello World!')
+    }
+  </script>
+    <h1>Hello World</h1>
+  </body>
+</html>
 \`\`\`
 
 \`\`\`javascript
@@ -89,6 +99,15 @@ class HelloWorld {
   }
 }
 \`\`\`
+
+\`\`\`unsuported
+<h1>Hello World</h1>
+class HelloWorld {
+  public static void main(String[] args) {
+    System.out.println("Hello World!");
+  }
+}
+\`\`\`
 `
 
 export const ChatAssistentMessage: Story = {

diff --git a/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx b/...ma-chat-messages-container/orama-chat-assistent-message/orama-markdown/orama-markdown.tsx
@@ -14,10 +14,20 @@ const SUPPORTED_HLJS_LANGUAGES = Object.fromEntries<{ error: boolean; retries: n
   SUPPORTED_HLJS_LANGUAGES_ARRAY.map((language) => [language, { error: false, retries: 0 }]),
 )
 
+// This is used for the cases the a known language returned by the LLM
+// should be highlighted as another language
+const LANGUAGES_MAPPING: Record<string, string> = {
+  html: 'xml',
+}
+
 marked.use({
   useNewRenderer: true,
   renderer: {
     code: (token) => {
+      const mappedLanguage = LANGUAGES_MAPPING[token.lang] || token.lang
+      // Some "languages" like HTML should be rendererd as XML. Reasons are still unclear.
+      const actualLanguage = SUPPORTED_HLJS_LANGUAGES[mappedLanguage] ? mappedLanguage : 'plaintext'
+
       const pre = document.createElement('pre')
       pre.classList.add('orama-markdown-pre')
       const codeTitle = document.createElement('div')
@@ -26,15 +36,19 @@ marked.use({
 
       const code = document.createElement('code')
       code.classList.add('orama-markdown-code')
-      code.classList.add(`language-${token.lang}`)
+      code.classList.add(`language-${actualLanguage}`)
       code.classList.add('hljs')
 
       pre.appendChild(code)
 
-      const hljsLanguage = hljs.getLanguage(token.lang)
+      const hljsLanguage = hljs.getLanguage(actualLanguage)
       if (hljsLanguage) {
-        codeTitle.innerHTML = hljsLanguage.name
-        code.innerHTML = hljs.highlight(token.text, { language: token.lang, ignoreIllegals: true }).value
+        if (actualLanguage === 'plaintext') {
+          codeTitle.innerHTML = ''
+        } else {
+          codeTitle.innerHTML = hljsLanguage.name
+        }
+        code.innerHTML = hljs.highlight(token.text, { language: actualLanguage, ignoreIllegals: true }).value
         code.dataset.highlighted = 'yes'
       } else {
         codeTitle.innerHTML = ' '
@@ -74,7 +88,7 @@ async function loadLanguageAndHighlight(language: string): Promise<boolean> {
 
   try {
     const response = await fetch(
-      `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/languages/${language}.min.js`,
+      `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/${language}.min.js`,
     )
 
     if (!response.ok) {
@@ -166,7 +180,7 @@ export class OramaMarkdown {
         evaluate if we need this inside our codebase or keep it in a CDN */}
         <link
           rel="stylesheet"
-          href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.7.0/build/styles/atom-one-dark.min.css"
+          href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.10.0/build/styles/atom-one-dark.min.css"
         />
         <div
           ref={(ref) => {