Console Colorful Output in Quarto

Colorful console output makes it easier to distinguish between different types of messages (e.g., errors, warnings, and informational messages). It also enhances readability and provides a more engaging experience for readers. Imagine debugging a complex script and instantly spotting errors in red or warnings in yellow. With Quarto, you can bring this experience to your rendered documents.

Configuring Quarto for ANSI Colors

To enable ANSI-colored output in Quarto, you need to configure the document’s YAML header and include a JavaScript library (ansi_up) to render the colors correctly. Here’s how to do it:

Color constants python

In Python, you can define color constants for different colors using ANSI escape sequences.

CYAN = "\033[96m"
MAGENTA = "\033[95m"
BLUE = "\033[94m"
RESET = "\033[0m"

Step 1: Add the Required YAML Configuration

In your Quarto document’s YAML header, add the following configuration:

format:
  html:
    code-ansi: true
    ansi-colors:
      enable: true
    include-in-header:
      - text: |
          <script type="module">
            import { AnsiUp } from "https://cdn.jsdelivr.net/npm/ansi_up@6.0.2/+esm";
            document.addEventListener("DOMContentLoaded", function () {
              const ansiUp = new AnsiUp({ escape_for_html: false });
              const selector = '[data-class-output="code-rendered"] p';
              const codeOutputs = document.querySelectorAll(selector);
              const LINE_BREAKS = ["[BR", "<br />"]

              codeOutputs.forEach((output) => {
                const lines = output.innerText.split(LINE_BREAKS[0]);
                let processedLines = lines.map((line) => ansiUp.ansi_to_html(line));
                processedLines = processedLines.map(line => line.replace(/:::$/g, ''));
                output.innerHTML = processedLines.join(LINE_BREAKS[1]);
              });
            });
          </script>

Step 2: Use class-output for Code Blocks

To render colorful output, use the class-output attribute in your code blocks. For example:

print(f"{CYAN}This text is cyan!{RESET}")
print(f"{MAGENTA}This text is magenta!{RESET}")
print(f"{BLUE}This text is blue!{RESET}")

This text is cyan! This text is magenta! This text is blue!

Handling Line Breaks

To correctly handle line breaks, use a custom line break character in your code (e.g., [BR) and render it in the header section using JavaScript.

See: ansi_up issue #73

Example

LINE_BREAK = "[BR"
print(f"{CYAN}This text is cyan!{RESET}", end=LINE_BREAK)
print(f"{MAGENTA}This text is magenta!{RESET}", end=LINE_BREAK)
print(f"{BLUE}This text is blue!{RESET}", end=LINE_BREAK)

This text is cyan![BRThis text is magenta![BRThis text is blue![BR:::

The JavaScript snippet in the header processes these custom line breaks and converts them into HTML <br /> tags:

const LINE_BREAKS = ["[BR", "<br />"]
codeOutputs.forEach((output) => {
  const lines = output.innerText.split(LINE_BREAKS[0]);
  let processedLines = lines.map((line) => ansiUp.ansi_to_html(line));
  processedLines = processedLines.map(line => line.replace(/:::$/g, ''));
  output.innerHTML = processedLines.join(LINE_BREAKS[1]);
});

How It Works

1. code-ansi: true: This enables ANSI color support in Quarto.
2. ansi_up Library: The JavaScript library ansi_up converts ANSI escape codes into HTML spans with appropriate styles.
3. class-output: code-rendered: This ensures that the output is processed by ansi_up and rendered with colors.

Conclusion

By configuring Quarto to support ANSI-colored output, you can create more engaging and readable documents. Whether you’re showcasing terminal workflows, debugging logs, or simply adding visual flair, colorful console output is a powerful tool in your Quarto arsenal.