What is the recommended way to show diffs in a Forge App? Is there a way to adapt the UI Kit components?

I am using the GitLab API in my Forge App to retrieve merge requests and their diffs. I would like to format the diffs in a more readable way. I tried using the “Code” UI Kit component, however is there any way to make certain lines green/red? Or make the line numbering start from a number different than 1? Or even add an additional column of numbers (line numbering)?
For now I just used normal Text components in order to show it and Badges, because these are the only elements that can be green or red (but not inside a Code component).
Is there any recommended approach to show diffs in a Forge App for Jira? If Custom UI instead if UI Kit would be the only option, would that mean to use plain HTML elements to create something similar or is there a better approach? In Custom UI I know we can use Overview - Brand - Atlassian Design System, is there any way maybe for these to be adapted as mentioned before (e.g. a line green), if not possible for the UI Kit components?

Thank you in advance for your help!

Hi @RoxanaDogaru ,
Maybe using a library like diff - npm ?
You can customize the output format and then use UI Kit components.
Ex: diff - npm

Hi @BertrandDrouhard1 ,
just to give some more context I started developing the Forge app using this link https://developer.atlassian.com/platform/forge/build-a-hello-world-app-in-jira/.
Using the app created via the link with UI Kit does not work with generic HTML elements, but works as described below.
If I choose Custom UI instead I can use the package and HTML elements directly, however I wanted something similar to the GitLab UI, since the GitLab API returns something like “diff”: “@@ -1 +1 @@\ -Title\ +README”. So I don’t have the new/old content, but rather directly the diff. Am I overlooking something? Can it be helpful in this case, too?

I managed to format the diff content like in the picture below using Box and xcss elements that allow us to apply some CSS to Box components:
https://developer.atlassian.com/platform/forge/ui-kit/components/xcss/.


However I still cannot combine these with the Code component so that the code has a language dependent formatting.