Add {% style %} Markdoc tag for colored text and backgrounds

[Copilot]

Workflow query responses are limited to structural markdown formatting. This adds a {% style %} Markdoc tag to support inline text color and background color, enabling richer status displays and visual hierarchy without custom UIs.

Changes

• New component (markdoc-components/style/): Renders a <span> with inline color/backgroundColor styles. Includes CSS color value validation (named colors, hex, rgb/rgba, hsl/hsla) to reject unexpected patterns.
• Schema registration: Added style tag to markdoc-schema.ts and Style to the component registry.
• Docs: Added ## Styled Text section to markdown-guide.ts with color, background, combined, and nesting examples.
• Tests: 4 new cases covering color-only, bg-only, combined, and nested tags.

Syntax

{% style color="red" %}error: something failed{% /style %}
{% style bg="yellow" %}highlighted{% /style %}
{% style color="white" bg="blue" %}white on blue{% /style %}

{% style color="blue" %}
  outer, {% style color="red" %}inner red{% /style %}, back to blue
{% /style %}

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Feature Request] Add style tag for colored text and backgrounds in markdown</issue_title>
<issue_description>### Summary

Add a new Markdoc tag that allows workflow query responses to include styled text with custom colors and background highlights.

Use Cases & Why This Would Be Useful

Workflow queries often return diagnostic or status information where visual hierarchy matters. Currently, markdown output is limited to structural formatting (headings, lists, bold, italic). Adding color support would allow workflow authors to create more expressive and immediately scannable query responses without needing to build custom UIs.

• Status indicators: Highlight critical information in workflow diagnostics (e.g., errors in red, warnings in yellow)
• Visual grouping: Use background colors to visually distinguish different sections of query output
• Emphasis: Draw attention to important values or state changes beyond what bold/italic can convey
• Dashboards: Create more visually informative workflow status displays directly from query responses

Proposed Syntax

{% style color="red" %}red text{% /style %}
{% style bg="yellow" %}highlighted text{% /style %}
{% style color="white" bg="blue" %}white text on blue background{% /style %}

Nesting Support (Nice to Have)

Tags can be nested and follow standard CSS cascading behavior:

{% style color="blue" %}
  This is blue text, 
  {% style color="red" %}this part is red{% /style %}, 
  and back to blue.
{% /style %}

{% style color="blue" %}
  Blue text with {% style bg="yellow" %}yellow highlight (still blue text){% /style %}
{% /style %}

</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes [Feature Request] Add style tag for colored text and backgrounds in markdown #1218

---

⌨️ Start Copilot coding agent tasks without leaving your editor — available in VS Code, Visual Studio, JetBrains IDEs and Eclipse.

[gitar-bot]

💡 Security: CSS color validation regex is overly permissive with .*

The isValidCssColor regex uses .* inside the rgb()/rgba()/hsl()/hsla() patterns, which matches arbitrary content between the parentheses. For example, rgb(0,0,0;injected-property:value) would pass validation.

In practice, React's style prop sets values via the DOM element.style API (not innerHTML), so this can't be exploited for CSS injection. However, since the function is explicitly documented as a security validation layer, it should actually enforce valid values to match its stated purpose and serve as defense-in-depth.

Suggested fix:

function isValidCssColor(value: string): boolean {
  return /^(#[0-9a-fA-F]{3,8}|rgba?\([\d\s,.%]+\)|hsla?\([\d\s,.%]+\)|[a-zA-Z]+)$/.test(
    value.trim()
  );
}

_{Was this helpful? React with 👍 / 👎 | Reply gitar fix to apply this suggestion}

[gitar-bot]

Code Review 👍 Approved with suggestions 0 resolved / 1 findings

Adds CSS style tag support for colored text and backgrounds in markdown rendering. Consider refining the isValidCssColor regex to use stricter patterns instead of .* to prevent invalid color values from passing validation.

💡 Security: CSS color validation regex is overly permissive with .*

📄 src/components/markdown/markdoc-components/style/style.tsx:6-8

The isValidCssColor regex uses .* inside the rgb()/rgba()/hsl()/hsla() patterns, which matches arbitrary content between the parentheses. For example, rgb(0,0,0;injected-property:value) would pass validation.

In practice, React's style prop sets values via the DOM element.style API (not innerHTML), so this can't be exploited for CSS injection. However, since the function is explicitly documented as a security validation layer, it should actually enforce valid values to match its stated purpose and serve as defense-in-depth.

Suggested fix

function isValidCssColor(value: string): boolean {
  return /^(#[0-9a-fA-F]{3,8}|rgba?\([\d\s,.%]+\)|hsla?\([\d\s,.%]+\)|[a-zA-Z]+)$/.test(
    value.trim()
  );
}

🤖 Prompt for agents

Code Review: Adds CSS style tag support for colored text and backgrounds in markdown rendering. Consider refining the `isValidCssColor` regex to use stricter patterns instead of `.*` to prevent invalid color values from passing validation.

1. 💡 Security: CSS color validation regex is overly permissive with `.*`
   Files: src/components/markdown/markdoc-components/style/style.tsx:6-8

   The `isValidCssColor` regex uses `.*` inside the `rgb()/rgba()/hsl()/hsla()` patterns, which matches arbitrary content between the parentheses. For example, `rgb(0,0,0;injected-property:value)` would pass validation.
   
   In practice, React's `style` prop sets values via the DOM `element.style` API (not `innerHTML`), so this can't be exploited for CSS injection. However, since the function is explicitly documented as a security validation layer, it should actually enforce valid values to match its stated purpose and serve as defense-in-depth.

   Suggested fix:
   function isValidCssColor(value: string): boolean {
     return /^(#[0-9a-fA-F]{3,8}|rgba?\([\d\s,.%]+\)|hsla?\([\d\s,.%]+\)|[a-zA-Z]+)$/.test(
       value.trim()
     );
   }

Options

Auto-apply is off → Gitar will not commit updates to this branch.
Display: compact → Showing less information.

Comment with these commands to change:

Auto-apply	Compact
gitar auto-apply:on	gitar display:verbose

_{Was this helpful? React with 👍 / 👎 | Gitar}