How to color code blocks?

[juharris]

I would like code in "```" style blocks to be colored.
I have:

{
    "type": "TextBlock",
    "text": "```python\ndef foo(a=33):\n    return 3\n```"
}

and I want it to be colored, like GitHub does:

def foo(a=33):
    return 3\n

but it looks like this:

BTW here's the HTML for that:

<div class="ac-container ac-adaptiveCard" style="display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; flex: 0 0 auto; padding: 16px; margin: 0px; background-color: rgb(255, 255, 255);">
    <div class="ac-textBlock" style="overflow: hidden; font-family: &quot;Segoe UI&quot;, Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; color: rgb(37, 36, 36); font-weight: 400; text-align: start; line-height: 18.62px; white-space: nowrap; text-overflow: ellipsis; box-sizing: border-box; flex: 0 0 auto;">
        <pre style="margin-top: 0px; width: 100%; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0px;">
            <code class="language-python x-hidden-focus">def foo(a=33):
    return 3
            </code>
        </pre>
    </div>
</div>

I already tried removing the custom style attributes and playing with them and it didn't make a difference.

I see <code class="language-python ..., does the AC library have something to handle that class? Maybe I should be using another library too?
I'm mainly focusing on JS clients, but it would be good if we can find a solution that works in Teams too, hopefully that doesn't involve writing some custom stuff to use RichTextBlocks, unless there are already helper methods for various languages for that.

[jwoo-msft]

@juharris,

AdaptiveCard supports a subset of MarkDown, and it's intentional. You can refer to our doc for supported MarkDown features. code block is not one of them. If you can modify host app, you can use a 3rd party markdown library that supports the code block for JS renderer.

[juharris]

Thanks for getting back to me so quickly! It seems like there's nothing free out-of-the-box, but there are a few options for custom ways to get colors:

• When you control the client:
  • Use a library, like in the link jwoo-msft shared, use "markdown-it" + "highlight.js".
  • JS: do custom stuff such as registering a custom renderer for TextBlock, similar to https://learn.microsoft.com/en-us/adaptive-cards/sdk/rendering-cards/javascript/extensibility#custom-elements
• When you control how cards are written: Use RichTextBlocks and TextRuns. That will work for any client, but would involve lots of custom handling for different languages.

For JavaScript/TypeScript, I got this to work.

Easy Way

First, make sure you support Markdown in cards:

import MarkdownIt from 'markdown-it'

// For Markdown in Adaptive Cards.
window.markdownit = MarkdownIt

Now we'll use another library to color code:

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

Run:

highlight.highlightAll()

to update all your cards.

If you run it twice, then it will try to update cards that it already updated, and you'll get warnings. If you're dynamically adding cards to the page:

Explicit Way For Dynamically Adding Cards

import * as AdaptiveCards from 'adaptivecards'
import highlight from 'highlight.js'
import 'highlight.js/styles/github.css'
import MarkdownIt from 'markdown-it'

const markdownRenderer = new MarkdownIt({
	typographer: true,
	highlight: (source, language): string => {
		// https://highlightjs.readthedocs.io

		// Default to use default highlighting which is probably nothing.
		let result = ""

		if (language && hljs.getLanguage(language)) {
			try {
				result = hljs.highlight(source, { language }).value
			} catch (err) {
				console.warn("Error highlighting code block.", err)
			}
		}

		return result
	},
})

AdaptiveCards.AdaptiveCard.onProcessMarkdown = (text, result): void => {
	result.outputHtml = markdownRenderer.render(text)
	result.didProcess = true
}

[jwoo-msft]

we support Android/iOS/UWP/.NET, we can't just implement a feature for one platform.

[juharris]

I understand. Although, by default, no Markdown is supported at all in JavaScript, right?

[jwoo-msft]

please refer to my prior comment on Markdown.

[juharris]

That was the comment about intentionally only supporting a subset of Markdown?

My point is that not all platforms are equivalent right now since by default, the adaptivecards JS library doesn't support Markdown at all, right? I recall getting errors when I tried to render cards with Markdown but did not configure a Markdown renderer. Also, I don't think the Markdown rendering for ACs in Teams is consistent with other Markdown processors I've seen with regards to handling newlines as well as link indices at the end of the Markdown. Since things are not equal anyway, it would be nice to support Markdown by default in JS and then we might as well do code coloring while we're at it.

[jwoo-msft]

You can open a feature request issue for code coloring. The markdown issue goes across the multiple renderers not just the JS renderer. What you are basically asking is supporting MarkDown fully, and that's not something we are intended. You can create a feature request for it, though.

[qris]

You can now use CodeBlock instead of TextBlock for preformatted text with syntax highlighting in AdaptiveCards.

[juharris]

Thanks @qris! Looks like CodeBlock is just for Microsoft Teams?