GitHub - xitu/jcode-languages: 码上掘金自定义语言的语法高亮和用法

XCaptaino
1,254 阅读3分钟

码上掘金自定义语言的语法高亮和用法. Contribute to xitu/jcode-languages development by creating an account on GitHub.

码上掘金自定义语言合集

使用说明

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></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></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 文件示例运行时
glsllang-glsl🎯 glsl-demoglsl-doodle
live & coffeelang-coffee☕️ coffee-demo 🎢 live-democoffeescript livescript
lualang-lua♟ lua-demofengari-lua
markdownlang-markdown📓 markdown-demomarkdedjs
pythonlang-python🐍 python-demobrython
rubylang-ruby🦑 ruby-demoopal
schemelang-scheme🐵 scheme-demolips
sqllang-sql🦗 sql-demojSQL
webslideslang-webslides🐙 webslides-demowebslides.md
文言文lang-wenyan🐧 wenyan-demowenyan-lang

以及多种 Server 端语言：

语言json 文件示例
c/c++lang-cpp🐵 c-demo 🙉 c++-demo
dartlang-dart🦆 dart-demo
elixirlang-elixir🐆 elixir-demo
erlanglang-erlang🦄 erl-demo
golanglang-go🐱 go-demo
javalang-java☕️ java-demo
javascriptlang-javascript🦋 nodejs-demo-async
kotlinlang-kotlin🐟 kotlin-demo
perllang-perl🐪 perl-demo
phplang-php🐘 php-demo
pythonlang-python🐍 python-demo
rubylang-ruby🦑 ruby-demo
rustlang-rust🦁 rust-demo
scalalang-scala🐿 scala-demo
ziglang-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

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

avatar
文章
阅读
粉丝