JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text to HTML Converter</title>
    <style>
        #input, #output {
            width: 100%;
            height: 200px;
            margin-bottom: 10px;
        }
        button {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <textarea id="input" placeholder="Enter your text here..."></textarea>
    <br>
    <button onclick="convertText()">Convert to HTML</button>
    <br>
    <textarea id="output" readonly></textarea>
    <br>
    <button onclick="copyToClipboard()">Copy</button>

    <script>
        function convertText() {
            const inputText = document.getElementById('input').value;
            const outputTextarea = document.getElementById('output');
            let htmlText = inputText
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/```csharp/g, '<pre><code class="csharp">')
                .replace(/```/g, '</code></pre>')
                .replace(/`([^`]+)`/g, '<code>$1</code>')
                .replace(/## (.*)/g, '<h2>$1</h2>')
                .replace(/# (.*)/g, '<h1>$1</h1>')
                .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')  // Convert bold text
                .replace(/\n\n/g, '</p><p>')
                .replace(/\n/g, '<br>');

            // Wrap the entire text in paragraph tags if not already wrapped
            if (!htmlText.startsWith('<p>')) {
                htmlText = `<p>${htmlText}</p>`;
            }

            outputTextarea.value = htmlText;
        }

        function copyToClipboard() {
            const textarea = document.getElementById('output');
            textarea.select();
            document.execCommand('copy');
            alert('Text copied to clipboard');
        }
    </script>
</body>
</html>