Syntax highlighting for C code in Orion's embedded HTML text editor
I am trying to get C syntax highlighting to work for my HTML application.
I am implementing Orion editor. For now, only JavaScript syntax highlighting works, but I think it is also possible to get C highlighting because the git repository at https://github.com/eclipse/orion/tree/master/editor/releases/latest/stylers functions " 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 a JavaScript highlighting edit box:
<pre class="editor" data-editor-lang="js">
// JavaScript
function() { }
</pre>
Here's the code for C that doesn't work (attribute data-editor-lang="c"
is speculation, can't find any documentation for this):
<pre class="editor" data-editor-lang="c">
// C/C++
int main() {
volatile float x = 12.f;
}
</pre>
Here's the 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 am getting these error messages while testing 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
source to share
After some trial and error, I got syntax highlighting for javascript to work when using only the Orion client. The same strategy may 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 could be to use inline-codeEdit instead of build-editor for the client. Also see
source to share