# Markdown

Renders a Markdown string as themed Fluent content, including code, tables, and math.

## Default

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--default.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

// `Markdown` renders a Markdown string as themed Fluent UI content. Fenced code
// blocks render through CoreAI's `CodeBlock`; links through Fluent's `Link`.
const defaultContent = `
# The Power of Large Language Models (LLMs)

Large Language Models (LLMs) are revolutionizing the field of artificial intelligence. In this article, we'll explore their **capabilities**, _limitations_, and why they're _so_ important.

---

## What Are LLMs?

> "A Large Language Model is a type of AI trained on vast amounts of text to understand and generate human-like language."  
> — *AI Researcher, 2023*

LLMs, such as **GPT-4** and **PaLM**, use deep learning to process and generate text.

---

## Key Features

- **Text Generation**
- _Summarization_
- \`Code completion\`
- **Translation**
- *Conversational AI*

### Example Table

| Model   | Parameters | Year |
|---------|:----------:|-----:|
| GPT-3   | 175B       | 2020 |
| GPT-4   | 1T+        | 2023 |
| PaLM    | 540B       | 2022 |

---

## Sample Code

\`\`\`python
from transformers import pipeline
generator = pipeline("text-generation", model="gpt-4")
print(generator("LLMs are transforming", max_length=20))
\`\`\`

---

## Blockquote

> LLMs are not just tools; they are collaborators in creativity and productivity.

---

## Links

Learn more at [Microsoft Foundry](https://ai.azure.com/nextgen/) or [Hugging Face](https://huggingface.co/).

---

## Strikethrough

The original n-gram approach is ~~the state of the art~~ now largely obsolete for general language tasks.

---

## Image

![Diagram of a transformer-based language model](https://placehold.co/640x160?text=Transformer+Architecture)

---

## Text with footnotes

LLMs learn statistical patterns from massive text corpora[^corpus] and are often refined with human feedback[^rlhf].

[^corpus]: A *corpus* is a large, structured collection of text used for training.
[^rlhf]: Reinforcement Learning from Human Feedback — using human preferences to fine-tune model behavior.

---

## Conclusion

LLMs are **changing the world**. Whether you're a developer, writer, or researcher, _embracing_ LLMs can unlock new possibilities.

---

*Happy experimenting!* 🚀
`;

export const Default = (): JSXElement => <Markdown content={defaultContent}/>;

export default Default;
```

## API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. `?` means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

### Markdown API

Render a Markdown string as themed Fluent UI content.

```ts
interface MarkdownProps {
  /**
   * Tag names to allow (default: all tag names);
   * cannot combine w/ `disallowedElements`.
   */
  allowedElements?: readonly string[] | null;

  /**
   * Filter elements (optional);
   * `allowedElements` / `disallowedElements` is used first.
   */
  allowElement?: AllowElement | null;

  /**
   * Wrap in a `div` with this class name.
   * Additional class applied to the wrapping element.
   */
  className?: string;

  /**
   * Override or extend the default element renderers.
   */
  components?: Components;

  /**
   * The Markdown source to render.
   */
  content: string;

  /**
   * Tag names to disallow (default: `[]`);
   * cannot combine w/ `allowedElements`.
   */
  disallowedElements?: readonly string[] | null;

  /**
   * List of rehype plugins to use.
   */
  rehypePlugins?: PluggableList | null;

  /**
   * List of remark plugins to use.
   */
  remarkPlugins?: PluggableList | null;

  /**
   * Options to pass through to `remark-rehype`.
   */
  remarkRehypeOptions?: Readonly<Options> | null;

  /**
   * Ignore HTML in markdown completely (default: `false`).
   */
  skipHtml?: boolean | null;

  /**
   * Extract (unwrap) what’s in disallowed elements (default: `false`);
   * normally when say `strong` is not allowed, it and it’s children are dropped,
   * with `unwrapDisallowed` the element itself is replaced by its children.
   */
  unwrapDisallowed?: boolean | null;

