Monaco-editor: YAML language support

[jrieken]

_From @vojtechhabarta on June 22, 2016 14:3_

I would like to have YAML support in Monaco Editor. Ideally it should support syntax highlighting and provide extensible completion lists (maybe based on some schema language).

I found that YAML syntax highlighting in VS Code is implemented here but this is in TextMate format which cannot be used in Monaco Editor (reason is mentioned here).

Is there any possibility to convert TextMate grammar to Monarch grammar?
Are there any plans for YAML support?

_Copied from original issue: Microsoft/monaco-languages#2_

[jrieken]

_From @alexandrudima on June 24, 2016 22:9_

@vojtechhabarta You can very easily jump in and create a YAML colorizer. https://microsoft.github.io/monaco-editor/monarch.html is a playground page that allows you to write rules in the left hand side editor and preview them live applied on the right hand side editor. You could then make a PR against this repository to add it such that everybody gets it with the monaco-editor.

Here is for example a commit that moved markdown over to this repo (it nicely shows what things to edit to add a new language): https://github.com/Microsoft/monaco-languages/commit/23b305079f10cb365b8badda1a57d263a31a6b41)

TL;DR; PR welcome! :heart:

[JKillian]

Hi @vojtechhabarta, just curious if you've made any progress on this feature?

[vojtechhabarta]

@JKillian I wanted to convert YAML grammar used in VS Code to grammar format used in Monaco Editor. So I checked these grammar formats and to me they didn't seemed much similar. Moreover JavaScript regular expressions are not so powerful as native regex library used in VS Code (TextMate).

Currently I don't have any plans to implement this feature.

[JKillian]

I created a very basic one that highlights property names, comments, and strings. It could be buggy and it doesn't cover YAML's _massive_ set of features, but I'll put it up here as a starting point / quick utility for anyone who wants to work on it or use it.

export const yamlHighlighter = {
    // needed for type-compatibility
    tokenPostfix: undefined,

    escapes:  /\\(?:[abefnrtv0_NLP\\"]|(?:x[\dA-Fa-f]{2})|(?:u[\dA-Fa-f]{4})|(?:U[\dA-Fa-f]{8}))/,
    tokenizer: {
        root: [
            [/(^\s*)([a-z_$][\w$-]*)(:(?: |$))/, ['white', 'property-name', 'operator']],
            [/#.*?$/, "comment"],
            [/[ \t\r\n]+/, 'white'],

            // literal string
            [/'/, { token: 'string.quote', bracket: '@open', next: '@litstring' } ],

            // strings
            [/"([^"\\]|\\.)*$/, 'string.invalid' ],  // non-teminated string
            [/"/,  { token: 'string.quote', bracket: '@open', next: '@string' } ],
        ],

        string: [
            [/[^\\"]+/,  'string'],
            [/@escapes/, 'string.escape'],
            [/\\./,      'string.escape.invalid'],
            [/"/,        { token: 'string.quote', bracket: '@close', next: '@pop' } ]
        ],

        litstring: [
            [/[^']+/,    'string'],
            [/''/,       'string.escape'],
            [/'/,        { token: 'string.quote', bracket: '@close', next: '@pop' } ]
        ],
    },
};

[alexdima]

@JKillian Simple is better than nothing :). Would you care to create a PR for this in monaco-languages.

The extra steps to add/ship a language are documented here: https://github.com/Microsoft/monaco-languages/blob/master/README.md#dev-adding-a-new-language

[Hirse]

I am also looking into writing a YAML highlighter, however I am stuck with the indentation.
@jrieken, @alexandrudima How can I detect the indentation change between lines in monarch?

[Hirse]

Please see my PR Microsoft/monaco-languages#12.

[JKillian]

Nice work @Hirse! Happy to see a much better highlighter than mine above, will be glad to pick yours up

[alexdima]

The PR is now in :+1:

[kpdecker]

Just "released" https://github.com/kpdecker/monaco-yaml, which is a mashup of monaco-json and redhat's vscode yaml extension to support the monaco env. Adds validation, hover, completion, etc that the JSON schemas allow for.

Still working on bundling instructions. Not sure what common patterns are in the ecosystem, so any input there would be appreciated!

[pengx17]

I brought some of your ideas and make it run with latest monaco-editor build script. Here is a running demo: https://pengx17.github.io/monaco-yaml/demo/
@kpdecker

[WesselKuipers]

Is there still any interest in bundling this into monaco-languages? The implementation on pengx17's repo seems feature-complete enough to be worth including.

[danvk]

@WesselKuipers I filed a standalone issue for this here: https://github.com/microsoft/monaco-editor/issues/1470