Fixed rendered template values not displaying with proper code format…

[dheerajturaga]

This PR attempts to fix #50324 , #49064

The issue was caused by double JSON serialization in the frontend:

1. Backend already serializes template field values to strings via serialize_template_field()
2. Frontend was calling JSON.stringify() again on these already-stringified values
3. This resulted in escaped quotes and poor formatting

Core Fixes

• Fixed double serialization: Replaced JSON.stringify(value) with proper type checking in RenderedTemplates.tsx:97
  • Use string values directly if already strings
  • Only JSON stringify non-string values (objects/arrays)
• Added whitespace preservation: Replaced <Code> component with <SyntaxHighlighter> to preserve newlines and indentation

Syntax Highlighting Enhancement

• Integrated react-syntax-highlighter with automatic language detection:
  • JSON: Detects objects/arrays with valid JSON structure
  • YAML: Detects key-value pairs with colons and lists
  • SQL: Detects keywords like SELECT, INSERT, CREATE, etc.
  • Bash: Detects commands, shebangs, control structures, and operators
  • Text: Falls back to plain text for unrecognized content
• Theme support: Respects dark/light mode themes consistent with DAG code viewer
• Improved styling: Added proper spacing, border radius, and responsive alignment

[dheerajturaga]

Added line number support

[dheerajturaga]

@pierrejeambrun, @jscheffl thoughts on this one?

[jscheffl]

From reading code I really like the lean approach. Some matching nit from my side to make it a bit more safe.

Would like to have an UI expert second opinion though.

[jscheffl]

Can you separate this function out into a separate TS module file?

[jscheffl]

Detection safety:

• If a colon is matched it should be followed by a newline (":\n")
• Should we not rather use a lib like https://www.npmjs.com/package/yaml to test parsing after some basic heuristics before making a decision (similar to JSON)?

[jscheffl]

Would it might be better to match more than a single keyword, as SELECT will in almost all cases will be followed by a FROM and otherwise DROP will also usually be followed by a TABLE.