DTStack / molecule

:rocket: A lightweight Web IDE UI framework.

Home Page:https://dtstack.github.io/molecule/

Repository from Github https://github.comDTStack/moleculeRepository from Github https://github.comDTStack/molecule

请问自定义语法高亮和代码提示应该怎么配置呢(案例提供的方法无法直接使用)

caoyang2002 opened this issue · comments

commented

Question

目的

实现 solidity 和 Move 语言的代码高亮以及补全

遇到的问题

使用示例的配置不能完全实现高亮与代码补全

使用的方法

示例配置:https://dtstack.github.io/molecule/docs/next/quick-start/#use-monaco-editor-language-pack

image

使用效果

py:
image

rust
image

c
image

go
image

期望效果

image image
commented

是 1.x 版本吗?

commented

是 1.x 版本吗?

对, "@dtinsight/molecule": "^1.3.0",

commented

对于monaco-editor内置支持的语言,除了要在monaco-editor-webpack-plugin插件中指定,还需要在打开编辑器时指定文件的language,要注意下language不能写错,例如js要写javascript,可以参考这里的实现方式:

language: extName,

对于monaco-editor内置支持的语言,基本的语法高亮是都支持的,对于代码补全,貌似仅支持 typescript, javascript, css, less, scss, json, html这些语言。monaco-editor支持的语言可以查看:https://github.com/microsoft/monaco-editor/tree/v0.32.0/src/basic-languages

要自定义支持其它语言的高亮或者代码补全,需要自己实现,可以参考网络上monaco-editor相关的一些文章。可能需要用到monaco-editor提供的一些api,可以从'@dtinsight/molecule/esm/monaco'路径导出,例如:
import { languages } from '@dtinsight/molecule/esm/monaco';