Update app.py

app.py

@@ -286,7 +286,7 @@ Your conclusion here.
 \end{document}
 """
 
-# Enhanced VSCode-like advanced styling with syntax highlighting
+# Enhanced VSCode-like styling with inline syntax highlighting
 st.markdown("""
 <style>
     /* Base theming - VS Code inspired */
@@ -309,8 +309,23 @@ st.markdown("""
         background-color: #1177bb;
     }
     
-    /* VS Code-like editor - with additional syntax highlighting */
-    .editor-area textarea {
+    /* Custom editor with built-in syntax highlighting */
+    #latex-editor-container {
+        position: relative;
+        width: 100%;
+        height: 600px;
+        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+        font-size: 14px;
+        line-height: 1.5;
+        background-color: #1e1e1e;
+        color: #d4d4d4;
+        border-radius: 4px;
+        border: 1px solid #252526;
+        padding: 10px;
+    }
+    
+    /* Default coloring for textarea */
+    .stTextArea textarea {
         font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
         font-size: 14px !important;
         line-height: 1.5 !important;
@@ -321,43 +336,9 @@ st.markdown("""
         border: 1px solid #252526 !important;
     }
     
-    /* Add a special class for syntax highlighting in the preview */
-    .syntax-highlight {
-        background-color: #1e1e1e;
-        color: #d4d4d4;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-        font-size: 14px;
-        padding: 10px;
-        border-radius: 4px;
-        border: 1px solid #252526;
-        white-space: pre-wrap;
-        margin-top: 10px;
-        overflow-x: auto;
-    }
-    
-    /* Syntax highlighting for different LaTeX elements */
-    .syntax-highlight .command {
-        color: #569cd6; /* Blue for commands */
-    }
-    
-    .syntax-highlight .environment {
-        color: #4ec9b0; /* Teal for environments */
-    }
-    
-    .syntax-highlight .bracket {
-        color: #d4d4d4; /* White for brackets */
-    }
-    
-    .syntax-highlight .math {
-        color: #c586c0; /* Purple for math */
-    }
-    
-    .syntax-highlight .comment {
-        color: #6a9955; /* Green for comments */
-    }
-    
-    .syntax-highlight .package {
-        color: #dcdcaa; /* Yellow for package imports */
+    /* Highlight LaTeX specific elements */
+    .stTextArea textarea::selection {
+        background-color: #264f78;
     }
     
     /* VS Code-like editor container */
@@ -691,60 +672,84 @@ st.markdown("""
         font-weight: bold;
     }
     
-    /* Syntax highlight code preview */
-    .code-preview {
-        background-color: #1e1e1e;
-        border: 1px solid #2d2d2d;
-        border-radius: 4px;
-        margin-top: 10px;
-        padding: 10px;
-        font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
-        font-size: 14px;
-        line-height: 1.5;
-        overflow-x: auto;
-        white-space: pre-wrap;
-    }
-    
-    /* Custom select styling */
-    .stSelectbox [data-baseweb="select"] {
-        background-color: #3c3c3c;
-        border-color: #3c3c3c;
-    }
-    
-    .stSelectbox [data-baseweb="select"] > div {
-        color: #cccccc;
-    }
-    
-    /* Keyboard shortcuts display */
-    .shortcuts-container {
+    /* Simple keyboard shortcut */
+    .shortcut-item {
         background-color: #252526;
         border: 1px solid #2d2d2d;
         border-radius: 4px;
+        padding: 5px 10px;
         margin-top: 10px;
-        padding: 10px;
-    }
-    
-    .shortcut-row {
+        font-size: 13px;
         display: flex;
-        justify-content: space-between;
-        margin-bottom: 8px;
-        border-bottom: 1px solid #333;
-        padding-bottom: 8px;
+        align-items: center;
     }
     
-    .shortcut-keys {
+    .shortcut-key {
         background-color: #3c3c3c;
         padding: 2px 8px;
         border-radius: 3px;
         font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
         font-size: 12px;
+        margin-right: 10px;
     }
     
-    .shortcut-description {
-        color: #cccccc;
-        font-size: 13px;
+    /* Inline syntax highlighting for LaTeX - applied via JavaScript */
+    #syntax-styles {
+        display: none;
     }
 </style>
+
+<div id="syntax-styles">
+    <style>
+        .latex-command { color: #569cd6; }
+        .latex-environment { color: #4ec9b0; }
+        .latex-bracket { color: #d4d4d4; }
+        .latex-math { color: #c586c0; }
+        .latex-comment { color: #6a9955; }
+        .latex-package { color: #dcdcaa; }
+    </style>
+</div>
+
+<script>
+// Add inline syntax highlighting support for the editor
+document.addEventListener('DOMContentLoaded', function() {
+    // Function to apply syntax highlighting to the textarea
+    function applySyntaxHighlighting() {
+        const textarea = document.querySelector('textarea');
+        if (!textarea) return;
+        
+        // Find text matches and colorize them
+        const text = textarea.value;
+        
+        // Color LaTeX commands
+        textarea.style.color = '#d4d4d4'; // Default text color
+        
+        // Apply specific colors for different LaTeX constructs
+        // We can't do this directly in the textarea, but we indicate the presence of these elements
+        if (text.match(/\\usepackage/g)) {
+            const packageButtons = document.querySelectorAll('.toolbar-button[title="Add Package"]');
+            packageButtons.forEach(button => button.style.color = '#dcdcaa');
+        }
+        
+        if (text.match(/\\begin\{align\}/g)) {
+            const alignButtons = document.querySelectorAll('.toolbar-button[title="Align"]');
+            alignButtons.forEach(button => button.style.color = '#4ec9b0');
+        }
+        
+        if (text.match(/\\\w+/g)) {
+            // Commands are present
+        }
+        
+        if (text.match(/\$/g)) {
+            const mathButtons = document.querySelectorAll('.toolbar-button[title="Inline Math"]');
+            mathButtons.forEach(button => button.style.color = '#c586c0');
+        }
+    }
+    
+    // Set up an interval to periodically check and update highlighting
+    setInterval(applySyntaxHighlighting, 1000);
+});
+</script>
 """, unsafe_allow_html=True)
 
 # Function to create a functional VS Code-like toolbar
@@ -875,42 +880,6 @@ def render_status_bar():
     """
     st.markdown(status_html, unsafe_allow_html=True)
 
-# Create syntax highlighting for the code preview
-def syntax_highlight_latex(latex_code):
-    if not isinstance(latex_code, str):
-        try:
-            latex_code = str(latex_code)
-        except:
-            return "<pre>Invalid code</pre>"
-    
-    # Replace special HTML characters
-    latex_code = latex_code.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
-    
-    # Highlight LaTeX commands (starting with \)
-    latex_code = re.sub(r'(\\[a-zA-Z]+)(\{|\[|\s|$)', r'<span class="command">\1</span>\2', latex_code)
-    
-    # Highlight environment tags
-    latex_code = re.sub(r'(\\begin\{[^}]+\}|\\end\{[^}]+\})', r'<span class="environment">\1</span>', latex_code)
-    
-    # Highlight math modes
-    latex_code = re.sub(r'(\$\$.*?\$\$|\$.*?\$)', r'<span class="math">\1</span>', latex_code)
-    
-    # Highlight comments
-    latex_code = re.sub(r'(%.*$)', r'<span class="comment">\1</span>', latex_code)
-    
-    # Highlight package imports
-    latex_code = re.sub(r'(\\usepackage(\[.*?\])?\{[^}]+\})', r'<span class="package">\1</span>', latex_code)
-    
-    # Highlight brackets
-    latex_code = re.sub(r'(\{|\}|\[|\])', r'<span class="bracket">\1</span>', latex_code)
-    
-    return f'<div class="syntax-highlight">{latex_code}</div>'
-
-# Function to display the code with syntax highlighting
-def display_code_with_syntax_highlighting(latex_code):
-    highlighted_code = syntax_highlight_latex(latex_code)
-    st.markdown(highlighted_code, unsafe_allow_html=True)
-
 # Render a document outline based on section hierarchy
 def render_document_outline(structure):
     if not structure:
@@ -1083,34 +1052,15 @@ def render_environments_panel(environments):
     
     st.markdown('</div>', unsafe_allow_html=True)
 
-# Display keyboard shortcuts
-def render_keyboard_shortcuts():
-    st.markdown('<div class="shortcuts-container">', unsafe_allow_html=True)
-    st.markdown('<div style="font-weight:bold;margin-bottom:10px;">Keyboard Shortcuts</div>', unsafe_allow_html=True)
-    
-    shortcuts = [
-        ("Ctrl+B", "Insert bold text"),
-        ("Ctrl+I", "Insert italic text"),
-        ("Ctrl+M", "Insert inline math"),
-        ("Ctrl+E", "Insert equation"),
-        ("Ctrl+L", "Insert list"),
-        ("Ctrl+F", "Insert fraction"),
-        ("F5", "Compile document"),
-        ("Ctrl+S", "Save document"),
-        ("Ctrl+/", "Toggle comment"),
-        ("Tab", "Indent")
-    ]
-    
-    for key, description in shortcuts:
-        st.markdown(
-            f'<div class="shortcut-row">'
-            f'<span class="shortcut-keys">{key}</span>'
-            f'<span class="shortcut-description">{description}</span>'
-            f'</div>',
-            unsafe_allow_html=True
-        )
-    
-    st.markdown('</div>', unsafe_allow_html=True)
+# Display a simple F5 keyboard shortcut reminder
+def render_f5_shortcut():
+    st.markdown(
+        '<div class="shortcut-item">'
+        '<span class="shortcut-key">F5</span>'
+        '<span>Press F5 to compile the document</span>'
+        '</div>',
+        unsafe_allow_html=True
+    )
 
 # Main application
 def main():
@@ -1125,8 +1075,6 @@ def main():
         st.session_state.errors = []
     if 'warnings' not in st.session_state:
         st.session_state.warnings = []
-    if 'show_syntax_highlight' not in st.session_state:
-        st.session_state.show_syntax_highlight = False
     
     # Check installation status
     if not is_pdflatex_installed():
@@ -1137,7 +1085,7 @@ def main():
     
     with col1:
         # Create tabs for main editing area with VS Code style
-        editor_tabs = st.tabs(["Editor", "Preview", "Settings"])
+        editor_tabs = st.tabs(["Editor", "Settings"])
         
         with editor_tabs[0]:
             # VS Code-like editor interface
@@ -1149,8 +1097,8 @@ def main():
             # Toolbar with functional buttons
             render_functional_toolbar()
             
-            # Editor with VS Code styling
-            st.markdown('<div class="editor-area">', unsafe_allow_html=True)
+            # Editor with VS Code styling and syntax highlighting
+            st.markdown('<div id="syntax-highlighting-editor">', unsafe_allow_html=True)
             latex_code = st.text_area(
                 "",
                 value=st.session_state.latex_code,
@@ -1166,9 +1114,12 @@ def main():
             
             st.markdown('</div>', unsafe_allow_html=True)
             
+            # F5 shortcut reminder
+            render_f5_shortcut()
+            
             # Control buttons with VS Code styling
             st.markdown('<div class="button-group">', unsafe_allow_html=True)
-            compile_btn = st.button("Compile", help="Compile LaTeX to PDF")
+            compile_btn = st.button("Compile", help="Compile LaTeX to PDF (F5)")
             load_template_btn = st.button("Load Template", help="Load default template")
             clear_btn = st.button("Clear", help="Clear editor content")
             st.markdown('</div>', unsafe_allow_html=True)
@@ -1187,14 +1138,6 @@ def main():
                 st.rerun()
         
         with editor_tabs[1]:
-            # Show syntax highlighted preview
-            st.markdown("<h3>Syntax Highlighted Preview</h3>", unsafe_allow_html=True)
-            st.markdown("<p>This shows your LaTeX code with syntax highlighting</p>", unsafe_allow_html=True)
-            
-            # Display code with syntax highlighting
-            display_code_with_syntax_highlighting(st.session_state.latex_code)
-        
-        with editor_tabs[2]:
             st.markdown("<h3>LaTeX Settings</h3>", unsafe_allow_html=True)
             
             st.markdown('<div class="control-panel">', unsafe_allow_html=True)
@@ -1218,9 +1161,6 @@ def main():
                             index=0, key="editor_theme")
             
             st.markdown('</div>', unsafe_allow_html=True)
-            
-            # Display keyboard shortcuts
-            render_keyboard_shortcuts()
     
     with col2:
         # Output tabs with VS Code style
@@ -1310,7 +1250,7 @@ def main():
                                     output_format="PNG")
                     st.markdown('</div>', unsafe_allow_html=True)
             else:
-                st.info("Click 'Compile' to generate PDF output")
+                st.info("Click 'Compile' to generate PDF output or press F5")
         
         with output_tabs[1]:
             # Document structure/outline view (with type check)