That what I tried so far:
test.html
< body >
< div id=“editor”></ div>
< script defer="" src=“codemirror.js”></ script>
< script defer="" src=“index.js”></ script>
< /body >
index.js
(function () {
'use strict';
// @omit
// This file was generated by lezer-generator. You probably shouldn't edit it.
const {Parser} = CM["lezer"];
const {NodeProp} = CM["lezer"];
const parser = Parser.deserialize({
version: 13,
states: "!WQYQPOOOhQPO'#CdOOQO'#Ci'#CiOOQO'#Ce'#CeQYQPOOOOQO,59O,59OOyQPO,59OOOQO-E6c-E6cOOQO1G.j1G.j",
stateData: "![~O[OSPOS~ORQOSQOTQOVPO~ORQOSQOTQOUTOVPO~ORQOSQOTQOUWOVPO~O",
goto: "u^PPPPPPPP_ePPPoXQOPSUQSOQUPTVSUXROPSU",
nodeNames: "⚠ LineComment Program Identifier String Boolean ) ( Application",
maxTerm: 13,
nodeProps: [
[NodeProp.openedBy, 6,"("],
[NodeProp.closedBy, 7,")"]
],
skippedNodes: [0,1],
repeatNodeCount: 1,
tokenData: "$W~R^XY}YZ}]^}pq}rs!`st!}xy#]yz#b}!O#g!Q![#g!]!^#{!c!}#g#R#S#g#T#o#g~!SS[~XY}YZ}]^}pq}~!cTOr!`rs!rs#O!`#O#P!w#P~!`~!wOS~~!zPO~!`~#QQ#Y#Z#W#h#i#W~#]OT~~#bOV~~#gOU~~#lTR~}!O#g!Q![#g!c!}#g#R#S#g#T#o#g~$QQP~OY#{Z~#{",
tokenizers: [0],
topRules: {"Program":[0,2]},
tokenPrec: 0
});
// @omit
const {foldNodeProp, foldInside, indentNodeProp} = CM["@codemirror/language"];
const {styleTags, tags: t} = CM["@codemirror/highlight"];
let parserWithMetadata = parser.configure({
props: [
styleTags({
Identifier: t.variableName,
Boolean: t.bool,
String: t.string,
LineComment: t.lineComment,
"( )": t.paren
}),
indentNodeProp.add({
Application: context => context.column(context.node.from) + context.unit
}),
foldNodeProp.add({
Application: foldInside
})
]
});
//!language
const {LezerLanguage} = CM["@codemirror/language"];
const {javascript} = CM["@codemirror/lang-javascript"];
const exampleLanguage = LezerLanguage.define({
parser: parserWithMetadata,
languageData: {
commentTokens: {line: ";"}
}
});
//!completion
const {completeFromList} = CM["@codemirror/autocomplete"];
const exampleCompletion = exampleLanguage.data.of({
autocomplete: completeFromList([
{label: "var", type: "keyword"},
{label: "fun", type: "function"}
])
});
//!support
const {LanguageSupport} = CM["@codemirror/language"];
function example() {
return new LanguageSupport(exampleLanguage, [exampleCompletion])
}
const {EditorState, EditorView, basicSetup} = CM["@codemirror/basic-setup"];
let state = EditorState.create({
doc: 'var \nfunc ()',
extensions: [basicSetup, example(), javascript()]
});
new EditorView({state, parent: document.querySelector("#editor")});
}());