Add highlight syntax for new languages in Azure Devops

Azure Devops is delivered with a closed list of recognized languages.
By default, Delphi (for example) has no highlight syntax in Code Viewer...

The good : the core highlighting system is based on Monaco project https://github.com/microsoft/monaco-editor.
FYI : The Monaco Editor is the code editor that powers VS Code...

So, to add support in your AzureDevOps server (on premise) instance, just follow this :
In the flow below, I choosed to add support for delphi (language is named 'pascal'), you can replace pascal by any other monaco compatible language...

  1. Clone Monaco project on your dev machine (https://github.com/microsoft/monaco-editor)
  2. Follow the project readme file to build a release (with VSCode for example)
  3. Open the Monaco build folder \ Release \ [ESM] or [DEV] \
  4. Copy in the clipboard the language folder for wich you want to add syntax highlight support
  5. On your Azure Devops App Server 
    Paste the copied folder it in the following folder  :
    C:\Program Files\Azure DevOps Server 2019\Application Tier\Web Services\_static\3rdParty\_content\Extensions\CodeEditor\0.13.1.1\vs\basic-languages\
    If Azure Devops is installed in C:\Program Files\Azure DevOps Server 2019...
  6. On your Azure Devops App Server
    Edit editor.main.js
    1. Open following folder
      C:\Program Files\Azure DevOps Server 2019\Application Tier\Web Services\_static\3rdParty\_content\Extensions\CodeEditor\0.13.1.1\vs\editor\
    2. Do a copy (backup) of editor.main.js (name it editor.main.original.js for example)
    3. Open the editor.main.js file in a editor like notepad++
    4. Search for (with the comas in front and behind) ,"./csharp/csharp.contribution",
      Remark : The value is in an array of string (other contributions)
    5. Add ./[Language Folder Name]/[language name].contribution after the csharp contribution like this  ,"./csharp/csharp.contribution","./pascal/pascal.contribution", ...
      Remarks :
      1. I choose pascal as language for the example above, just use yours in place of it...
      2. You can add contribution file after any other contribution, I choose csharp arbitrarily
    6. Refresh your browser ...

Archive with the original editor.main.js and the modified one for pascal support : SupportForDelphiForAzureDevOps.zip (862,83 kb)

Thats all folks !

Comments are closed