Add support to popular syntax highlighting libraries

[sethwenzel]

Is your feature request related to a problem? Please describe.
When viewing a bicep file in AzDo Repos, can we get colorization support?

Describe the solution you'd like
Similar to other languages, can we get colorization support in Azure DevOps Repos?

Current Status:

Edited by @anthony-c-martin on 9/3/21

• TextMate: Available
• GitHub Linguist: Done!
• HighlightJS: Available as 3rd party grammar (note they don't take contributions to the main project any more)
• Monarch: Available
• Monaco-Languages: Available
• PrismJS: Available - credit goes to @johnnyreilly and @RunDevelopment
• Azure DevOps: Available

[alex-frankel]

@anthony-c-martin I think you had mentioned that there is a standard package that we can be a part of to get syntax highlighting in github repos, etc. Do you know if that also works for DevOps repos?

[anthony-c-martin]

GitHub uses highlightjs
DevOps uses monaco

Looks like Monaco take contributions here. We may also need to speak to the DevOps team to understand whether those are picked up by DevOps or if there's a process there.

We may also want to support linguist
And there's also prismjs

[alex-frankel]

When we are ready to implement, we should reach out to DevOps Repos team to confirm requirements

[sebader]

I believe linguist is the one you need to be added to to light up on github.com. Now that bicep hopefully gets more and more traction, I would vote to prioritize this :) It's little things that this that will help people adopt it

[johnnyreilly]

Docusaurus uses PrismJS. I raised an issue for support there when writing a Bicep blog post at the weekend:

PrismJS/prism#2816

[anthony-c-martin]

I started on a prototype for TextMate (used by Linguist for GitHub syntax highlighting, and Monaco for Azure DevOps syntax highlighting).

Here's where I've put it for now: https://github.com/anthony-c-martin/bicep-textmate. Contributions are very welcome!

[slavizh]

@anthony-c-martin Is there any timeline for this to be available in DevOps. I do not see this listed in https://docs.microsoft.com/en-us/azure/devops/release-notes/features-timeline

[anthony-c-martin]

@anthony-c-martin Is there any timeline for this to be available in DevOps. I do not see this listed in https://docs.microsoft.com/en-us/azure/devops/release-notes/features-timeline

Monaco editor version 0.24 and up contain the Bicep grammar (https://www.npmjs.com/package/monaco-editor). Azure DevOps is still using version 0.20 (https://www.npmjs.com/package/vss-monaco-editor) - I'm following up internally with the team that manages the process of incorporating the latest version, but don't yet have a time frame to share. I'll post here when I have something concrete!

[anthony-c-martin]

@slavizh - I've had confirmation from the DevOps team that it's been incorporated into the current release, and have seen a screenshot of Bicep highlighting working in their test environment! ETA for complete roll out is 3-5 weeks.

[johnnyreilly]

Prismjs now has support: https://blog.johnnyreilly.com/2021/08/19/bicep-syntax-highlighting-with-prismjs

Not released yet but should be this month

[anthony-c-martin]

Prismjs now has support: https://blog.johnnyreilly.com/2021/08/19/bicep-syntax-highlighting-with-prismjs

Not released yet but should be this month

NICE! Thank you so much for contributing this, that's truly awesome!!! 🎉🎉🎉

[johnnyreilly]

Happy to say that Bicep support in Prism.JS has been released! https://github.com/PrismJS/prism/releases/tag/v1.25.0

Hopefully support will be available in Shiki in future: shikijs/shiki#239

[anthony-c-martin]

@anthony-c-martin Is there any timeline for this to be available in DevOps. I do not see this listed in https://docs.microsoft.com/en-us/azure/devops/release-notes/features-timeline

@slavizh - Looks like this has been deployed now!

[slavizh]

@anthony-c-martin yes I can see it now on our DevOps. Thank you Anthony for making it happen and follow trough.

[anthony-c-martin]

Closing this out as we've added support to the major libraries planned above. Please create new issues for adding support to new libraries, or to report issues with existing ones.

[miqm]

do we have a js file built for highlightjs so we can register it as a language?