  /**
   * Change URLs (default: `defaultUrlTransform`)
   */
  urlTransform?: UrlTransform | null;
}
```

## Implementation

CoreAI 0.12.0; Fluent 9.74.9.

[Setup and dependencies](/coreai-design-system/guides/Package.md).

Import components from `@coreai-ds/react-components`. CoreAI guidance above takes precedence over API demonstration examples.

## Anchor Links

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--anchor-links.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const anchorLinks = `
# Table of Contents
- [Section 1](#section-1)
- [Section 2](#section-2)
- [Section 3](#section-3-with-code)

## Section 1
This is the first section. [Back to top](#table-of-contents)

## Section 2
This is the second section. [Back to top](#table-of-contents)

## **Section 3** with \`code\`
This is the third section. [Back to top](#table-of-contents)
`;

export const AnchorLinks = (): JSXElement => <Markdown content={anchorLinks}/>;

export default AnchorLinks;
```

## Code Block

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--code-block.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const codeBlock = `
Inline code: \`console.log('Hello, world!');\` example.

\`\`\`typescript
function greet(name: string): string {
  return 'Hello, ' + name;
}
\`\`\`

\`\`\`
Code without language
or syntax highlighting.
\`\`\`
`;

export const CodeBlock = (): JSXElement => <Markdown content={codeBlock}/>;

export default CodeBlock;
```

## Formatting

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--formatting.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const bulletedListFormatting = `## Flat spaced list
This is a regular bulleted list without spacing between items.

- List item 1
- List item 2
- List item 3

1. First ordered item
    1. Sub-item 1
    2. Sub-item 2
2. Second ordered item
    - Sub-item 1
    - Sub-item 2
3. Third ordered item

---

## Paragraph spacing list
This is a spaced list with that should be rendered as paragraphs between items.

- Paragraph spacing list item 1

- Paragraph spacing list item 2

- Paragraph spacing list item 3

---

## Mixed paragraph list with sub-items
This is a spaced list with that should be rendered as paragraphs between primary items and not between sub-items.

1. **Planning the Presentation**
   - Identify your audience.
     - Who are they?
     - What do they care about?
   - Define your objectives.

2. **Designing Your Slides**

   1. Choose a professional template.
   2. Follow design principles:
      - Use consistent fonts and colors.
      - Avoid overcrowding slides with text.

By following these steps, you can ensure a smooth and professional presentation that leaves a lasting impact!`;

const formatting = `
## Inline Text Formatting
This is a paragraph with **bold**, *italic*, ***bold-italic***, and \`inline code\` text.

---

${bulletedListFormatting}

---

## Raw markdown of above lists 
\`\`\`markdown
${bulletedListFormatting}
\`\`\`
`;

export const Formatting = (): JSXElement => <Markdown content={formatting}/>;

export default Formatting;
```

## Headings

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--headings.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const headings = `
# Heading 1
## Heading 2
### Heading 3
#### Heading 4
##### Heading 5
###### Heading 6
`;

export const Headings = (): JSXElement => <Markdown content={headings}/>;

export default Headings;
```

## Large Example

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--large-example.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const largeExample = `
#### Create Agent with Function Call

You can enhance your Agents by defining callback functions as function tools. These can be provided to \`createAgent\` via the combination of \`tools\` and \`toolResources\`. Only the function definitions and descriptions are provided to \`createAgent\`, without the implementations. The \`Run\` or \`event handler of stream\` will raise a \`requires_action\` status based on the function definitions. Your code must handle this status and call the appropriate functions.

Here is an example:

\`\`\`ts
import {
  FunctionToolDefinition,
  ToolUtility,
  RequiredToolCallOutput,
  FunctionToolDefinitionOutput,
  ToolOutput,
} from "@azure/ai-projects";

class FunctionToolExecutor {
  private functionTools: {
    func: Function;
    definition: FunctionToolDefinition;
  }[];
  constructor() {
    this.functionTools = [
      {
        func: this.getUserFavoriteCity,
        ...ToolUtility.createFunctionTool({
          name: "getUserFavoriteCity",
          description: "Gets the user's favorite city.",
          parameters: {},
        }),
      },
      {
        func: this.getCityNickname,
        ...ToolUtility.createFunctionTool({
          name: "getCityNickname",
          description: "Gets the nickname of a city, e.g. 'LA' for 'Los Angeles, CA'.",
          parameters: {
            type: "object",
            properties: {
              location: { type: "string", description: "The city and state, e.g. Seattle, Wa" },
            },
          },
        }),
      },
      {
        func: this.getWeather,
        ...ToolUtility.createFunctionTool({
          name: "getWeather",
          description: "Gets the weather for a location.",
          parameters: {
            type: "object",
            properties: {
              location: { type: "string", description: "The city and state, e.g. Seattle, Wa" },
              unit: { type: "string", enum: ["c", "f"] },
            },
          },
        }),
      },
    ];
  }
  private getUserFavoriteCity(): {} {
    return { location: "Seattle, WA" };
  }
  private getCityNickname(location: string): {} {
    return { nickname: "The Emerald City" };
  }
  private getWeather(location: string, unit: string): {} {
    return { weather: unit === "f" ? "72f" : "22c" };
  }
  public invokeTool(
    toolCall: RequiredToolCallOutput & FunctionToolDefinitionOutput,
  ): ToolOutput | undefined {
    console.log(\`Function tool call - \${toolCall.function.name}\`);
    const args = [];
    if (toolCall.function.parameters) {
      try {
        const params = JSON.parse(toolCall.function.parameters);
        for (const key in params) {
          if (Object.prototype.hasOwnProperty.call(params, key)) {
            args.push(params[key]);
          }
        }
      } catch (error) {
        console.error(\`Failed to parse parameters: \${toolCall.function.parameters}\`, error);
        return undefined;
      }
    }
    const result = this.functionTools
      .find((tool) => tool.definition.function.name === toolCall.function.name)
      ?.func(...args);
    return result
      ? {
          toolCallId: toolCall.id,
          output: JSON.stringify(result),
        }
      : undefined;
  }
  public getFunctionDefinitions(): FunctionToolDefinition[] {
    return this.functionTools.map((tool) => {
      return tool.definition;
    });
  }
}
const functionToolExecutor = new FunctionToolExecutor();
const functionTools = functionToolExecutor.getFunctionDefinitions();
const agent = await client.agents.createAgent("gpt-4o", {
  name: "my-agent",
  instructions:
    "You are a weather bot. Use the provided functions to help answer questions. Customize your responses to the user's preferences as much as possible and use friendly nicknames for cities whenever possible.",
  tools: functionTools,
});
console.log(\`Created agent, agent ID: \${agent.id}\`);
\`\`\`
`;

export const LargeExample = (): JSXElement => <Markdown content={largeExample}/>;

export default LargeExample;
```

## Links

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--links.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const links = `
[Microsoft](https://www.microsoft.com)

[GitHub](https://github.com)
`;

export const Links = (): JSXElement => <Markdown content={links}/>;

export default Links;
```

## Tables

Source: CoreAI.

[Download source](/coreai-design-system/source/examples/components-markdown--tables.tsx)

```tsx
// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import type { JSXElement } from "@coreai-ds/react-components";
import { Markdown } from "@coreai-ds/react-components";
import * as React from 'react';

const tables = `
| Model   | Parameters | Year | Open Source | Training Data Size (TB) | Avg. Response Time (ms) | Languages Supported | Notable Use Case         | Accuracy (%) | License      |
|---------|:----------:|-----:|:-----------:|:-----------------------:|:----------------------:|:-------------------:|:-------------------------|:------------:|-------------:|
| GPT-3   | 175B       | 2020 |     No      |          45             |         120            |        20+          | Chatbots                 |     85       | Proprietary  |
| GPT-4   | 1T+        | 2023 |     No      |         100+            |         90             |        50+          | Code Generation          |     89       | Proprietary  |
| PaLM    | 540B       | 2022 |     No      |          780            |         110            |        100+         | Multilingual Translation |     87       | Proprietary  |
| LLaMA   | 65B        | 2023 |    Yes      |          1.4            |         150            |        20+          | Research                 |     82       | Open Source  |
| Falcon  | 40B        | 2023 |    Yes      |          3.5            |         130            |        10+          | Text Summarization       |     80       | Open Source  |
| BLOOM   | 176B       | 2022 |    Yes      |          1.6            |         140            |        40+          | Open Science             |     78       | Open Source  |
`;

export const Tables = (): JSXElement => <Markdown content={tables}/>;

export default Tables;
```