Formatting

LLMs generally output text. But you can format the output in a variety of ways.

• Markdown
• HTML
• Mermaid diagrams

Quick start: Add this to your prompt to improve formatting.

Format as Markdown. When required:
- Use headings for sections, bullets to enumerate, tables to summarize, bold to emphasize.
- Use <ins> and <del> tags to render insertions and deletions.
- Use <details> and <summary> tags for collapsible sections.
- Use Mermaid to render diagrams. Use |...| not |...|>

Simple formatting with Markdown

LLMs can render text in Markdown like this:

- This text is **bold**.
- This is *italic*.
- This is ~strikethrough~.
- This is a [link](https://example.com/).

| This is a table. | Another column |
| ---------------- | -------------- |
| Row 2, cell 1    | Row 2, cell 2  |
| Row 3, cell 1    | Row 3, cell 2  |

On LLM Foundry, the output is formatted as Markdown like this:

Here's how you can encourage LLMs to format the output as Markdown

1. Ask for Markdown: Clearly instruct the LLM to use specific Markdown elements. For example, request: "Provide the information using Markdown headers and bullet points."
2. Define a Structure: Mention the heading names, heading levels, list types (numbered, bulleted), table columns, and other formatting details in your prompt.
3. Provide Examples: Include a sample of the desired Markdown format in your prompt. This guides the LLM to replicate the structure.

For example:

Provide a comprehensive overview of the water cycle.
Use Markdown to structure the output.
Break the output into sections for Process, Description, and Significance.
Use bullets to enumerate steps or components.
Summarize the process, description, and significance as a table at the end.

**Example**:

# The Water Cycle

## Introduction

The water cycle describes the movement of water on the Earth.

## Main Processes

### Evaporation

- **Definition**: ...
- **Key Factors**: ...

### Condensation

- **Definition**: ...
- **Occurrence**: ...

## Summary Table

| Process      | Description | Significance |
| ------------ | ----------- | ------------ |
| Evaporation  | ...         | ...          |
| Condensation | ...         | ...          |

Draw diagrams with Mermaid

Markdown supports plugins that add extra features. This includes Mermaid, a text to diagram renderer. For example, this prompt:

Provide a comprehensive overview of the water cycle.
Use Mermaid to render diagrams. Use |...| not |...|>

Note: Use |...| not |...|> is required for some weaker models.

... generates this text:

graph TD;
    A[Ocean/Lakes/Rivers] -->|Evaporation| B[Water Vapor];
    B -->|Condensation| C[Clouds];
    C -->|Precipitation| D[Rain/Snow];
    D -->|Infiltration| E[Groundwater];
    D -->|Runoff| A;
    E -->|Groundwater Flow| A;
    B -->|Transpiration| F[Plants];
    F -->|Evaporation| B;

... that can render this diagram:

Rich formatting with HTML

LLMs can generate HTML that is rendered by the browser. Just prompt it to render as HTML. This can generate almost any rich text you need, including images, video, interaction, animation, etc.

You can use specific tags to guide it. Here are a few examples.

Redlining

Mark insertions and deletions with <ins> and <del> tags:

Correct spelling and grammar errors, marking changes inline with the <ins> and <del> tag.

I cill come to brekfast ctomorow by 9 am shark.

... renders this:

Collapsible sections

Here is a prompt that generates collapsible sections using <details> and <summary> tags:

Provide a comprehensive overview of the water cycle.
Use HTML tags to format the output. Summarize sections using <details> and <summary> tags

This generates output like this:

<h1>The Water Cycle</h1>

<p>The water cycle, also known as the hydrologic cycle, ....</p>

<details>
  <summary><b>Evaporation</b></summary>
  <p>Evaporation is the process where ...</p>
</details>

<details>
  <summary><b>Transpiration</b></summary>
  <p>Plants also play a role in the ...</p>
</details>

<details>
  <summary><b>Condensation</b></summary>
  <p>As water vapor rises into the ...</p>
</details>

... which renders like this:

Export formatted text

On the playground, you can:

1. Copy the output as rich text and paste it anywhere
2. Download the output as a Word Document (.docx)
3. Download the output as Markdown (.md)