script src https cdnjs cloudflare com ajax libs prism 1 24 1 prism min js script link rel stylesheet href https cdnjs cloudflare com ajax libs prism 1 24 1 themes prism min css div id output div div input type file id file input style body min height 600px cell margin bottom 10px input output margin left 30px prompt display inline block width 70px font weight bold color 999 language python font family monospace background color f7f7f7 padding 5px margin 0 overflow x auto output_area margin top 10px style script Example usage const fileInput document getElementById file input const outputDiv document getElementById output div console log outputDiv outputDiv Function to load and parse the IPython Notebook file function loadIPythonNotebook file return new Promise resolve reject const reader new FileReader reader onload try const parsedData JSON parse reader result resolve parsedData catch error reject error reader onerror reject reader readAsText file Function to generate HTML output with Jupyter Notebook styling function generateHTML notebookData let htmlOutput Iterate over notebook cells notebookData cells forEach cell Check cell type if cell cell_type code htmlOutput div class cell Source code htmlOutput div class input htmlOutput div class prompt In nbsp nbsp nbsp div htmlOutput pre code class language python htmlOutput escapeHTML cell source join htmlOutput code pre htmlOutput div Executed output if cell outputs length 0 htmlOutput div class output cell outputs forEach output index htmlOutput div class output_area htmlOutput div class prompt Out index div if output output_type execute_result htmlOutput pre code class language python htmlOutput escapeHTML output data text plain htmlOutput code pre htmlOutput div htmlOutput div htmlOutput div return htmlOutput Helper function to escape HTML entities function escapeHTML text const div document createElement div div textContent text return div innerHTML fileInput addEventListener change async event const file event target files 0 try const parsedData await loadIPythonNotebook file const htmlOutput generateHTML parsedData outputDiv innerHTML htmlOutput Apply syntax highlighting using Prism js Prism highlightAll catch error console error error script
Source code htmlOutput div class input htmlOutput div class prompt In nbsp nbsp nbsp div htmlOutput pre code class language python htmlOutput escapeHTML cell source join htmlOutput code pre htmlOutput div Executed output if cell outputs length 0 htmlOutput div class output cell outputs forEach output index htmlOutput div class output_area htmlOutput div class prompt Out index div if output output_type execute_result htmlOutput pre code class language python htmlOutput escapeHTML output data text plain htmlOutput code pre htmlOutput div htmlOutput div htmlOutput div return htmlOutput Helper function to escape HTML entities function escapeHTML text const div document createElement div div textContent text return div innerHTML fileInput addEventListener change async event const file event target files 0 try const parsedData await loadIPythonNotebook file const htmlOutput generateHTML parsedData outputDiv innerHTML htmlOutput Apply syntax highlighting using Prism js Prism highlightAll catch error console error error script