✨ Add LaTex support (#5129)

![Screenshot 2024-06-28 at 13 06 52](https://github.com/argilla-io/argilla/assets/7398909/197a18d9-a2e7-43dc-93ff-9e66fbbbf778) --------- Co-authored-by: nataliaElv <[email protected]>
argilla-io · Jul 2, 2024 · 42f651d · 42f651d
1 parent 22b357e
commit 42f651d
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/argilla-frontend/components/base/base-render-markdown/RenderMarkdown.base.component.vue b/argilla-frontend/components/base/base-render-markdown/RenderMarkdown.base.component.vue
@@ -11,6 +11,7 @@ import { marked } from "marked";
 import { markedHighlight } from "marked-highlight";
 import hljs from "highlight.js";
 import * as DOMPurify from "dompurify";
+import markedKatex from "marked-katex-extension";
 
 const preprocess = (html) => {
   return html.replace(/[^\S\r\n]+$/gm, "");
@@ -37,6 +38,12 @@ DOMPurify.addHook("beforeSanitizeAttributes", (node) => {
   }
 });
 
+marked.use(
+  markedKatex({
+    throwOnError: false,
+  })
+);
+
 marked.use(
   { hooks: { preprocess, postprocess } },
   markedHighlight({

diff --git a/argilla-frontend/package.json b/argilla-frontend/package.json
@@ -35,6 +35,7 @@
     "frontmatter-markdown-loader": "^3.7.0",
     "marked": "^5.0.3",
     "marked-highlight": "^2.0.1",
+    "marked-katex-extension": "^5.0.2",
     "nuxt": "^2.15.8",
     "nuxt-highlightjs": "^1.0.2",
     "pinia": "^2.1.4",

diff --git a/argilla/docs/how_to_guides/dataset.md b/argilla/docs/how_to_guides/dataset.md
@@ -135,7 +135,7 @@ A **field** is defined in the `TextField` class that has the following arguments
 * `name`: The name of the field.
 * `title` (optional): The name of the field, as it will be displayed in the UI. Defaults to the `name` value.
 * `required` (optional): Whether the field is required or not. Defaults to `True`. At least one field must be required.
-* `use_markdown` (optional): Specify whether you want markdown rendered in the UI. Defaults to `False`. If you set it to True, you will be able to use all the Markdown features for text formatting, as well as embed multimedia content and PDFs.
+* `use_markdown` (optional): Specify whether you want markdown rendered in the UI. Defaults to `False`. If you set it to True, you will be able to use all the Markdown features for text formatting, including LaTex formulas and embedding multimedia content and PDFs.
 
 !!! note
     The order of the fields in the UI follows the order in which these are added to the fields attribute in the Python SDK.