在線MD代碼 - HTML

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>咸瑜專用markdown編輯器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f7ff; /* 淺藍色背景 */
            margin: 0;
            padding: 0;
        }
        .header {
            background-color: #1e90ff; /* 深藍色頭部 */
            color: #fff;
            padding: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .container {
            display: flex;
            width: 80%;
            margin: 20px auto;
            border: 1px solid #ddd;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            overflow: hidden;
        }
        .menu {
            background-color: #4682b4; /* 靛藍色菜單 */
            padding: 10px;
            min-width: 80px;
        }
        .editor, .preview {
            width: 50%;
            padding: 20px;
            box-sizing: border-box;
            overflow-y: auto;
        }
        .editor {
            border-right: 1px solid #ddd;
        }
        .preview {
            background-color: #fff;
            border-left: 1px solid #ddd;
        }
        textarea {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            resize: none;
            font-family: monospace;
            font-size: 14px;
            padding: 10px;
            box-sizing: border-box;
        }
        .preview-content {
            padding: 20px;
            overflow-y: auto;
        }
        button {
            margin: 5px;
            padding: 8px 12px;
            cursor: pointer;
            border: none;
            background-color: #1e90ff; /* 深藍色按鈕 */
            color: #fff;
            border-radius: 3px;
            font-size: 14px;
        }
        button:hover {
            background-color: #4169e1; /* 更深的藍色懸停狀態 */
        }
    </style>
</head>
<body>
    <div class="header">
        <div></div>
        <div>
            <button onclick="confirmNew()">新建</button>
            <button onclick="saveAs()">保存</button>
            <button onclick="saveAsImage()">保存為圖片</button>
            <input type="file" id="file-input" style="display:none;" onchange="loadFile(event)">
            <label for="file-input"><button>加載</button></label>
        </div>
    </div>

    <div class="container">
        <div class="menu">
            <!-- 可以在此處添加其他菜單項 -->
        </div>
        <div class="editor">
            <textarea id="markdown-input" placeholder="在這里編寫Markdown..."></textarea>
        </div>
        <div class="preview">
            <div id="markdown-preview" class="preview-content"></div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/marked/2.0.3/marked.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script>
        const markdownInput = document.getElementById('markdown-input');
        const markdownPreview = document.getElementById('markdown-preview');

        markdownInput.addEventListener('input', updatePreview);

        function updatePreview() {
            const markdownText = markdownInput.value;
            const html = marked(markdownText);
            markdownPreview.innerHTML = html;
        }

        function confirmNew() {
            if (markdownInput.value.trim() !== '') {
                if (confirm('是否保存當前內容？')) {
                    saveAs();
                }
            }
            markdownInput.value = '';
            updatePreview();
        }

        function saveAs() {
            const fileName = prompt("請輸入文件名：", "markdown.txt");
            if (fileName) {
                const markdownText = markdownInput.value;
                const blob = new Blob([markdownText], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        }

        function saveAsImage() {
            html2canvas(markdownPreview).then(canvas => {
                const link = document.createElement('a');
                link.download = 'markdown.png';
                link.href = canvas.toDataURL('image/png');
                link.click();
            });
        }

        function loadFile(event) {
            const file = event.target.files[0];
            if (!file) return;
            const reader = new FileReader();
            reader.onload = function(e) {
                const content = e.target.result;
                markdownInput.value = content;
                updatePreview();
            };
            reader.readAsText(file);
        }
    </script>
    <footer style="text-align: center; padding: 10px; background-color: #f0f7ff;">
        &copy; 2024 咸瑜
    </footer>
</body>
</html>
posted @ 2024-06-26 11:36 咸瑜閱讀(349) 評論(0) 收藏舉報
刷新頁面返回頂部
咸瑜

無限風光在險峰

在線MD代碼 - HTML

公告
