Markdown 笔记系统

    <div class="row">
        <!-- 左侧笔记列表 -->
        <div class="col-md-3">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h4>笔记列表</h4>
                <button id="newNoteBtn" class="btn btn-primary btn-sm">新建笔记</button>
            </div>
            <div class="note-list" id="noteList">
                <!-- 笔记列表将通过 JavaScript 动态生成 -->
            </div>
        </div>

        <!-- 右侧编辑区 -->
        <div class="col-md-9">
            <div id="welcomeMessage">
                <h3 class="text-center mt-5">欢迎使用 Markdown 笔记系统</h3>
                <p class="text-center">请从左侧选择一个笔记进行编辑，或创建一个新笔记</p>
            </div>

            <div id="editorArea" class="editor-container">
                <div class="btn-toolbar">
                    <div class="input-group mb-3">
                        <span class="input-group-text">标题</span>
                        <input type="text" id="noteTitle" class="form-control" placeholder="输入笔记标题">
                    </div>
                    <div class="btn-group ms-auto">
                        <button id="saveNoteBtn" class="btn btn-success">保存</button>
                        <button id="deleteNoteBtn" class="btn btn-danger">删除</button>
                    </div>
                </div>

                <textarea id="editor"></textarea>

                <div class="preview-container mt-3" id="previewContainer">
                    <h4>预览</h4>
                    <div id="preview"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入必要的 JavaScript 库 -->
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/easymde/dist/easymde.min.js"></script>
<script>
    // 初始化变量
    let notes = [];
    let currentNoteId = null;
    let editor = null;

    // DOM 元素
    const noteList = document.getElementById('noteList');
    const editorArea = document.getElementById('editorArea');
    const welcomeMessage = document.getElementById('welcomeMessage');
    const noteTitle = document.getElementById('noteTitle');
    const preview = document.getElementById('preview');
    const newNoteBtn = document.getElementById('newNoteBtn');
    const saveNoteBtn = document.getElementById('saveNoteBtn');
    const deleteNoteBtn = document.getElementById('deleteNoteBtn');

    // 初始化编辑器
    function initEditor() {
        editor = new EasyMDE({
            element: document.getElementById('editor'),
            spellChecker: false,
            autofocus: true,
            placeholder: '在此输入 Markdown 内容...',
            status: ['lines', 'words'],
            renderingConfig: {
                codeSyntaxHighlighting: true,
            },
            toolbar: [
                'bold', 'italic', 'heading', '|',
                'quote', 'unordered-list', 'ordered-list', '|',
                'link', 'image', 'table', '|',
                'preview', 'side-by-side', 'fullscreen'
            ],
            previewRender: function(plainText) {
                const result = marked.parse(plainText);
                preview.innerHTML = result;
                return result;
            }
        });

        // 监听编辑器内容变化，更新预览
        editor.codemirror.on("change", () => {
            preview.innerHTML = marked.parse(editor.value());
        });
    }

    // 加载笔记列表
    function loadNotes() {
        const savedNotes = localStorage.getItem('markdown-notes');
        if (savedNotes) {
            notes = JSON.parse(savedNotes);
            renderNoteList();
        } else {
            // 如果没有保存的笔记，创建一些示例笔记
            notes = [
                { id: 1, title: '欢迎使用', content: '# 欢迎使用 Markdown 笔记系统\n\n这是一个简单的 Markdown 笔记应用，您可以：\n\n- 创建新笔记\n- 编辑现有笔记\n- 删除笔记\n- 使用 Markdown 格式化您的内容\n\n开始使用吧！', createdAt: new Date().toISOString() },
                { id: 2, title: 'Markdown 语法示例', content: '# Markdown 语法示例\n\n## 标题\n\n# 一级标题\n## 二级标题\n### 三级标题\n\n## 格式化\n\n**粗体** 或 __粗体__\n\n*斜体* 或 _斜体_\n\n~~删除线~~\n\n## 列表\n\n- 无序列表项\n- 另一个项目\n  - 子项目\n\n1. 有序列表\n2. 第二项\n\n## 链接和图片\n\n[链接文本](https://example.com)\n\n![图片描述](https://example.com/image.jpg)\n\n## 代码\n\n行内代码 `const example = "hello";`\n\n```javascript\n// 代码块\nfunction hello() {\n  console.log("Hello, world!");\n}\n```\n\n## 表格\n\n| 表头 1 | 表头 2 |\n|--------|--------|\n| 单元格 1 | 单元格 2 |\n| 单元格 3 | 单元格 4 |', createdAt: new Date().toISOString() }
            ];
            saveNotes();
            renderNoteList();
        }
    }

    // 渲染笔记列表
    function renderNoteList() {
        noteList.innerHTML = '';

        // 按创建时间排序，最新的在前面
        const sortedNotes = [...notes].sort((a, b) => 
            new Date(b.createdAt) - new Date(a.createdAt)
        );

        sortedNotes.forEach(note => {
            const noteItem = document.createElement('div');
            noteItem.className = 'note-item';
            if (note.id === currentNoteId) {
                noteItem.classList.add('active');
            }
            noteItem.innerHTML = `
                <div class="d-flex justify-content-between">
                    <strong> ${note.title}</strong> <small>$ {formatDate(note.createdAt)}</small>
                </div>
                <div class="text-muted small">${truncateText(note.content, 50)}</div>
            `;
            noteItem.addEventListener('click', () => openNote(note.id));
            noteList.appendChild(noteItem);
        });
    }

    // 打开笔记
    function openNote(id) {
        const note = notes.find(n => n.id === id);
        if (note) {
            currentNoteId = id;
            noteTitle.value = note.title;

            // 显示编辑区域，隐藏欢迎信息
            welcomeMessage.style.display = 'none';
            editorArea.style.display = 'block';

            // 如果编辑器尚未初始化，则初始化它
            if (!editor) {
                initEditor();
            }

            // 设置编辑器内容
            editor.value(note.content);

            // 更新预览
            preview.innerHTML = marked.parse(note.content);

            // 更新笔记列表中的活动项
            renderNoteList();
        }
    }

    // 创建新笔记
    function createNewNote() {
        const newId = notes.length > 0 ? Math.max(...notes.map(n => n.id)) + 1 : 1;
        const newNote = {
            id: newId,
            title: '新笔记',
            content: '# 新笔记\n\n在这里开始编写...',
            createdAt: new Date().toISOString()
        };

        notes.push(newNote);
        saveNotes();
        openNote(newId);
    }

    // 保存笔记
    function saveNote() {
        if (currentNoteId) {
            const noteIndex = notes.findIndex(n => n.id === currentNoteId);
            if (noteIndex !== -1) {
                notes[noteIndex].title = noteTitle.value || '无标题';
                notes[noteIndex].content = editor.value();
                notes[noteIndex].updatedAt = new Date().toISOString();

                saveNotes();
                renderNoteList();

                // 显示保存成功提示
                alert('笔记已保存');
            }
        }
    }

    // 删除笔记
    function deleteNote() {
        if (currentNoteId && confirm('确定要删除这个笔记吗？此操作不可撤销。')) {
            notes = notes.filter(n => n.id !== currentNoteId);
            saveNotes();

            // 重置当前状态
            currentNoteId = null;
            editorArea.style.display = 'none';
            welcomeMessage.style.display = 'block';

            renderNoteList();
        }
    }

    // 保存笔记到 localStorage
    function saveNotes() {
        localStorage.setItem('markdown-notes', JSON.stringify(notes));
    }

    // 辅助函数：格式化日期
    function formatDate(dateString) {
        const date = new Date(dateString);
        return date.toLocaleDateString();
    }

    // 辅助函数：截断文本
    function truncateText(text, maxLength) {
        // 移除 Markdown 标记
        const plainText = text.replace(/[#*_~`\[\]]/g, '');
        if (plainText.length <= maxLength) return plainText;
        return plainText.substring(0, maxLength) + '...';
    }

    // 事件监听
    newNoteBtn.addEventListener('click', createNewNote);
    saveNoteBtn.addEventListener('click', saveNote);
    deleteNoteBtn.addEventListener('click', deleteNote);

    // 初始化应用
    document.addEventListener('DOMContentLoaded', () => {
        loadNotes();
    });
</script>

“`

这个 Markdown 笔记系统具有以下功能：

增加功能：用户可以点击”新建笔记”按钮创建新的笔记。
删除功能：打开笔记后，可以点击”删除”按钮删除当前笔记。
修改功能：用户可以编辑笔记标题和内容，然后点击”保存”按钮保存更改。
查询功能：左侧显示所有笔记的列表，点击任意笔记可以查看和编辑。
其他特性：
- 使用 EasyMDE 作为 Markdown 编辑器，提供丰富的编辑工具
- 实时预览 Markdown 渲染效果
- 数据保存在浏览器的 localStorage 中
- 响应式设计，适配不同屏幕尺寸
- 初次使用时提供示例笔记，包含 Markdown 语法指南

您可以直接使用这个 HTML 文件，无需额外的后端支持，所有数据都存储在浏览器本地。如果需要更多功能，如数据导出/导入、标签分类等，可以进一步扩展。

Markdown 笔记系统

相关文章

This Chatbot Tool Pays Users $50 a Month for Their Feedback on AI Models

Authors Are Posting TikToks to Protest AI Use in Writing—and to Prove They Aren’t Doing It

This AI Model Never Stops Learning