JCode Custom Lang

码上掘金自定义语言合集

使用说明

1. Script Tab 下选择 Custom

2. 第一行输入对应语言的Hashbang，比如：

#!/jcode/lang/wenyan https://xitu.github.io/jcode-languages/dist/lang-wenyan.json

接着输入该语言代码，如

吾嘗觀「「控制秘術」」之書。方悟「等待指針按下」「等待指針移動」之義。
吾嘗觀「「畫譜」」之書。方悟「備紙」「擇筆」「蘸色」「落筆」「運筆」「提筆」「設色」「裱畫」之義。

吾有一術。名之曰「繪製」。欲行是術。必先得一物。曰「紙」。
行是術以俟其毕。
是術曰。
  恆為是。
    且施「等待指針移動」於「紙」。以俟其毕。名之曰「指針」。
    夫「指針」之「「經數」」者。名之曰「經數」。
    夫「指針」之「「緯數」」者。名之曰「緯數」。
    夫「指針」之「「鍵值」」者。名之曰「鍵值」。
    夫「指針」之「「前經」」者。名之曰「橫」。
    夫「指針」之「「前緯」」者。名之曰「縱」。
    施「落筆」於「紙」於「橫」於「縱」。
    若「鍵值」等於零者。施「提筆」於「紙」。乃止也。
    施「運筆」於「紙」於「經數」於「緯數」。
    施「提筆」於「紙」。
    施「設色」於「紙」。
  云云。
是謂「繪製」之術也。

施「備紙」於五百。於五百。名之曰「紙」。
施「蘸色」於「紙」於「「花青」」。
施「擇筆」於「紙」於五。
施「裱畫」於「紙」於「「app」」。

恆為是。
  且施「等待指針按下」於「紙」。以俟其毕。名之曰「指針」。
  且施「繪製」於「紙」。以俟其毕。
云云。

3. 在脚本依赖中引入 https://cdn.jsdelivr.net/npm/jcode-tools 和依赖的语言解析脚本，如 https://cdn.jsdelivr.net/npm/@wenyanlang/core/index.min.js

4. Markup Tab 下对自定义语言进行解析，比如：

<div id="app"></div>
<script>
  (async function() {
    const code = await JCode.getCustomCode();
    const jscode = Wenyan.compile(code, {
      logCallback: () => {},
      importPaths: ['https://akira-cn.github.io/wenyan-demos/'],
      allowHttp: true,
    });
    Wenyan.evalCompiled(`(async () => {${jscode}})()`);
  }());
</script>

5. Server端语言

目前码上掘金通过CodeX-API支持Server端编程语言。

比如Rust语言：

例子

<div id="app"></div>
<script type="module">
import {CodeXClient, logger} from 'https://cdn.jsdelivr.net/npm/jcode-tools@^0.10.2/dist/jcode-tools.esm.js';
(async () => {
  window.console = logger(app);
  console.log('提交代码，请稍候');

  try {
    const code = new CodeXClient(); // 默认会从CustomCode中获取
    const result = await code.runCode();
    if(result.error) {
      console.error(result.error);
    }
    console.log(result.output);
  } catch(ex) {
    console.error(ex);
  }
})();
</script>

支持语言

目前官方支持了10种语言：

语言	json 文件	示例	运行时
glsl	lang-glsl	🎯 glsl-demo	glsl-doodle
live & coffee	lang-coffee	☕️ coffee-demo 🎢 live-demo	coffeescript livescript
lua	lang-lua	♟ lua-demo	fengari-lua
markdown	lang-markdown	📓 markdown-demo	markdedjs
python	lang-python	🐍 python-demo	brython
ruby	lang-ruby	🦑 ruby-demo	opal
scheme	lang-scheme	🐵 scheme-demo	lips
sql	lang-sql	🦗 sql-demo	jSQL
webslides	lang-webslides	🐙 webslides-demo	webslides.md
文言文	lang-wenyan	🐧 wenyan-demo	wenyan-lang

以及多种Server端语言：

语言	json 文件	示例
c/c++	lang-cpp	🐵 c-demo 🙉 c++-demo
dart	lang-dart	🦆 dart-demo
elixir	lang-elixir	🐆 elixir-demo
erlang	lang-erlang	🦄 erl-demo
golang	lang-go	🐱 go-demo
java	lang-java	☕️ java-demo
javascript	lang-javascript	🦋 nodejs-demo-async
kotlin	lang-kotlin	🐟 kotlin-demo
perl	lang-perl	🐪 perl-demo
php	lang-php	🐘 php-demo
python	lang-python	🐍 python-demo
ruby	lang-ruby	🦑 ruby-demo
rust	lang-rust	🦁 rust-demo
scala	lang-scala	🐿 scala-demo
zig	lang-zig	🦉 zig-demo

如何扩展我的自定义语言

准备语法高亮JSON文件

码上掘金支持JSON格式的Monaco Editor语法高亮配置，而通常的Monaco Editor语法高文件是JS文件，需要转成对应的JSON。

可以fork本代码仓库，直接将语法高亮JS文件复制到src目录，然后运行npm run build，会自动构建并生成dist目录下对应的JSON文件。

之后可以自己发布这个JSON，或者给本项目提交PR，代码合并后，就可以直接通过：

https://xitu.github.io/jcode-languages/dist/lang-你的语言类型.json

来访问了。

设置hashbang

语法为：

#!/jcode/lang/你的语言类型 https://xitu.github.io/jcode-languages/dist/lang-你的语言类型.json

然后就可以按照上面的使用说明，写自己的自定义语言代码了。