{"id":6299,"date":"2025-08-04T23:27:02","date_gmt":"2025-08-04T17:57:02","guid":{"rendered":"https:\/\/usemynotes.com\/?page_id=6299"},"modified":"2025-08-10T21:31:46","modified_gmt":"2025-08-10T16:01:46","slug":"online-python-compiler","status":"publish","type":"page","link":"https:\/\/usemynotes.com\/online-python-compiler\/","title":{"rendered":"Online Python Compiler with AI Assistant"},"content":{"rendered":"<div id=\"tdi_1\" class=\"tdc-zone\"><div class=\"tdc_zone tdi_2  wpb_row td-pb-row\"  >\n<style scoped>\n\n\/* custom css *\/\n.tdi_2{\r\n                    min-height: 0;\r\n                }\n<\/style><div id=\"tdi_3\" class=\"tdc-row stretch_row_1400 td-stretch-content\"><div class=\"vc_row tdi_4  wpb_row td-pb-row\" >\n<style scoped>\n\n\/* custom css *\/\n.tdi_4,\r\n                .tdi_4 .tdc-columns{\r\n                    min-height: 0;\r\n                }.tdi_4,\r\n\t\t\t\t.tdi_4 .tdc-columns{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_4 .tdc-columns{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}\n<\/style><div class=\"vc_column tdi_6  wpb_column vc_column_container tdc-column td-pb-span12\">\n<style scoped>\n\n\/* custom css *\/\n.tdi_6{\r\n                    vertical-align: baseline;\r\n                }.tdi_6 > .wpb_wrapper,\r\n\t\t\t\t.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    display: block;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .tdc-elements{\r\n\t\t\t\t    width: 100%;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper > .vc_row_inner{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t}.tdi_6 > .wpb_wrapper{\r\n\t\t\t\t    width: auto;\r\n\t\t\t\t    height: auto;\r\n\t\t\t\t}\n<\/style><div class=\"wpb_wrapper\" ><div class=\"td_block_wrap td_block_text_with_title tdi_7 tagdiv-type td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_7\" >\n<style>\n\/* custom css *\/\n.td_block_text_with_title{\r\n                  margin-bottom: 44px;\r\n                  -webkit-transform: translateZ(0);\r\n                  transform: translateZ(0);\r\n                }.td_block_text_with_title p:last-child{\r\n                  margin-bottom: 0;\r\n                }\n<\/style><div class=\"td-block-title-wrap\"><\/div><div class=\"td_mod_wrap td-fix-index\"><p>Use our free Online Python Compiler to write, run, and test Python code instantly in your browser. No setup needed. Supports templates, output copy, and themes.<\/p>\n<\/div><\/div><div class=\"wpb_wrapper td_block_wrap vc_raw_html tdi_9 \"><div class=\"td-fix-index\"><link rel=\"preconnect\" href=\"https:\/\/cdnjs.cloudflare.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/cdn.jsdelivr.net\">\n  \n  <!-- Preload critical resources -->\n  <link rel=\"preload\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/codemirror.min.css\" as=\"style\">\n  <link rel=\"preload\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/codemirror.min.js\" as=\"script\">\n  <link rel=\"preload\" href=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.28.0\/full\/pyodide.js\" as=\"script\">\n  \n  <!-- Optimized CSS loading -->\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/codemirror.min.css\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/theme\/material-darker.min.css\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/theme\/eclipse.min.css\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/theme\/monokai.min.css\">\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/theme\/dracula.min.css\">\n  \n  <!-- Optimized script loading - removed duplicates -->\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/codemirror.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/mode\/python\/python.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/addon\/edit\/closebrackets.min.js\"><\/script>\n  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/codemirror\/5.65.5\/addon\/edit\/matchbrackets.min.js\"><\/script>\n  <script src=\"https:\/\/cdn.jsdelivr.net\/pyodide\/v0.28.0\/full\/pyodide.js\" defer><\/script>\n\n  <style>\n    \/* WordPress Compatible Styles - Scoped to avoid conflicts *\/\n    .python-compiler-wp {\n      --bg-color: #0a0a0a;\n      --panel-bg: #1a1a1a;\n      --output-bg: #0f0f0f;\n      --text-color: #e0e0e0;\n      --primary-color: #00d4aa;\n      --secondary-color: #ff6b6b;\n      --accent-color: #4ecdc4;\n      --border: #333333;\n      --shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n      --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n      --success-color: #00d4aa;\n      --error-color: #ff6b6b;\n      --warning-color: #ffa726;\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n      background: var(--bg-color);\n      color: var(--text-color);\n      border-radius: 12px;\n      overflow: hidden;\n      box-shadow: var(--shadow);\n      margin: 20px auto;\n      max-width: 100%;\n    }\n\n    .python-compiler-wp[data-theme=\"light\"] {\n      --bg-color: #f8f9fa;\n      --panel-bg: #ffffff;\n      --output-bg: #f8f9fa;\n      --text-color: #2c3e50;\n      --border: #e9ecef;\n      --shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n    }\n\n\n    \/* Header *\/\n    headerr {\n      background: var(--panel-bg);\n      padding: 1rem 1.5rem;\n      box-shadow: var(--shadow);\n      position: sticky;\n      top: 0;\n      z-index: 1000;\n      backdrop-filter: blur(10px);\n      border-bottom: 1px solid var(--border);\n    }\n\n    .header-contentt {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      max-width: 1400px;\n      margin: 0 auto;\n    }\n\n    .logoo {\n      display: flex;\n      align-items: center;\n      gap: 0.75rem;\n      font-size: 1.5rem;\n      font-weight: 700;\n      color: var(--primary-color);\n    }\n\n    .python-icon {\n      width: 32px;\n      height: 32px;\n      margin-right: 12px;\n      filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));\n      transition: transform 0.3s ease;\n    }\n\n    .python-icon:hover {\n      transform: scale(1.1);\n    }\n\n    .logoo h1 {\n      font-size: 1.1rem;\n      font-weight: 700;\n      color: var(--primary-color);\n      margin: 0;\n      padding: 0;\n      line-height: 1.2;\n    }\n\n    .header-controls {\n      display: flex;\n      gap: 1rem;\n      align-items: center;\n    }\n\n    .btn {\n      padding: 0.5rem 1rem;\n      border: none;\n      border-radius: 12px;\n      font-weight: 600;\n      cursor: pointer;\n      transition: all 0.3s ease;\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n      font-size: 0.9rem;\n      position: relative;\n      overflow: hidden;\n      backdrop-filter: blur(10px);\n    }\n\n    .btn::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: -100%;\n      width: 100%;\n      height: 100%;\n      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);\n      transition: left 0.5s;\n    }\n\n    .btn:hover::before {\n      left: 100%;\n    }\n\n    .btn-primary {\n      background: var(--gradient);\n      color: white;\n      box-shadow: 0 4px 15px rgba(0, 212, 170, 0.3);\n    }\n\n    .btn-secondary {\n      background: rgba(255, 255, 255, 0.1);\n      color: var(--text-color);\n      border: 1px solid var(--border);\n      backdrop-filter: blur(10px);\n    }\n\n    .btn:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);\n    }\n\n    .btn:active {\n      transform: translateY(0);\n    }\n\n    .btn:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n      transform: none;\n    }\n\n    \/* Main Container *\/\n    .container {\n      max-width: 1400px;\n      margin: 0 auto;\n      padding: 1rem;\n    }\n\n    .main-grid {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 1rem;\n    }\n\n    \/* Panels *\/\n    .panel {\n      background: var(--panel-bg);\n      border-radius: 20px;\n      padding: 1.5rem;\n      box-shadow: var(--shadow);\n      border: 1px solid var(--border);\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .panel::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 4px;\n      background: var(--gradient);\n    }\n\n    .panel:hover {\n      transform: translateY(-5px);\n      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 0.75rem;\n      padding-bottom: 0.75  rem;\n      border-bottom: 1px solid var(--border);\n    }\n\n    .panel-title {\n      font-size: 1rem;\n      font-weight: 600;\n      color: var(--primary-color);\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .panel-controls {\n      display: flex;\n      gap: 0.5rem;\n    }\n\n    .control-btn {\n      padding: 0.5rem;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--text-color);\n      cursor: pointer;\n      transition: all 0.3s ease;\n      font-size: 1rem;\n    }\n\n    .control-btn:hover {\n      background: var(--border);\n      color: var(--primary-color);\n    }\n\n\n\n    \/* CodeMirror Customization *\/\n    .CodeMirror {\n      height: 400px !important;\n      border-radius: 12px;\n      font-size: 14px;\n      font-family: 'JetBrains Mono', 'Fira Code', monospace;\n      border: 1px solid var(--border);\n      background: var(--output-bg) !important;\n    }\n\n    .CodeMirror-gutters {\n      background: var(--panel-bg) !important;\n      border-right: 1px solid var(--border) !important;\n    }\n\n    \/* Output Panel *\/\n    .output-container {\n      position: relative;\n    }\n\n    .output-box {\n      background: var(--output-bg);\n      padding: 1.5rem;\n      border-radius: 12px;\n      height: 400px;\n      overflow-y: auto;\n      font-family: 'JetBrains Mono', 'Fira Code', monospace;\n      white-space: pre-wrap;\n      border: 1px solid var(--border);\n      font-size: 14px;\n      line-height: 1.6;\n    }\n\n    .output-line {\n      margin-bottom: 0.5rem;\n      padding: 0.25rem 0;\n    }\n\n    .output-success {\n      color: var(--success-color);\n    }\n\n    .output-error {\n      color: var(--error-color);\n      background: rgba(255, 107, 107, 0.1);\n      padding: 0.5rem;\n      border-radius: 8px;\n      margin: 0.5rem 0;\n    }\n\n    .output-warning {\n      color: var(--warning-color);\n    }\n\n    \/* Status Bar *\/\n    .status-bar {\n      background: var(--panel-bg);\n      padding: 1rem 2rem;\n      border-top: 1px solid var(--border);\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: 0.9rem;\n      color: var(--text-color);\n    }\n\n    .status-item {\n      display: flex;\n      align-items: center;\n      gap: 0.5rem;\n    }\n\n    .status-indicator {\n      width: 8px;\n      height: 8px;\n      border-radius: 50%;\n      background: var(--success-color);\n      animation: pulse 2s infinite;\n    }\n\n    @keyframes pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n\n    \/* Loading Animation *\/\n    .loading {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      border: 3px solid var(--border);\n      border-radius: 50%;\n      border-top-color: var(--primary-color);\n      animation: spin 1s ease-in-out infinite;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    \/* Responsive Design *\/\n    @media (max-width: 1024px) {\n      .main-grid {\n        grid-template-columns: 1fr;\n        gap: 1.5rem;\n      }\n      \n      .container {\n        padding: 1rem;\n      }\n    }\n\n    @media (max-width: 768px) {\n      .header-contentt {\n        flex-direction: column;\n        gap: 1rem;\n      }\n      \n      .header-controls {\n        width: 100%;\n        justify-content: center;\n      }\n      \n      .btn {\n        padding: 0.5rem 1rem;\n        font-size: 0.8rem;\n      }\n      \n      .panel {\n        padding: 1rem;\n      }\n      \n      .CodeMirror {\n        height: 300px !important;\n      }\n      \n      .output-box {\n        height: 300px;\n      }\n      \n      .stats {\n        grid-template-columns: repeat(2, 1fr);\n        gap: 0.75rem;\n        padding: 1rem;\n      }\n      \n      .stat-item {\n        padding: 0.75rem;\n        font-size: 0.9rem;\n      }\n      \n      .stat-item span {\n        font-size: 0.8rem;\n      }\n      \n      .stat-value {\n        font-size: 1rem;\n      }\n      \n      \/* Template button mobile responsiveness *\/\n      .panel-controls {\n        display: flex;\n        gap: 0.5rem;\n        align-items: center;\n        flex-wrap: wrap;\n      }\n      \n      .template-btn {\n        padding: 0.5rem 0.75rem;\n        font-size: 0.8rem;\n        border-radius: 8px;\n        background: var(--panel-bg);\n        border: 1px solid var(--border);\n        color: var(--text-color);\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-weight: 500;\n        width: 150px;\n      }\n      \n      .template-btn:hover {\n        background: var(--primary-color);\n        color: white;\n        transform: translateY(-1px);\n        box-shadow: 0 2px 6px rgba(0, 212, 170, 0.2);\n      }\n      \n      .template-btn:focus {\n        outline: none;\n        border-color: var(--primary-color);\n        box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15);\n      }\n    }\n\n    @media (max-width: 480px) {\n      .stats {\n        grid-template-columns: 1fr;\n        gap: 0.5rem;\n        padding: 0.75rem;\n      }\n      \n      .stat-item {\n        padding: 0.6rem;\n        font-size: 0.85rem;\n      }\n      \n      .stat-item span {\n        font-size: 0.75rem;\n      }\n      \n      .stat-value {\n        font-size: 0.9rem;\n      }\n      \n      \/* Enhanced template button for very small screens *\/\n      .panel-controls {\n        gap: 0.25rem;\n      }\n      \n      .template-btn {\n        padding: 0.4rem 0.6rem;\n        font-size: 0.75rem;\n        border-radius: 6px;\n        font-weight: 500;\n        width: 120px;\n      }\n      \n      .template-btn:hover {\n        transform: translateY(-1px);\n        box-shadow: 0 2px 4px rgba(0, 212, 170, 0.2);\n      }\n    }\n\n    \/* WordPress Integration Styles *\/\n    .python-compiler-wp {\n      max-width: 100%;\n      margin: 20px auto;\n    }\n\n    \/* Ensure compatibility with WordPress themes *\/\n    .python-compiler-wp .btn,\n    .python-compiler-wp .control-btn,\n    .python-compiler-wp .template-btn {\n      font-family: inherit;\n    }\n\n    \/* WordPress responsive compatibility *\/\n    @media (max-width: 600px) {\n      .python-compiler-wp {\n        margin: 10px 0;\n        border-radius: 8px;\n      }\n      \n      .python-compiler-wp .header {\n        padding: 0.75rem 1rem;\n      }\n      \n      .python-compiler-wp .container {\n        padding: 0.5rem;\n      }\n      \n      .python-compiler-wp .panel {\n        padding: 0.5rem;\n      }\n      \n      .python-compiler-wp .CodeMirror {\n        height: 200px !important;\n        font-size: 12px;\n      }\n      \n      .python-compiler-wp .output-box {\n        height: 200px;\n        font-size: 12px;\n      }\n      \n      \/* WordPress template button responsiveness *\/\n      .python-compiler-wp .panel-controls {\n        display: flex;\n        gap: 0.4rem;\n        align-items: center;\n        flex-wrap: wrap;\n      }\n      \n      .python-compiler-wp .template-btn {\n        padding: 0.4rem 0.5rem;\n        font-size: 0.75rem;\n        border-radius: 6px;\n        background: var(--panel-bg);\n        border: 1px solid var(--border);\n        color: var(--text-color);\n        cursor: pointer;\n        transition: all 0.3s ease;\n        font-weight: 500;\n        width: 120px;\n      }\n      \n      .python-compiler-wp .template-btn:hover {\n        background: var(--primary-color);\n        color: white;\n        transform: translateY(-1px);\n        box-shadow: 0 2px 4px rgba(0, 212, 170, 0.15);\n      }\n      \n      .python-compiler-wp .template-btn:focus {\n        outline: none;\n        border-color: var(--primary-color);\n        box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.1);\n      }\n    }\n\n    \/* Animations *\/\n    .fade-in {\n      animation: fadeIn 0.5s ease-in;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; transform: translateY(20px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    .slide-in {\n      animation: slideIn 0.3s ease-out;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateX(-100%); }\n      to { transform: translateX(0); }\n    }\n\n    \/* Theme Toggle *\/\n    .theme-toggle {\n      position: relative;\n      width: 60px;\n      height: 30px;\n      background: var(--border);\n      border-radius: 15px;\n      cursor: pointer;\n      transition: all 0.3s ease;\n    }\n\n    .theme-toggle::before {\n      content: '\ud83c\udf19';\n      position: absolute;\n      left: 5px;\n      top: 50%;\n      transform: translateY(-50%);\n      transition: all 0.3s ease;\n    }\n\n    [data-theme=\"light\"] .theme-toggle::before {\n      content: '\u2600\ufe0f';\n      left: 35px;\n    }\n\n    \/* Code Templates *\/\n    .template-selector {\n      position: absolute;\n      top: 1rem;\n      right: 1rem;\n      z-index: 10;\n    }\n\n    .template-btn {\n      padding: 0.5rem 0.75rem;\n      background: var(--panel-bg);\n      border: 1px solid var(--border);\n      border-radius: 8px;\n      color: var(--text-color);\n      cursor: pointer;\n      font-size: 0.8rem;\n      transition: all 0.3s ease;\n      margin-right: 0.5rem;\n      font-weight: 500;\n      width: 180px;\n    }\n\n    .template-btn:hover {\n      background: var(--primary-color);\n      color: white;\n      transform: translateY(-1px);\n      box-shadow: 0 2px 6px rgba(0, 212, 170, 0.2);\n    }\n\n    .template-btn:focus {\n      outline: none;\n      border-color: var(--primary-color);\n      box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.15);\n    }\n\n    \/* Floating Action Button *\/\n    .fabb {\n      position: fixed;\n      bottom: 2rem;\n      right: 2rem;\n      width: 60px;\n      height: 60px;\n      background: var(--gradient);\n      border: none;\n      border-radius: 50%;\n      color: white;\n      font-size: 1.5rem;\n      cursor: pointer;\n      box-shadow: 0 8px 25px rgba(0, 212, 170, 0.4);\n      transition: all 0.3s ease;\n      z-index: 1000;\n    }\n\n    .fabb:hover {\n      transform: scale(1.1);\n      box-shadow: 0 12px 35px rgba(0, 212, 170, 0.6);\n    }\n\n    \/* Progress Bar *\/\n    .progress-bar {\n      position: fixed;\n      top: 0;\n      left: 0;\n      width: 0%;\n      height: 3px;\n      background: var(--gradient);\n      z-index: 10001;\n      transition: width 0.3s ease;\n    }\n\n    \/* Loading Spinner *\/\n    .spinner {\n      display: inline-block;\n      width: 20px;\n      height: 20px;\n      border: 3px solid var(--border);\n      border-radius: 50%;\n      border-top-color: var(--primary-color);\n      animation: spin 1s ease-in-out infinite;\n    }\n\n    @keyframes spin {\n      to { transform: rotate(360deg); }\n    }\n\n    \/* Code Statistics *\/\n    .stats {\n      display: inline-flex;\n      grid-template-columns: repeat(4, 1fr);\n      gap: 1rem;\n      margin-top: 1rem;\n      padding: 1.5rem;\n      background: linear-gradient(135deg, var(--panel-bg) 0%, rgba(255,255,255,0.05) 100%);\n      border-radius: 12px;\n      border: 1px solid var(--border);\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      padding: 1rem;\n      background: var(--panel-bg);\n      border-radius: 10px;\n      border: 1px solid var(--border);\n      transition: all 0.3s ease;\n      position: relative;\n      overflow: hidden;\n    }\n\n    .stat-item::before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 3px;\n      background: var(--gradient);\n    }\n\n    .stat-item:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);\n    }\n\n    .stat-item span {\n      font-size: 0.85rem;\n      color: var(--text-color);\n      opacity: 0.8;\n      font-weight: 500;\n      margin-bottom: 0.5rem;\n    }\n\n    .stat-value {\n      font-size: 1.2rem;\n      font-weight: 700;\n      color: var(--primary-color);\n      margin-top: 0.25rem;\n    }\n\n    \/* Toast Notifications *\/\n    .toast {\n      position: fixed;\n      top: 2rem;\n      right: 2rem;\n      padding: 1rem 1.5rem;\n      border-radius: 12px;\n      color: white;\n      font-weight: 600;\n      z-index: 10000;\n      animation: slideInRight 0.3s ease-out;\n    }\n\n    .toast-success {\n      background: var(--success-color);\n    }\n\n    .toast-error {\n      background: var(--error-color);\n    }\n\n    @keyframes slideInRight {\n      from { transform: translateX(100%); }\n      to { transform: translateX(0); }\n    }\n  <\/style>\n  <div class=\"python-compiler-wp\" id=\"pythonCompiler\">\n    <div class=\"progress-bar\" id=\"progressBar\"><\/div>\n    <header class=\"headerr\">\n    <div class=\"header-contentt\">\n      <div class=\"logoo\">\n        <img decoding=\"async\" src=\"https:\/\/usemynotes.com\/wp-content\/uploads\/2025\/08\/python-icon.webp\" alt=\"Python\" class=\"python-icon\" loading=\"lazy\" title=\"\">\n        <h1>Online Python Compiler<\/h1>\n      <\/div>\n      <div class=\"header-controls\">\n        <button class=\"btn btn-secondary\" onclick=\"toggleTheme()\">\n          \ud83c\udf19 Theme\n        <\/button>\n        <button class=\"btn btn-secondary\" onclick=\"downloadCode()\">\n          \u2b07 Download\n        <\/button>\n        <button class=\"btn btn-primary\" onclick=\"runCode()\" id=\"runButton\">\n          \u25b6 <span id=\"runText\">Run Code<\/span>\n        <\/button>\n      <\/div>\n    <\/div>\n  <\/header>\n\n  <div class=\"container\">\n    <div class=\"main-grid\">\n      <div class=\"panel fade-in\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            \ud83d\udcbb Code Editor\n          <\/div>\n          <div class=\"panel-controls\">\n            <select class=\"template-btn\" onchange=\"loadTemplate(this.value)\">\n              <option value=\"\">\ud83d\udccb Templates<\/option>\n              <option value=\"hello\">Hello World<\/option>\n              <option value=\"fibonacci\">Basic Fibonacci Sequence<\/option>\n              <option value=\"hanoi\">Tower of Hanoi<\/option>\n              <option value=\"lcs\">Longest Common Subsequence<\/option>\n              <option value=\"calculator\">Basic Python Calculator<\/option>\n            <\/select>\n          <\/div>\n        <\/div>\n        <textarea id=\"codeEditor\"># Welcome to Python Online Compiler!\n# Start coding below...\n\nprint(\"Hello, World!\")\nprint(\"Welcome to the Python Online Compiler!\")\n\n# Try some basic operations\nx = 10\ny = 5\nprint(f\"Sum: {x + y}\")\nprint(f\"Product: {x * y}\")\n\n# List operations\nnumbers = [1, 2, 3, 4, 5]\nprint(f\"Numbers: {numbers}\")\nprint(f\"Sum of numbers: {sum(numbers)}\")<\/textarea>\n      <\/div>\n\n      <div class=\"panel fade-in\">\n        <div class=\"panel-header\">\n          <div class=\"panel-title\">\n            \ud83d\udcdf Output\n          <\/div>\n          <div class=\"panel-controls\">\n            <button class=\"control-btn\" onclick=\"clearOutput()\" title=\"Clear Output\">\n              \ud83d\uddd1\ufe0f\n            <\/button>\n            <button class=\"control-btn\" onclick=\"copyOutput()\" title=\"Copy Output\">\n              \ud83d\udccb\n            <\/button>\n          <\/div>\n        <\/div>\n        <div id=\"outputDisplay\" class=\"output-box\">\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <div class=\"status-bar\">\n    <div class=\"status-item\">\n      <div class=\"status-indicator\"><\/div>\n      <span id=\"statusText\">Ready<\/span>\n    <\/div>\n    <div class=\"status-item\">\n      <span id=\"executionTime\">0ms<\/span>\n    <\/div>\n    <div class=\"status-item\">\n      <span id=\"lineCount\">0 lines<\/span>\n    <\/div>\n  <\/div>\n\n  <button class=\"fabb\" onclick=\"runCode()\" title=\"Run Code\">\n    \u25b6\n  <\/button>\n\n  <\/div>\n\n  <script>\n    \/\/ Optimized JavaScript - Minified and improved performance\n    let editor, pyodide;\n    let isRunning = false;\n    let startTime;\n\n    \/\/ Code templates - optimized for performance\n    const templates = {\n      hello: `# Hello World\nprint(\"Hello, World!\")\nprint(\"Welcome to Python Programming!\")`,\n\n      fibonacci: `# Basic Fibonacci Sequence\ndef fibonacci(n):\n    \"\"\"Calculate the nth Fibonacci number\"\"\"\n    if n <= 1:\n        return n\n    return fibonacci(n-1) + fibonacci(n-2)\n\n# Print first 15 Fibonacci numbers\nprint(\"Fibonacci Sequence (first 15 numbers):\")\nfor i in range(15):\n    print(f\"F({i}) = {fibonacci(i)}\")\n\n# Using iterative approach\ndef fibonacci_iterative(n):\n    if n <= 1:\n        return n\n    a, b = 0, 1\n    for _ in range(2, n + 1):\n        a, b = b, a + b\n    return b\n\nprint(\"\\\\nUsing iterative approach:\")\nfor i in range(10):\n    print(f\"F({i}) = {fibonacci_iterative(i)}\")`,\n\n      hanoi: `# Tower of Hanoi\ndef tower_of_hanoi(n, source, auxiliary, target):\n    \"\"\"Solve Tower of Hanoi puzzle\"\"\"\n    if n == 1:\n        print(f\"Move disk 1 from {source} to {target}\")\n        return\n    \n    tower_of_hanoi(n-1, source, target, auxiliary)\n    print(f\"Move disk {n} from {source} to {target}\")\n    tower_of_hanoi(n-1, auxiliary, source, target)\n\n# Solve Tower of Hanoi with 3 disks\nprint(\"Tower of Hanoi Solution (3 disks):\")\ntower_of_hanoi(3, 'A', 'B', 'C')\n\nprint(\"\\\\nTower of Hanoi Solution (4 disks):\")\ntower_of_hanoi(4, 'A', 'B', 'C')`,\n\n      lcs: `# Longest Common Subsequence\ndef longest_common_subsequence(str1, str2):\n    \"\"\"Find the longest common subsequence of two strings\"\"\"\n    m, n = len(str1), len(str2)\n    dp = [[0] * (n + 1) for _ in range(m + 1)]\n    \n    # Fill the dp table\n    for i in range(1, m + 1):\n        for j in range(1, n + 1):\n            if str1[i-1] == str2[j-1]:\n                dp[i][j] = dp[i-1][j-1] + 1\n            else:\n                dp[i][j] = max(dp[i-1][j], dp[i][j-1])\n    \n    # Reconstruct the LCS\n    lcs = []\n    i, j = m, n\n    while i > 0 and j > 0:\n        if str1[i-1] == str2[j-1]:\n            lcs.append(str1[i-1])\n            i -= 1\n            j -= 1\n        elif dp[i-1][j] > dp[i][j-1]:\n            i -= 1\n        else:\n            j -= 1\n    \n    return ''.join(reversed(lcs)), dp[m][n]\n\n# Test cases\nstr1 = \"ABCDGH\"\nstr2 = \"AEDFHR\"\nlcs_result, length = longest_common_subsequence(str1, str2)\nprint(f\"String 1: {str1}\")\nprint(f\"String 2: {str2}\")\nprint(f\"Longest Common Subsequence: {lcs_result}\")\nprint(f\"Length: {length}\")\n\n# Another test case\nstr3 = \"AGGTAB\"\nstr4 = \"GXTXAYB\"\nlcs_result2, length2 = longest_common_subsequence(str3, str4)\nprint(f\"\\\\nString 1: {str3}\")\nprint(f\"String 2: {str4}\")\nprint(f\"Longest Common Subsequence: {lcs_result2}\")\nprint(f\"Length: {length2}\")`,\n\n      calculator: `# Basic Python Calculator\ndef calculator():\n    \"\"\"Simple calculator with basic operations\"\"\"\n    print(\"Basic Python Calculator\")\n    print(\"Operations: +, -, *, \/, **, %\")\n    \n    try:\n        num1 = float(input(\"Enter first number: \"))\n        operator = input(\"Enter operator: \")\n        num2 = float(input(\"Enter second number: \"))\n        \n        if operator == '+':\n            result = num1 + num2\n        elif operator == '-':\n            result = num1 - num2\n        elif operator == '*':\n            result = num1 * num2\n        elif operator == '\/':\n            if num2 == 0:\n                print(\"Error: Division by zero!\")\n                return\n            result = num1 \/ num2\n        elif operator == '**':\n            result = num1 ** num2\n        elif operator == '%':\n            result = num1 % num2\n        else:\n            print(\"Invalid operator!\")\n            return\n        \n        print(f\"{num1} {operator} {num2} = {result}\")\n        \n    except ValueError:\n        print(\"Error: Please enter valid numbers!\")\n\n# Run calculator\ncalculator()\n\n# Example calculations\nprint(\"\\\\nExample calculations:\")\nprint(f\"5 + 3 = {5 + 3}\")\nprint(f\"10 - 4 = {10 - 4}\")\nprint(f\"6 * 7 = {6 * 7}\")\nprint(f\"15 \/ 3 = {15 \/ 3}\")\nprint(f\"2 ** 8 = {2 ** 8}\")\nprint(f\"17 % 5 = {17 % 5}\")`\n    };\n\n    \/\/ Optimized async function with better error handling\n    async function initPyodide() {\n      try {\n        updateStatus('Loading Pyodide...', 'loading');\n        pyodide = await loadPyodide();\n        pyodide.setStdout({ batched: text => updateOutput(text, 'success') });\n        pyodide.setStderr({ batched: text => updateOutput(text, 'error') });\n        pyodide.setStdin({ stdin: () => prompt(\"Input for Python:\") + \"\\n\" });\n        updateStatus('Ready', 'ready');\n        updateOutput('\u2705 Python Compiler loaded successfully!\\n', 'success');\n      } catch (error) {\n        updateStatus('Error loading Pyodide', 'error');\n        updateOutput(`\u274c Error loading Pyodide: ${error.message}\\n`, 'error');\n      }\n    }\n\n    \/\/ Optimized output update function\n    function updateOutput(text, type = 'normal') {\n      const output = document.getElementById(\"outputDisplay\");\n      const line = document.createElement(\"div\");\n      line.className = `output-line output-${type}`;\n      line.textContent = text;\n      output.appendChild(line);\n      output.scrollTop = output.scrollHeight;\n    }\n\n    function clearOutput() {\n      document.getElementById(\"outputDisplay\").innerHTML = '';\n    }\n\n    function clearEditor() {\n      if (confirm('Are you sure you want to clear the editor?')) {\n        editor.setValue('');\n        updateLineCount();\n      }\n    }\n\n    function copyOutput() {\n      const output = document.getElementById(\"outputDisplay\").innerText;\n      navigator.clipboard.writeText(output).then(() => {\n        \/\/ Output copied silently\n      }).catch(() => {\n        \/\/ Copy failed silently\n      });\n    }\n\n    \/\/ Optimized run code function with better performance\n    async function runCode() {\n      if (isRunning) return;\n      \n      isRunning = true;\n      startTime = Date.now();\n      updateStatus('Running...', 'running');\n      showProgress(true);\n      \n      const runButton = document.getElementById('runButton');\n      const runText = document.getElementById('runText');\n      \n      runButton.disabled = true;\n      runButton.innerHTML = '\u23f3 <span id=\"runText\">Running...<\/span>';\n      \n      clearOutput();\n      const code = editor.getValue();\n      \n      if (!code.trim()) {\n        updateOutput('\u26a0\ufe0f No code to run. Please enter some Python code.', 'warning');\n        updateStatus('Ready', 'ready');\n        isRunning = false;\n        showProgress(false);\n        return;\n      }\n\n      try {\n        await pyodide.runPythonAsync(code);\n        const executionTime = Date.now() - startTime;\n        updateExecutionTime(executionTime);\n        updateStatus('Completed', 'ready');\n        \n        addExecutionStats(code, executionTime);\n      } catch (err) {\n        updateOutput(`\u274c Error: ${err.message}\\n`, 'error');\n        updateStatus('Error', 'error');\n      }\n      \n      isRunning = false;\n      showProgress(false);\n      \n      runButton.disabled = false;\n      runButton.innerHTML = '\u25b6 <span id=\"runText\">Run Code<\/span>';\n    }\n\n    function addExecutionStats(code, executionTime) {\n      const lines = code.split('\\n').length;\n      const chars = code.length;\n      const words = code.split(\/\\s+\/).length;\n      \n      const statsHtml = `\n        <div class=\"stats\">\n          <div class=\"stat-item\">\n            <span>Execution Time<\/span>\n            <div class=\"stat-value\">${executionTime}ms<\/div>\n          <\/div>\n          <div class=\"stat-item\">\n            <span>Code Lines<\/span>\n            <div class=\"stat-value\">${lines}<\/div>\n          <\/div>\n          <div class=\"stat-item\">\n            <span>Characters<\/span>\n            <div class=\"stat-value\">${chars}<\/div>\n          <\/div>\n          <div class=\"stat-item\">\n            <span>Words<\/span>\n            <div class=\"stat-value\">${words}<\/div>\n          <\/div>\n        <\/div>\n      `;\n      \n      const output = document.getElementById(\"outputDisplay\");\n      const statsDiv = document.createElement(\"div\");\n      statsDiv.innerHTML = statsHtml;\n      output.appendChild(statsDiv);\n    }\n\n    function updateStatus(text, type) {\n      const statusText = document.getElementById(\"statusText\");\n      const indicator = document.querySelector(\".status-indicator\");\n      \n      statusText.textContent = text;\n      \n      indicator.className = \"status-indicator\";\n      if (type === 'loading') indicator.style.background = 'var(--warning-color)';\n      else if (type === 'error') indicator.style.background = 'var(--error-color)';\n      else indicator.style.background = 'var(--success-color)';\n    }\n\n    function updateExecutionTime(time) {\n      document.getElementById(\"executionTime\").textContent = `${time}ms`;\n    }\n\n    function updateLineCount() {\n      const lines = editor.getValue().split('\\n').length;\n      document.getElementById(\"lineCount\").textContent = `${lines} lines`;\n    }\n\n    function toggleTheme() {\n      const compiler = document.getElementById('pythonCompiler');\n      const current = compiler.getAttribute(\"data-theme\");\n      const newTheme = current === \"light\" ? \"dark\" : \"light\";\n      \n      if (newTheme === \"light\") {\n        compiler.setAttribute(\"data-theme\", \"light\");\n        editor.setOption(\"theme\", \"eclipse\");\n      } else {\n        compiler.removeAttribute(\"data-theme\");\n        editor.setOption(\"theme\", \"material-darker\");\n      }\n      \n      localStorage.setItem(\"python_compiler_theme\", newTheme);\n    }\n\n    function downloadCode() {\n      const code = editor.getValue();\n      const blob = new Blob([code], { type: \"text\/plain\" });\n      const link = document.createElement(\"a\");\n      link.href = URL.createObjectURL(blob);\n      link.download = \"python_code.py\";\n      link.click();\n    }\n\n    function loadTemplate(templateName) {\n      if (templateName && templates[templateName]) {\n        editor.setValue(templates[templateName]);\n        updateLineCount();\n      }\n    }\n\n    function toggleFullscreen() {\n      const editorPanel = document.querySelector('.panel:first-child');\n      editorPanel.style.position = editorPanel.style.position === 'fixed' ? 'relative' : 'fixed';\n      editorPanel.style.top = editorPanel.style.position === 'fixed' ? '0' : 'auto';\n      editorPanel.style.left = editorPanel.style.position === 'fixed' ? '0' : 'auto';\n      editorPanel.style.width = editorPanel.style.position === 'fixed' ? '100vw' : 'auto';\n      editorPanel.style.height = editorPanel.style.position === 'fixed' ? '100vh' : 'auto';\n      editorPanel.style.zIndex = editorPanel.style.position === 'fixed' ? '10000' : 'auto';\n      \n      if (editorPanel.style.position === 'fixed') {\n        editorPanel.innerHTML += '<button class=\"control-btn\" onclick=\"toggleFullscreen()\" style=\"position: absolute; top: 1rem; right: 1rem;\"><i class=\"fas fa-compress\"><\/i><\/button>';\n      }\n    }\n\n\n\n    \/\/ Optimized keyboard shortcuts with better event handling\n    document.addEventListener('keydown', (e) => {\n      if (e.ctrlKey || e.metaKey) {\n        switch(e.key) {\n          case 'Enter':\n            e.preventDefault();\n            runCode();\n            break;\n          case 's':\n            e.preventDefault();\n            downloadCode();\n            break;\n          case 't':\n            e.preventDefault();\n            toggleTheme();\n            break;\n        }\n      }\n      \n      if (e.key === 'F1') {\n        e.preventDefault();\n        toggleShortcutsHelp();\n      }\n    });\n\n    function toggleShortcutsHelp() {\n      const help = document.getElementById('shortcutsHelp');\n      help.classList.toggle('show');\n    }\n\n    function showProgress(show = true) {\n      const progressBar = document.getElementById('progressBar');\n      if (show) {\n        progressBar.style.width = '100%';\n        setTimeout(() => {\n          progressBar.style.width = '0%';\n        }, 1000);\n      } else {\n        progressBar.style.width = '0%';\n      }\n    }\n\n    \/\/ Optimized window load function with better initialization\n    window.onload = async () => {\n      \/\/ Initialize CodeMirror with optimized settings\n      editor = CodeMirror.fromTextArea(document.getElementById(\"codeEditor\"), {\n        mode: \"python\",\n        theme: localStorage.getItem(\"theme\") === \"light\" ? \"eclipse\" : \"material-darker\",\n        lineNumbers: true,\n        indentUnit: 4,\n        tabSize: 4,\n        lineWrapping: true,\n        autoCloseBrackets: true,\n        matchBrackets: true,\n        extraKeys: {\n          \"Ctrl-Enter\": runCode,\n          \"Cmd-Enter\": runCode\n        }\n      });\n\n      \/\/ Load saved theme\n      if (localStorage.getItem(\"python_compiler_theme\") === \"light\") {\n        document.getElementById('pythonCompiler').setAttribute(\"data-theme\", \"light\");\n      }\n\n      \/\/ Load saved code\n      if (localStorage.getItem(\"python_compiler_code\")) {\n        editor.setValue(localStorage.getItem(\"python_compiler_code\"));\n      }\n\n      \/\/ Optimized change event handler\n      editor.on('change', () => {\n        updateLineCount();\n        localStorage.setItem(\"python_compiler_code\", editor.getValue());\n      });\n\n      \/\/ Initialize Pyodide\n      await initPyodide();\n      \n      \/\/ Initial line count\n      updateLineCount();\n    };\n  <\/script><\/div><\/div><div class=\"td_block_wrap td_block_text_with_title tdi_10 tagdiv-type td-pb-border-top td_block_template_1\"  data-td-block-uid=\"tdi_10\" ><div class=\"td-block-title-wrap\"><\/div><div class=\"td_mod_wrap td-fix-index\"><h2>Python Online Compiler \u2013 Key Features<\/h2>\n<ol>\n<li>Run Python Code Instantly: Execute Python scripts directly in your browser without any installation or setup.<\/li>\n<li>Beautiful Code Editor with Syntax Highlighting: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Built with CodeMirror for a smooth and clean coding experience with Python syntax support.<\/span><\/li>\n<li>Dark and Light Theme Toggle: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Switch between light and dark mode for comfort during day or night coding.<\/span><\/li>\n<li>Pre-built Code Templates: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Insert ready-to-use Python templates like Hello World, Fibonacci, and Calculator to get started faster.<\/span><\/li>\n<li>Download Your Code: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Export your Python code as a .py file instantly for offline use or backup.<\/span><\/li>\n<li>Copy Output to Clipboard: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">One-click output copying for sharing results or debugging effortlessly.<\/span><\/li>\n<li>Output Animation and Real-Time Display: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Real-time output display with smooth transitions and scroll to latest output.<\/span><\/li>\n<li>Run Statistics Tracking: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Keeps count of how many times you&#8217;ve executed code \u2013 helps track learning progress.<\/span><\/li>\n<li>Responsive Design: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Fully mobile-friendly \u2014 code on the go from your smartphone or tablet.<\/span><\/li>\n<li>No Signup Required: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Start coding immediately without creating an account or logging in.<\/span><\/li>\n<li>Works in Any Modern Browser: <span style=\"font-family: Verdana, BlinkMacSystemFont, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\">Compatible with Chrome, Firefox, Safari, Edge, and all modern web browsers.<\/span><\/li>\n<\/ol>\n<\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":6324,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6299","page","type-page","status-publish","has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/pages\/6299","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/comments?post=6299"}],"version-history":[{"count":40,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/pages\/6299\/revisions"}],"predecessor-version":[{"id":6328,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/pages\/6299\/revisions\/6328"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media\/6324"}],"wp:attachment":[{"href":"https:\/\/usemynotes.com\/wp-json\/wp\/v2\/media?parent=6299"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}