feat: Improve markdown typography #2179

[marek-mihok]

The PR fulfills these requirements: (check all the apply)

• It's submitted to the main branch.
• When resolving a specific issue, it's referenced in the PR's title (e.g. feat: Add a button #xxx, where "xxx" is the issue number).
• When resolving a specific issue, the PR description includes Closes #xxx, where "xxx" is the issue number.
• If changes were made to ui folder, unit tests (make test) still pass.
• New/updated tests are included

---

This change allows using compact=False attribute to toggle on a modern, well-structured and reader-friendly markdown look!

Screen.Recording.2023-11-14.at.10.32.24.mov

Updated API is as follows:

/**
 * Create a card that renders Markdown content.
 *
 * Github-flavored markdown is supported.
 * HTML markup is allowed in markdown content.
 * URLs, if found, are displayed as hyperlinks.
 * Copyright, reserved, trademark, quotes, etc. are replaced with language-neutral symbols.
 * :icon "InsertTextBox"
 */
interface State {
  /**
   * The title for this card.
   * :t "textbox"
   * :value "Untitled Content"
   **/
  title: S
  /**
   * The markdown content. Supports Github Flavored Markdown (GFM): https://guides.github.com/features/mastering-markdown/
   * :t "textarea"
   * :value "Hello, World!"
   **/
  content: S
  /**
   * Additional data for the card.
   **/
  data?: Rec
  /**
 * In compact mode markdown content takes less screen space. Defaults to True.
 **/
  compact?: B
}

In addition, this PR fixes an issue where there was a conflict when using multiple markdown cards on the same page.

Closes #2179

[mturoci]

@marek-mihok there is no need to add the whole Tailwind. The issue talks about adding only styles from https://tailwindcss.com/docs/typography-plugin.

[mturoci]

Thanks @marek-mihok!

• Can you please add an example with all the markdown elements for a side by side comparison?
• Seems like the new styles are pretty spacious. Let's add compact attribute defaulting to true to toggle this behavior.
• Can the added CSS be loaded dynamically (only when markdown card is actually used)?

[marek-mihok]

• Can you please add an example with all the markdown elements for a side by side comparison?

I've updated the existing example with side by side comparison. Please let me know if it is fine.

• Seems like the new styles are pretty spacious. Let's add compact attribute defaulting to true to toggle this behavior.

Done ✅

• Can the added CSS be loaded dynamically (only when markdown card is actually used)?

Done ✅

@mturoci since this is a visual change, do we need tests checking if proper styling is applied when compact=False?

[mturoci]

Thanks @marek-mihok.

since this is a visual change, do we need tests checking if proper styling is applied when compact=False?

You already added one in markdown.md#compact.