Using Monaco Editor as a Code Block

[o12486vs2]

"I'm relatively new to development and recently found myself in need of a code block similar to st.code. Despite my best efforts, I struggled with setting up code highlighting. That led me to turn to the Monaco editor. To achieve what I needed, I disabled editing in the Monaco editor and removed various editor lines, trying to replicate the appearance of a simple code block. I'm sharing this in hopes it might inspire or help other developers out there."

from nicegui import ui
import json


def code(pythonCode):
    async def getMonacoEditor(divId,pythonCode):
        await ui.run_javascript(f'''
            function loadScript(url, callback) {{
                var script = document.createElement("script");
                script.type = "text/javascript";
                script.src = url;
                script.onload = callback;
                document.body.appendChild(script);
            }}

            loadScript("https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js", function() {{
                require.config({{ paths: {{ 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs' }}}});
                require(['vs/editor/editor.main'], function() {{

                    monaco.editor.defineTheme('myWhiteTheme', {{
                        base: 'vs-dark',
                        inherit: true,
                        rules: [],
                        colors: {{
                            'editor.background': '#1D1E22',
                        }}
                    }});

                    var parentDiv = getElement("{divId}");
                    window.myMonacoEditor = monaco.editor.create(parentDiv, {{
                        value: `{pythonCode}`, 
                        language: "python",
                        theme: "myWhiteTheme",
                        readOnly: true,
                        lineNumbers: 'off',        
                        minimap: {{ enabled: false }},
                        glyphMargin: false,    
                        scrollbar: {{                    
                            vertical: 'hidden',
                            horizontal: 'hidden',
                            useShadows: false
                        }},
                        scrollBeyondLastLine: false,
                        renderLineHighlight: 'none',
                        hover: {{enabled: false}},
                        renderLineNumbers: 'off',
                        hideCursorInOverviewRuler: true, 
                        overviewRulerLanes: 0,
                        renderIndentGuides: false     
                    }});

                    var resizeObserver = new ResizeObserver(function(entries) {{
                        window.myMonacoEditor.layout();
                    }});
                    resizeObserver.observe(parentDiv);
                }});
            }});
        ''', respond=False)


    async def copyCode(pythonCode):
        escaped_code = json.dumps(pythonCode)
        await ui.run_javascript(f'''
            navigator.clipboard.writeText({escaped_code})
            .then(() => {{
                console.log('Text copied to clipboard');
            }})
            .catch(err => {{
                console.error('Could not copy text: ', err);
            }});
        ''', respond=False)

        ui.notify('Attempted to copy code to clipboard!', type='info', position='top', close_button='ok')

    with ui.row().classes('w-[500px] h-[500px] bg-[#1D1E22] rounded-lg p-[5px] overflow-hidden relative'):
        ui.button(icon='content_copy',on_click=lambda:copyCode(pythonCode)).props('flat round').classes('p-0 absolute top-1 right-1 z-50')
        container = ui.row().classes('w-[500px] h-[500px] bg-[#1D1E22] rounded-lg')

    ui.timer(0,lambda:getMonacoEditor(container.id,pythonCode),once=True)





pythonCode = '''
def hello_world():
    print("Hello, world!")

hello_world()
'''

code(pythonCode)

[falkoschindler]

Thanks for sharing, @o12486vs2!
Meanwhile we released a rather lightweight ui.code element (#1653), so Monaco might not be needed for displaying code. But eventually we will probably introduce a powerful code editor like Monaco.

[akai-1024]

That's a real good news.

[dridk]

Yes!! A code editor as ui.element would be awesome

[42sol-eu]

I assume ui.codemirror is that code editor of choice now.