Summary

When sharing code snippets in OpenClaw's WebChat interface, code blocks appear as plain monospace text without any syntax highlighting. This makes it difficult to quickly read and understand code structure, especially for languages like C++ with complex syntax. Other platforms (Discord, GitHub, etc.) automatically highlight code, so this feels like a missing quality-of-life feature.

Proposed solution

Integrate a syntax highlighting library (like highlight.js) into the WebChat UI's Markdown renderer. Specifically:

1. Add highlight.js as a dependency in /opt/openclaw/ui/package.json
2. Update the Markdown configuration in /opt/openclaw/ui/src/ui/markdown.ts to enable syntax highlighting:

import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

marked.setOptions({
  gfm: true,
  breaks: true,
  highlight: function(code, lang) {
    if (lang && hljs.getLanguage(lang)) {
      return hljs.highlight(code, { language: lang }).value;
    }
    return hljs.highlightAuto(code).value;
  }
});

1. Include a CSS theme that matches OpenClaw's design aesthetic

This would automatically highlight code blocks based on the specified language (e.g., ```cpp) or auto-detect the language when not specified.

Alternatives considered

• Prism.js: Another popular syntax highlighter, but highlight.js has better auto-detection and is lighter weight
• Server-side highlighting: Could render highlighted HTML on the backend, but client-side is simpler and more maintainable
• No highlighting: Keep current behavior, but this provides poor user experience for code-heavy conversations

Additional context

• Related files: /opt/openclaw/ui/src/ui/markdown.ts (current Markdown renderer)
• Example of current behavior: C++ code like std::vector<int> nums; appears in plain black/white text
• User impact: This would benefit all developers who use OpenClaw's web interface for code collaboration or debugging
• Similar platforms: Discord, Slack, GitHub, and VS Code all provide syntax highlighting by default