Markdown Formatting

import '@luminescent/ui/formatting';

This is a paragraph with regular text. It uses the secondary text color
for reduced eye strain during extended reading sessions.

[Visit the docs](https://example.com)

- First item
- Second item
- Third item
  - Nested item
  - Another nested item

1. First item
2. Second item
3. Third item
   1. Nested item
   2. Another nested item

The `className` prop accepts any valid CSS class.

```tsx
export function Component() {
  return <div>Hello World</div>;
}
```

> This is a blockquote.
> It can span multiple lines.

| Column 1 | Column 2 | Column 3 |
|----------|----------|----------|
| Row 1    | Data     | More     |
| Row 2    | Data     | More     |

---

![Alt text](/path/to/image.jpg)

# Getting Started

Welcome to **Luminescent UI**! This guide will help you get started.

## Installation

Install the package using your preferred package manager:

```bash
npm install @luminescent/ui

import '@luminescent/ui/formatting';

## Custom Styling

### Override Default Styles

You can override the formatting styles by defining your own CSS after importing:

```css
@import '@luminescent/ui/formatting';

/* Custom heading colors */
h1, h2, h3 {
  color: var(--color-luminescent-500);
}

/* Custom link styling */
a {
  text-decoration: underline;
  color: var(--color-lum-accent);
}

/* Custom code block background */
pre {
  background: var(--color-lum-input-bg);
}

<article className="prose">
  {/* Markdown content here */}
</article>

.prose h1 {
  /* Custom h1 styles */
}

.prose a {
  /* Custom link styles */
}

# Page Title (H1)

## Main Section (H2)

### Subsection (H3)

#### Detail (H4)

<!-- Good -->
[Read the installation guide](https://example.com/install)

<!-- Bad -->
[Click here](https://example.com/install)

```tsx
// TypeScript React code
```

```bash
# Shell commands
```

import '@luminescent/ui/formatting';
import { marked } from 'marked';

export function MarkdownContent({ content }: { content: string }) {
  const html = marked(content);
  
  return (
    <article 
      className="max-w-4xl mx-auto p-8"
      dangerouslySetInnerHTML={{ __html: html }}
    />
  );
}

import '@luminescent/ui/formatting';
import { component$ } from '@builder.io/qwik';

export default component$(({ content }: { content: string }) => {
  return (
    <article class="max-w-4xl mx-auto p-8">
      {/* Render markdown content */}
    </article>
  );
});

import '@luminescent/ui/formatting';

# My Article

Content goes here with automatic formatting applied.