JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Prettier Code Beautifier and Parser</title>
    <script src="https://unpkg.com/prettier@latest/standalone.js"></script>
    <script src="https://unpkg.com/prettier@latest/parser-babel.js"></script>
    <script src="https://unpkg.com/acorn@latest/dist/acorn.js"></script> <!-- Add Acorn library -->
    <style>
        .error {
            color: red;
            white-space: pre-wrap; /* Preserve formatting in error messages */
        }
    </style>
</head>
<body>
    <h1>Prettier Code Beautifier and Parser</h1>
    <textarea id="code-input" rows="10" cols="80">// Enter your JavaScript code here...</textarea>
    <br>
    <button onclick="beautifyCode()">Beautify Code</button>
    <button onclick="parseCode()">Parse Code</button>
    <br>
    <h2>Formatted Code</h2>
    <pre id="code-output"></pre>
    <h2>Parsed Code</h2>
    <pre id="parse-output"></pre>
    <h2>Error (if any)</h2>
    <pre id="error-output" class="error"></pre>

    <script>
        function beautifyCode() {
            const code = document.getElementById('code-input').value;
            try {
                // Format the JavaScript code using Prettier with Babel parser
                const formattedCode = prettier.format(code, {
                    parser: "babel", // Use Babel parser
                    plugins: [prettierParserBabel], // Use the Babel parser plugin
                    semi: true,      // Example option to add semicolons
                    singleQuote: true // Example option to use single quotes
                });

                // Display the formatted code
                document.getElementById('code-output').textContent = formattedCode;
                // Clear any previous error message
                document.getElementById('error-output').textContent = '';
            } catch (error) {
                // Display...