4

I'm using the ACE editor (http://ace.c9.io/) with this code:

<script src="https://cdn.jsdelivr.net/g/ace@1.2.6(min/ace.js+min/theme-cobalt.js+noconflict/mode-yaml.js)"></script>

<script>
    function tuneEditor( editor )
    {
        editor.setTheme( "ace/theme/cobalt" );
        editor.getSession().setMode( "ace/mode/yaml" );
        editor.setShowPrintMargin( false );
        editor.setShowInvisibles( true );
        editor.setReadOnly( true );
        editor.focus();
    }

    var contactEditor = ace.edit( "contactEditor" );
    tuneEditor( contactEditor );
</script>

The YAML syntax highlighting in the ACE editor works well when coloring an unquoted key-pair, for example name: Alice.

Nevertheless, if the value is a string, but starts with a number, it colors part of the value as a number and part of it as a string, instead of interpreting that the value data-type is a string.

For example: title: 123hello would contain 123 in one color and hello in another one.

Source of truth

According to this official page: http://yaml.org/spec/1.2/spec.html#style/flow/plain:

Plain scalars must not begin with most indicators, as this would cause ambiguity with other YAML constructs.

Ie: The only restriction to the "plain scalar" (ie: non-quoted) is to not begin with "indicators" (like :, | and so on). It does not say anything about it not starting with digits.

If we look into the "indicators" section here http://yaml.org/spec/1.2/spec.html#indicator// we don't see that digits count as indicators.

Usability threat: It confuses users

This is specially ugly for sha1 identifiers and similar situations, like in this image. This confuses very much my users:

enter image description here

Question

  • How can I make the ace editor do this syntax highlight to appear coloring only with one color the full value?
Xavi Montero
  • 9,239
  • 7
  • 57
  • 79

1 Answers1

1

It's been corrected as a bug... but it seems jsdeliver does not make it easy to get the links for newer versions. I used v1.2.6 and the latest is v1.4.1

Changing

<script src="https://cdn.jsdelivr.net/g/ace@1.2.6(min/ace.js+min/theme-cobalt.js+noconflict/mode-yaml.js)"></script>

for

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/ace.js" integrity="sha256-kCykSp9wgrszaIBZpbagWbvnsHKXo4noDEi6ra6Y43w=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/theme-cobalt.js" integrity="sha256-OEJvWvZJvQ8cFFLk43d1UF5DHqWdikG1n8CJQSP70TA=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-yaml.js" integrity="sha256-95xNUgbfIXvRXJezV53+JM5HPO6PnJ+wZ7/GwdesKAE=" crossorigin="anonymous"></script>

did the trick:

enter image description here

Anthon
  • 69,918
  • 32
  • 186
  • 246
Xavi Montero
  • 9,239
  • 7
  • 57
  • 79