Ploomber AI Editor | simple-code-editor-abbc

To upload files, please first save the app
Code Editor for app.py

import streamlit as st
from streamlit_ace import st_ace
import pygments
from pygments.lexers import get_all_lexers
import base64

# Set page config
st.set_page_config(page_title="Simple Code Editor", layout="wide")

# App title and description
st.title("Simple Code Editor")
st.markdown("""
This app allows you to write, edit, and download code in various programming languages.
Use the sidebar to configure the editor and customize your experience.
""")

# Sidebar for editor settings
with st.sidebar:
    st.header("Editor Settings")
    
    # Get all available lexers/languages from pygments
    all_lexers = sorted([(x[0], x[1][0]) for x in get_all_lexers() if x[1]])
    language_names = [x[0] for x in all_lexers]
    language_codes = [x[1] for x in all_lexers]
    
    # Language selection
    selected_language_name = st.selectbox(
        "Select Language",
        options=language_names,
        index=language_codes.index("python") if "python" in language_codes else 0
    )
    selected_language = all_lexers[language_names.index(selected_language_name)][1]
    
    # Theme selection
    theme = st.selectbox(
        "Editor Theme",
        options=["github", "monokai", "terminal", "twilight", "chrome", "dracula"],
        index=0
    )
    
    # Font size
    font_size = st.slider("Font Size", min_value=8, max_value=24, value=14)
    
    # Tab size
    tab_size = st.slider("Tab Size", min_value=1, max_value=8, value=4)
    
    # Line wrapping
    wrap = st.checkbox("Line Wrapping", value=True)
    
    # Show line numbers
    show_line_numbers = st.checkbox("Show Line Numbers", value=True)
    
    # Show print margin
    show_print_margin = st.checkbox("Show Print Margin", value=False)
    
    # Auto-completion
    auto_complete = st.checkbox("Auto-completion", value=True)

# Sample code based on the selected language
sample_codes = {
    "python": "# Python sample code\ndef hello_world():\n    print('Hello, World!')\n\nhello_world()",
    "javascript": "// JavaScript sample code\nfunction helloWorld() {\n    console.log('Hello, World!');\n}\n\nhelloWorld();",
    "java": "// Java sample code\npublic class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}",
    "c": "// C sample code\n#include <stdio.h>\n\nint main() {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}",
    "cpp": "// C++ sample code\n#include <iostream>\n\nint main() {\n    std::cout << \"Hello, World!\" << std::endl;\n    return 0;\n}",
    "csharp": "// C# sample code\nusing System;\n\nclass Program {\n    static void Main() {\n        Console.WriteLine(\"Hello, World!\");\n    }\n}",
    "go": "// Go sample code\npackage main\n\nimport \"fmt\"\n\nfunc main() {\n    fmt.Println(\"Hello, World!\")\n}",
    "ruby": "# Ruby sample code\ndef hello_world\n  puts 'Hello, World!'\nend\n\nhello_world",
    "rust": "// Rust sample code\nfn main() {\n    println!(\"Hello, World!\");\n}",
    "php": "<?php\n// PHP sample code\nfunction helloWorld() {\n    echo \"Hello, World!\";\n}\n\nhelloWorld();\n?>",
    "sql": "-- SQL sample code\nSELECT 'Hello, World!' AS greeting;",
    "html": "<!DOCTYPE html>\n<html>\n<head>\n    <title>Hello World</title>\n</head>\n<body>\n    <h1>Hello, World!</h1>\n</body>\n</html>",
    "css": "/* CSS sample code */\nbody {\n    font-family: Arial, sans-serif;\n    background-color: #f0f0f0;\n}\n\nh1 {\n    color: #333;\n    text-align: center;\n}",
}

# Get default code for the selected language
default_code = sample_codes.get(selected_language, f"// {selected_language_name} code goes here")

# Main code area - left column
col1, col2 = st.columns([3, 1])

with col1:
    # Display the code editor
    code = st_ace(
        value=default_code,
        language=selected_language,
        theme=theme,
        font_size=font_size,
        tab_size=tab_size,
        wrap=wrap,
        show_gutter=show_line_numbers,
        show_print_margin=show_print_margin,
        auto_update=True,
        readonly=False,
        min_lines=20,
        key="ace_editor",
        height=400,
    )
    
    # Create a download button for the code
    if code:
        # Get appropriate file extension
        file_extensions = {
            "python": "py",
            "javascript": "js",
            "java": "java",
            "c": "c",
            "cpp": "cpp",
            "csharp": "cs",
            "go": "go",
            "ruby": "rb",
            "rust": "rs",
            "php": "php",
            "sql": "sql",
            "html": "html",
            "css": "css",
            "markdown": "md",
            "json": "json",
            "yaml": "yaml",
            "typescript": "ts",
        }
        
        extension = file_extensions.get(selected_language, "txt")
        file_name = f"code.{extension}"
        
        # Convert code to downloadable format
        b64 = base64.b64encode(code.encode()).decode()
        href = f'<a href="data:file/{extension};base64,{b64}" download="{file_name}">Download Code</a>'
        st.markdown(href, unsafe_allow_html=True)

with col2:
    st.subheader("Actions")
    
    # Clear code button
    if st.button("Clear Code"):
        st.session_state.ace_editor = ""
        st.rerun()
    
    # Copy to clipboard (using JavaScript)
    st.markdown("""
    <button onclick="navigator.clipboard.writeText(document.querySelector('.ace_content').innerText)">
        Copy to Clipboard
    </button>
    """, unsafe_allow_html=True)
    
    # Code information
    st.subheader("Code Information")
    st.write(f"Language: {selected_language_name}")
    st.write(f"Characters: {len(code)}")
    st.write(f"Lines: {code.count(chr(10)) + 1}")
    
    # Display code output (simulated)
    st.subheader("Output Preview")
    
    if selected_language == "html":
        st.components.v1.html(code, height=200)
    else:
        st.code(code, language=selected_language)

# Footer
st.markdown("---")
st.markdown("Created with Streamlit | Code Editor App")
Loading code editor...
Click Save & Run to preview your app
Terminal