Use your SPL language in plain monaco?

[christoffertoft]

Hi Chris, and thanks for making this app. If i wanted to use the highlighting in a separate page, what would i need to do? lift the spl.js file into a subfolder of the basic-languages folder of Monaco?

Thankful for replies.

[ChrisYounger]

Hi. I have created a very trimmed down example for you here: https://github.com/ChrisYounger/highlighter_example

Let me know if there is anything else I can help with. If you like my apps please leave a rating on splunkbase :) all the best.

[christoffertoft]

@ChrisYounger - Hi and thanks for your effort! I was very unclear I can see, sorry for that. I meant to say in a regular non-Splunk-Dashboard webpage (e.g. just html and javascript). I've gotten as far as running the parts of the code you've broken out in this example, But when I add the model to the editor, the syntax highlighting/coloring does not work. If i remove the model, the highlighting works (but obviously the other parts of the code, such as rebuildTokens and others who rely on the model does not.

I understand this is hard for you to debug. I'll add some code here to show you what i'm working with:

<script src="{{url_for('static',filename='vs/basic-languages/spl/spl_language.js')}}"></script>

<script>
       spl_language = getSplLanguageDef().spl_language
        $hl_description = $("#hl_description")
        $hl_description_select = $(".hl_description_select")
        $hl_description_content = $(".hl_description_content")
        monaco.editor.defineTheme('vs-dark-spl', {
            base: 'vs-dark',
            inherit: true,
            rules: [
                { token: 'function', foreground: 'c586c0' }, // pink
                { token: 'command', foreground: '569cd6', fontStyle: 'bold' }, // blue - make bold?
                { token: 'pipe', foreground: 'd4d4d4', fontStyle: 'bold' }, // white bold
                { token: 'argument', foreground: '3dc9b0' }, // teal
                { token: 'keyword', foreground: 'dd6a6f' }, // normal  AND|OR|WHERE etc
                { token: 'operator', foreground: 'd4d4d4' }, // red
                { token: 'string', foreground: 'ce9178' }, // orange
                { token: 'number', foreground: 'b5cea8' }, // green 
                { token: 'delimiter', foreground: 'DCDCDC' }, // gray 
                { token: 'invalid', foreground: 'FF0000' }, // red 
                { token: 'macro.comment', foreground: '608B4E' }, // green
                { token: 'macro.comment.wrap', foreground: '808080' }, // grey
                { token: 'macro.args', foreground: '74B0DF' }, // macro args
                { token: 'macro.function', foreground: '9CDCFE' }, // macro name
            ]
        });

        monaco.editor.defineTheme('vs-spl', {
            base: 'vs',
            inherit: true,
            rules: [
                { token: 'function', foreground: 'CF00CF' }, // pink
                { token: 'command', foreground: '2662FC' }, // blue - make bold?
                { token: 'pipe', foreground: '000000', fontStyle: 'bold' }, // white bold
                { token: 'argument', foreground: '02ac76' }, // 
                { token: 'keyword', foreground: 'ff6928' }, // orange  AND|OR|WHERE etc
                { token: 'operator', foreground: '808080' }, // 
                { token: 'string', foreground: 'A31515' }, // teal
                { token: 'number', foreground: '09885A' }, // green 
                { token: 'delimiter', foreground: '383838' }, // gray 
                { token: 'invalid', foreground: 'FF0000' }, // red 
                { token: 'macro.comment', foreground: '008000' }, // green
                { token: 'macro.comment.wrap', foreground: '808080' }, // grey
                { token: 'macro.args', foreground: 'AF00DB' }, // macro args
                { token: 'macro.function', foreground: 'FF00FF' }, // macro name
            ]
        });

        var tokens = [];
        var data = {};
        var $hl_container = $("#search_string");
        //var theme = "vs-dark";
        var model = monaco.editor.createModel(getSpl());
        var editor = monaco.editor.create(document.getElementById("search_string"), {
            language: 'spl',
            automaticLayout: true,
            minimap: {
                enabled: false
            },
            model: model,
            scrollBeyondLastLine: false,
            wordWrap: "on",
            lineNumbers: false
        });
        var shown_log_message = false;

        // Register a new simple language for prettying up git diffs
        monaco.languages.register({ id: 'spl' });
        monaco.languages.setMonarchTokensProvider('spl', spl_language.lang);
        // Go through the SPL tokens and determine what command is currently hovered
        monaco.editor.setTheme('vs-spl')
        //Call rebuild to populate tokens[] with data
        rebuildTokens()

WHenever I log the tokens, they are set. I don't know how to debug why the code highlighting is not working. Super thankful for replies.

I rated your app on splunkbase !

[ChrisYounger]

Before I take the time to look deeply at your code, I just wanted to point out there there is already a non-splunk example here: https://github.com/ChrisYounger/highlighter/blob/master/appserver/static/index.html

This can run outside of Splunk. It uses the same javascript code, except it has a small amount of branching logic triggered by standaloneMode = true

From your example it is not clear to me that you are loading the monaco libraries. I assume you are doing this? Also, are any errors showing in your browser console log?

All the best. Chris.

[christoffertoft]

@ChrisYounger I managed to solve it using your code snippet in this example! This is how it looks once working:

    monaco.languages.register({ id: 'spl' });
    monaco.languages.setMonarchTokensProvider('spl', spl_language.lang);

        var tokens = [];
        var data = {};
        var $hl_container = $("#search_string");
        //var theme = "vs-dark";
        var model = monaco.editor.createModel(getSpl());
        var editor = monaco.editor.create(document.getElementById("search_string"), {
            language: 'spl',
            automaticLayout: true,
            minimap: {
                enabled: false
            },
            model: model,
            scrollBeyondLastLine: false,
            wordWrap: "on",
            lineNumbers: false
        });
        var shown_log_message = false;

        // Register a new simple language for prettying up git diffs
        // Go through the SPL tokens and determine what command is currently hovered
        monaco.editor.setTheme('vs-spl')
        monaco.editor.setModelLanguage(model, "spl");
        //Call rebuild to populate tokens[] with data
        rebuildTokens()

Lots of thanks for your assistance!!

[ChrisYounger]

awesome. glad to hear it :)