From 42f651d47e69f83a49e2a7f6c56ab28046991324 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Dami=C3=A1n=20Pumar?= <damianpumar@gmail.com>
Date: Tue, 2 Jul 2024 13:55:10 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20LaTex=20support=20(#5129)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

![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 <natalia@argilla.io>
---
 .../base-render-markdown/RenderMarkdown.base.component.vue | 7 +++++++
 argilla-frontend/package.json                              | 1 +
 argilla/docs/how_to_guides/dataset.md                      | 2 +-
 3 files changed, 9 insertions(+), 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
index c2494e4037..e33235b309 100644
--- 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
index aba854c9ea..b475ad3947 100644
--- 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
index 1d9d853951..6989bf6c1e 100644
--- 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.