index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Source Code Formatter</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" id="themeStylesheet"> <style> pre { overflow: auto; } </style> </head> <body> <div class="container"> <h1 class="my-4">Source Code Formatter</h1> <div class="form-group"> <label for="codeInput">Enter Your Code:</label> <textarea id="codeInput" class="form-control" rows="10" placeholder="Enter your code here..."></textarea> </div> <div class="form-group"> <label for="languageSelect">Select Language:</label> <select id="languageSelect" class="form-control"> <option value="javascript">JavaScript</option> <option value="python">Python</option> <option value="html">HTML</option> <option value="css">CSS</option> <option value="java">Java</option> </select> </div> <div class="form-group"> <label for="themeSelect">Select Theme:</label> <select id="themeSelect" class="form-control"> <option value="prism">Default</option> <option value="prism-coy">Coy</option> <option value="prism-dark">Dark</option> <option value="prism-funky">Funky</option> <option value="prism-twilight">Twilight</option> <option value="prism-solarizedlight">Solarized Light</option> <option value="prism-solarizeddark">Solarized Dark</option> </select> </div> <button class="btn btn-primary" id="formatButton">Format Code</button> <h2 class="my-4">Formatted Code:</h2> <pre id="formattedCode" class="language-javascript"><code></code></pre> </div> <!-- Include Prism.js for syntax highlighting --> <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script> <script> document.getElementById('formatButton').addEventListener('click', () => { const codeInput = document.getElementById('codeInput').value; const language = document.getElementById('languageSelect').value; // Set the language for Prism.js const formattedCodeElement = document.getElementById('formattedCode'); formattedCodeElement.className = `language-${language}`; formattedCodeElement.querySelector('code').textContent = codeInput; // Highlight the code using Prism.js Prism.highlightElement(formattedCodeElement.querySelector('code')); }); // Change theme based on user selection document.getElementById('themeSelect').addEventListener('change', (event) => { const theme = event.target.value; const themeStylesheet = document.getElementById('themeStylesheet'); themeStylesheet.href = `https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/${theme}.min.css`; }); </script> </body> </html> |
