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.