Source Code Formatter

Source Code Formatter

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"></link>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css" id="themeStylesheet" rel="stylesheet"></link>
    <style>
        pre {
            overflow: auto;

        }
    </style>


    <div class="container">
        <h1 class="my-4"></h1>
        
        <div class="form-group">
            <label>Enter Your Code:</label>
            <textarea class="form-control" id="codeInput" rows="10"></textarea>
        </div>

        <div class="form-group">
            <label>Select Language:</label>
            <select class="form-control" id="languageSelect">
                <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>Select Theme:</label>
            <select class="form-control" id="themeSelect">
                <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 class="language-javascript" id="formattedCode"><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>