en.html

<!DOCTYPE html>
<html>
<head>
    <title>Markdown 内容加密</title>
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        textarea { width: 100%; height: 200px; margin-bottom: 10px; }
        input, button { margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>Markdown 内容加密</h1>
    <textarea id="input" placeholder="在此输入 Markdown 内容"></textarea>

    <input type="password" id="encryptPassword" placeholder="输入加密密码">
    <button onclick="encryptText()">加密</button>
    <textarea id="output" readonly placeholder="加密后的内容将显示在这里"></textarea>

    <script>
        async function deriveKey(password, salt, keyUsage) {
            const encoder = new TextEncoder();
            const keyMaterial = await window.crypto.subtle.importKey(
                "raw", encoder.encode(password), {name: "PBKDF2"}, false, ["deriveBits", "deriveKey"]
            );
            return window.crypto.subtle.deriveKey(
                {name: "PBKDF2", salt: encoder.encode(salt), iterations: 100000, hash: "SHA-256"},
                keyMaterial, {name: "AES-GCM", length: 256}, true, keyUsage
            );
        }

        async function encryptText() {
            const text = document.getElementById("input").value;
            const password = document.getElementById("encryptPassword").value;
            const salt = window.crypto.getRandomValues(new Uint8Array(16));
            const iv = window.crypto.getRandomValues(new Uint8Array(12));
            const key = await deriveKey(password, salt, ["encrypt"]);
            const encrypted = await window.crypto.subtle.encrypt(
                {name: "AES-GCM", iv: iv}, key, new TextEncoder().encode(text)
            );
            const encryptedArray = new Uint8Array(encrypted);
            const resultArray = new Uint8Array(salt.length + iv.length + encryptedArray.length);
            resultArray.set(salt, 0);
            resultArray.set(iv, salt.length);
            resultArray.set(encryptedArray, salt.length + iv.length);
            document.getElementById("output").value = btoa(String.fromCharCode.apply(null, resultArray));
        }
    </script>
</body>
</html>