🎨 QuillKit - MathML Color Rendering Demo

This demo shows that MathML color attributes (mathcolor and mathbackground) are now properly rendered in the editor.

⚠️ API Key Required: QuillKit requires a valid API key to function. This demo uses a demo API key. For your own projects, you'll need to obtain an API key from the QuillKit service.

What was the issue?

MathML elements support color attributes like mathcolor (for text color) and mathbackground (for background color). However, these attributes weren't being rendered correctly in the editor because browsers don't natively apply these attributes as CSS styles.

The Solution

We implemented a JavaScript-based solution that:

  1. Detects MathML elements with mathcolor and mathbackground attributes
  2. Converts these attributes to inline CSS styles (color and background-color)
  3. Preserves the original MathML attributes for standards compliance
  4. Applies colors automatically when content is loaded or inserted

Live Editor Demo

The editor below contains MathML with color attributes. The colors should be visible:

Test Cases

Test 1: Basic mathcolor (red text)

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="red">x</mi>
  <mo>=</mo>
  <mn>5</mn>
</math>

Expected: The variable x should appear in red.

Test 2: mathbackground (yellow background)

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathbackground="yellow">y</mi>
  <mo>=</mo>
  <mn>10</mn>
</math>

Expected: The variable y should have a yellow background.

Test 3: Multiple colors

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="red">a</mi>
  <mo>+</mo>
  <mi mathcolor="blue">b</mi>
  <mo>=</mo>
  <mi mathcolor="green">c</mi>
</math>

Expected: a (red), b (blue), c (green).

Test 4: Hex colors

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="#FF5733">x</mi>
  <mo>=</mo>
  <mn mathcolor="#33C1FF">42</mn>
</math>

Expected: Custom hex colors applied to variables and numbers.

Test 5: Both color and background

<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mi mathcolor="white" mathbackground="darkblue">important</mi>
</math>

Expected: White text on dark blue background (highlighted effect).

✅ Implementation Details:

How to Use

  1. Click the "ML" button in the toolbar to insert MathML
  2. Add color attributes to your MathML elements:
    • mathcolor="red" for text color
    • mathbackground="yellow" for background color
  3. The colors will automatically be applied when you insert or load the content