Markdown转HTML转换器

https://sopkit.github.io/markdown-to-html-converter/ (opens new window)

我们将使用JavaScript库 - Showdown

<!DOCTYPE html>
<html>
<head>
    <title>Markdown转HTML转换器</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js"></script>
</head>
<body>
    <div class="container">
        <h2>Markdown转HTML转换器</h2>
        <textarea id="inputText" rows="10" cols="50" placeholder="输入Markdown文本"></textarea><br>
        <button onclick="convertToHtml()">转换为HTML</button>
        <button onclick="convertToMarkdown()">转换为Markdown</button><br><br>

        <div class="result-container">
            <div class="code-container">
                <h3>HTML代码</h3>
                <button onclick="copyHtmlCode()">复制HTML</button>
``` ```html
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <h3>输入Markdown</h3>
            <textarea id="inputText" rows="10" cols="50"></textarea>
            <button onclick="convertToHtml()">转换为HTML</button>
            <button onclick="convertToMarkdown()">转换为Markdown</button>
        </div>
        <div class="col-md-6">
            <h3>HTML代码</h3>
            <button onclick="copyHtmlCode()">复制HTML代码</button>
            <textarea id="htmlCode" rows="10" cols="50" readonly></textarea>
        </div>
        <div class="parsed-container">
            <h3>解析后HTML</h3>
            <button onclick="copyParsedHtml()">复制解析后HTML</button>
            <div id="parsedHtml"></div>
        </div>
    </div>
</div>

<script>
    function convertToHtml() {
        var markdownText = document.getElementById('inputText').value;
        var converter = new showdown.Converter();
        var htmlText = converter.makeHtml(markdownText);
        document.getElementById('htmlCode').value = htmlText;
        document.getElementById('parsedHtml').innerHTML = htmlText;
    }

    function convertToMarkdown() {
        var htmlText = document.getElementById('inputText').value;
        var converter = new showdown.Converter({ simpleLineBreaks: true });
        var markdownText = converter.makeMarkdown(htmlText);
    }
</script>
``` ```html
        document.getElementById('htmlCode').value = htmlText;
        document.getElementById('parsedHtml').innerHTML = markdownText;
    }

    function copyHtmlCode() {
        var htmlCode = document.getElementById('htmlCode');
        htmlCode.select();
        document.execCommand('copy');
        alert('HTML code copied to clipboard');
    }

    function copyParsedHtml() {
        var parsedHtml = document.getElementById('parsedHtml');
        var range = document.createRange();
        range.selectNode(parsedHtml);
        window.getSelection().removeAllRanges();
        window.getSelection().addRange(range);
        document.execCommand('copy');
        window.getSelection().removeAllRanges();
        alert('Parsed HTML copied to clipboard');
    }
</script>
</body>
</html>