How to get diff colors in custom tool output

[dwood023]

Question

Using the custom tool helper, you can only return text (not other metadata I see related to the output of built-in tools like edit and write).

If this text contains markdown, it seems to get rendered successfully by opencode, allowing features such as bold or italic text to be outputted by custom tools. 😄

However, I have been trying to render output with colors, such as an embedded "diff":

import { tool } from "@opencode-ai/plugin";

export default tool({
	description: "Test if colored output works in custom tools",
	args: {},
	async execute(args) {
		const diffMarkdown = `\`\`\`diff
- This is a removed line
+ This is a new line
\`\`\``;
		return `Does **this** render in bold?\n\n${diffMarkdown}`;
	},
});

In the output, while the bold text renders correctly, the diff section is coloured uniformly, suggesting syntax highlighting doesn't work.

However, it actually works when I output a snippet of typescript.

import { tool } from "@opencode-ai/plugin";

export default tool({
	description: "Test if colored output works in custom tools",
	args: {},
	async execute(args) {
		const tsCode = `\`\`\`ts
function hello() {
  console.log("Hello");
}
\`\`\``;
		return `Does **this** render in bold?\n\n${tsCode}`;
	},
});

I tried to figure out exactly how syntax highlighting works in opencode, and found some packages such as @pierre/diffs (and underlying it, Shiki?) may be involved. I can't figure out how to color the output, by any means. My use case is basically to run some test-like scripts through an opencode tool and have them color their outputs in green and red for easy readability by a human.