嵌入HTML的Orion文本编辑器中C代码的语法高亮显示

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

本文关键字：代码 语法 高亮 显示 编辑器 HTML Orion 文本 文本编辑 嵌入      更新时间：2023-09-26

我正在尝试让C语法高亮显示为我的HTML应用程序工作。

我正在嵌入Orion编辑器。目前只有JavaScript语法高亮显示有效，但我认为也应该可以使用C高亮显示，因为https://github.com/eclipse/orion/tree/master/editor/releases/latest/stylers特性"样式器"也适用于Java和C.

这是我的设置代码：

<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>

此标记代码成功创建了一个带有JavaScript突出显示的编辑框：

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

以下是不起作用的C代码（data-editor-lang="c"属性只是猜测，找不到相关文档）：

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

这是Java版本（但如果我将orion/editor/releases/latest/更改为orion/editor/releases/5.0/，它会起作用）：

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

当我测试这个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

经过一番尝试和错误之后，我得到了仅使用Orion客户端时javascript工作的语法高亮显示。同样的策略可能对你有效：

 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();                 
          }
   });
});

另一个选项可能是使用生成的codeEdit而不是客户端的生成编辑器。另请参见

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

相关文章：