Syntax highlighting for C code in Orion text editor embedded in HTML

Question

I'm trying to get C syntax highlighting get to work for my HTML app.

I'm embedding Orion editor. For now only JavaScript syntax highlighting is working, but I think it should be possible to get C highlighting as well, because the git repository at https://github.com/eclipse/orion/tree/master/editor/releases/latest/stylers features "stylers" also for Java and C.

Here's my setup code:

<link rel="stylesheet" type="text/css" href="http://eclipse.org/orion/editor/releases/latest/built-editor.css"/>
<script src="http://eclipse.org/orion/editor/releases/latest/built-editor.js"></script>
<script>
if (window.addEventListener) {
    window.addEventListener('load', function() {
        require(["orion/editor/edit"], function(edit) {
            edit({className: "editor"});
        });
    }, false);
}
</script>
<style>
pre.editor{
    padding: 0px;
    border: 1px solid lightgrey;
}
</style>

This markup code successfully creates an edit box with JavaScript highlighting:

<pre class="editor" data-editor-lang="js">
// JavaScript
function() { }
</pre>

Here's the code for C that's not working (the data-editor-lang="c" attribute is a guess, cannot find documentation for this):

<pre class="editor" data-editor-lang="c">
// C/C++
int main() {
    volatile float x = 12.f;
}
</pre>

Here's Java version (but it works if I change orion/editor/releases/latest/ to orion/editor/releases/5.0/):

<pre class="editor" data-editor-lang="java">
// Java
class X extends Y {}
</pre>

I get these error messages when I test this HTML:

Error: undefined missing orion/editor/stylers/c/syntax built-editor.js:297
Error: undefined missing orion/editor/stylers/text_x-java-source/syntax built-editor.js:297

Answer 1

After some trial and error I got syntax highlighting for javascript working when using only the Orion client. Same strategy might work for you:

 requirejs.config({                 
    baseUrl : '.',
    paths: {          
        'orion/editor': 'lib/orion',      
        'jquery': 'bower_components/jquery/dist/jquery.min'
    }
  }); 

-

require(['orion/editor/built-editor', 'orion/editor/stylers/application_javascript/syntax'], function(edit, syntax) {  

    var deferred = new $.Deferred();
    deferred.resolve(syntax);

    edit({
          className: "editor",
          lang:'js',
          grammarProvider: function(){                    
             return deferred.promise();                 
          }
   });
}); 

Another option might be to use built-codeEdit instead of build-editor for the client. Also see

https://wiki.eclipse.org/Orion/How_Tos/Code_Edit