×

Xây Dựng Trình Soạn Thảo Markdown Cho Website

Avatar of admin
admin 1 Views

Để tạo một trình soạn thảo văn bản Markdown cho trang web của bạn, bạn có thể theo các bước sau. Giả sử bạn đã có một số kiến thức cơ bản về HTML, CSS, và JavaScript.

Tạo Giao Diện

Tạo một tệp HTML và thêm vào đó một khung nhập văn bản cho người dùng nhập Markdown và một khu vực để hiển thị nội dung đã được dịch sang HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Markdown Editor</title>
    <style>
        #editor, #preview {
            width: 49%;
            height: 90vh;
            float: left;
            overflow: auto;
        }
        #editor {
            border-right: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <textarea id="editor"># Hello Markdown</textarea>
    <div id="preview"></div>
</body>
</html>

Thêm JavaScript

Sử dụng thư viện JavaScript để chuyển đổi Markdown sang HTML. Một trong những thư viện phổ biến là marked.js. Bạn cần thêm thư viện này vào trang web của mình.

Trước tiên, thêm thư viện marked.js vào phần <head> của tài liệu HTML bằng cách sử dụng CDN:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

Sau đó, thêm JavaScript để xử lý sự kiện nhập liệu từ người dùng và hiển thị kết quả đã chuyển đổi:

<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const editor = document.getElementById('editor');
        const preview = document.getElementById('preview');

        editor.addEventListener('input', function() {
            const markdownText = editor.value;
            preview.innerHTML = marked.parse(markdownText);
        });

        // Chuyển đổi Markdown sang HTML ngay khi trang web tải xong
        preview.innerHTML = marked.parse(editor.value);
    });
</script>

Tinh chỉnh và Kiểm tra

  • Kiểm tra trình soạn thảo: Viết một số nội dung Markdown trong trình soạn thảo và xem liệu nó có được hiển thị đúng dạng trong phần xem trước hay không.
  • Tùy chỉnh CSS: Bạn có thể tùy chỉnh CSS để cải thiện giao diện của trình soạn thảo và phần hiển thị nội dung. Thêm các định dạng cho văn bản, liên kết, tiêu đề, v.v.
  • Bảo mật: Khi sử dụng marked.js hoặc bất kỳ thư viện nào khác để chuyển đổi nội dung sang HTML, hãy đảm bảo rằng bạn đã xử lý các vấn đề bảo mật liên quan đến việc thực thi mã độc (như XSS). marked.js có các tùy chọn để làm sạch đầu vào.

Với những bước này, bạn đã có một trình soạn thảo Markdown cơ bản cho trang web của mình. Hãy nhớ kiểm tra kỹ các tính năng và đảm bảo trang web của bạn an toàn cho người dùng.

Và đây là mã nguồn hoàn chỉnh để các bạn dễ dàng test:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Markdown Editor</title>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            padding: 20px;
            font-family: Arial, sans-serif;
        }
        #editor, #preview {
            box-sizing: border-box;
            width: 48%;
            height: 90vh;
            margin: 5px;
            padding: 10px;
            border: 1px solid #ccc;
            overflow-y: auto;
        }
        #editor {
            background-color: #f9f9f9;
        }
        #preview {
            border-left: 2px solid #0084ff;
        }
    </style>
</head>
<body>
    <textarea id="editor"># Hello Markdown\n\nStart typing your markdown here.</textarea>
    <div id="preview"></div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const editor = document.getElementById('editor');
            const preview = document.getElementById('preview');

            const updatePreview = () => {
                const markdownText = editor.value;
                preview.innerHTML = marked.parse(markdownText, {
                    sanitize: true, // Ensure this is enabled to prevent XSS attacks
                });
            };

            editor.addEventListener('input', updatePreview);

            // Initial rendering
            updatePreview();
        });
    </script>
</body>
</html>

Comments

Bài viết liên quan