Markdown not rendered correctly.

[zFlxw]

Hey, I am storing the markdown code - which the user enters inside the MarkdownEditor - inside my database (I store the value field of the MarkdownEditor component) and then re-render it with the Markdown component in another part of my application. However, this does not work as expected.

Below is a screenshot of how the markdown gets rendered by the Markdown component:

As you can see, the headings are not rendered correctly and line breaks are also not rendered. Here is the code I used to render this content:

<script lang="ts">
  import { createCartaEditor } from '$lib/components/editor/carta';
  import type { Card } from '$lib/types/entities/card.types';
  import { Markdown } from 'carta-md';
  import '$lib/styles/card_editor.scss';

  export let card: Card;

  const markdownRenderer = createCartaEditor();
</script>

<div>
  <Markdown carta={markdownRenderer} bind:value={card.frontSide} />
</div>

My createCartaEditor() function is defined as:

import { FunctionSquare } from 'lucide-svelte';
import { code } from '@cartamd/plugin-code';
import { math } from '@cartamd/plugin-math';
import DOMPurify from 'dompurify';
import { Carta } from 'carta-md';

export function createCartaEditor() {
  const editor = new Carta({
    sanitizer: DOMPurify.sanitize,
    theme: 'material-theme-darker',
    extensions: [math(), code()],
  });

  editor.icons.push({
    id: 'formular',
    action: (input) => input.toggleSelectionSurrounding('$$'),
    component: FunctionSquare,
  });

  return editor;
}

[BearToCode]

Hi, I cannot tell much from just that screenshot, but it looks like the endline characters(\n) have been escaped, so everything became just one big line. Maybe it has something to do with how you upload/retrieve data from your database? Can you provide the string you are using?

Sidenote: you should create your own extension with the icon instead of using editor.icons.push.

[zFlxw]

Hey, sorry for the delay. I figured out that the line breaks are probably related to how the value is stored by the editor. This was pretty easy to fix, just by replacing all \\n with an actual line break (\n).

However, there is still an error with rendering KaTeX. The following markdown code:

Given the function\n$$ f(x)=\\dfrac{1}{2}x^2+5x $$,\ncalculate the zeros.

produces this outcome:

I did not escape the \dfrac by the way, that's just how the editor manipulated the value. I simply put the value field of the MarkdownEditor directly in the database.

EDIT: Ignore the above statement, I just did some further debugging and discovered that the escaping process actually happens in my backend. I'll do some further investigation on this.

[zFlxw]

The parsing was actually an error on my side, the backend did some weird stuff because I did not change the way it handles the input (I used another, completely different editor before, which used an object-based input, so my string was basically stringified again, which resulted in the escaping characters).

However, as you can see in the screenshot below, there still is an error with the parsing of KaTeX equations. I figured out that this might actually render correctly after some while, but it takes really long (up to several minutes).

Ok nevermind, I figured it out. Was again an issue on my side, I forgot to import the katex css file in the place I am rendering the markdown.