monaco-language-processing

Microsoftが開発しているmonaco のProcessing の補完(suggestion/completion)を作ろうしたもの

注意

monaco-languagesに対応したプロジェクトでは ありません 。

monacoの構文定義であるmonarchにはjavaのmonarchを指定しています。

monaco.languages.registerCompletionItemProvider()で用いる補完(suggestion/completion)の定義をjsonファイルで行っています。

使い方

step 1

git cloneやzipダウンロードしてprocessing-language.jsonをコピーする。

step 2

    import * as monaco from 'monaco-editor';
    import pde from './processingMonarch'; // javaのmonarchをコピーしたもの https://github.com/Microsoft/monaco-editor/blob/master/website/monarch.html#L507
    import processingSnipet from './processing-language.json';// このファイル

    // Register a new language
    monaco.languages.register({ id: 'Processing' });

    // Register a tokens provider for the language
    monaco.languages.setMonarchTokensProvider('Processing', pde);
    monaco.languages.registerCompletionItemProvider('Processing', {
        provideCompletionItems: function (model, position) {
            return processingSnipet;
        }
    });

    const container = document.getElementById("container");

    const editor = monaco.editor.create(container, {
        value: "",// コードの初期値を入れる
        language: "Processing",
        lineNumbers: "off",
        roundedSelection: false,
        scrollBeyondLastLine: false,
        readOnly: false,
        theme: "vs-dark",
    });
    setTimeout(() => {
        editor.updateOptions({
            lineNumbers: "on",
            "autoIndent": true,
            "formatOnPaste": true,
            "formatOnType": true
        });
    }, 1000);

開発

npm start

• p5Function/pdeの中に関数が取りうる引数の数など
• p5Function/func.json , p5Class.json , p5Value.json の中 documantation に関数の説明
• 記法はAPIリファレンスのmonaco.languages.CompletionItemを参照