# Rich Text та Markdown: Як переключати та використовувати обидва формати У сучасних додатках для записування нотаток користувачі часто змушені вибирати між двома різними підходами: візуальної простоти редактора **Rich Text** та портативної простоти **Markdown**. Більшість додатків змушують користувачів обирати один з них. **NoteRich** розв’язує цю проблему. Завдяки складній архітектурі подвійного режиму, NoteRich дозволяє безперешкодно переключатися між форматами Rich Text та Markdown для одного і того ж контенту, забезпечуючи найкращі характеристики обох форматів без компромісів. --- ## Розуміння двох режимів Перш ніж почати розглядати, як переключати між режимами, необхідно зрозуміти, що кожен режим може запропонувати та коли його використовувати. ### Режим Rich Text: Візуальне редагування на найвищому рівні Режим Rich Text забезпечує можливість редагування **WYSIWYG (What You See Is What You Get)**. Коли ви знаходитеся в режимі Rich Text: - **Візуальне форматування**: Жирний шрифт, курсив, заголовки та списки відображаються так, як буде при роздрукуванні - **Доступ до інструментів форматування**: Комплексна панель форматування дозволяє одноразово налаштувати всі стилі - **Вбудовані медіа**: Зображення, таблиці, рівняння та інтерактивні елементи відображаються внутрішньо - **Перетягування та зміна**: Легко переставляти контент за допомогою перетягування блоків - **Контекстні меню**: Дії клацання правою кнопкою та панелі форматування під час перетягування підвищують продуктивність Режим Rich Text ідеально підходить для: - Користувачів, які віддають перевагу візуальному відображенню під час написання - Документи з складним оформленням (таблиці, багатоколонкові структури) - Спільнодрукування, коли важлива візуальна чіткість - Швидке форматування без необхідності запам’ятовування синтаксу ### Режим Markdown: Портативна простота Режим Markdown представляє ваш контент у вигляді простого тексту з легкою синтаксичною обробкою. Коли ви працюєте в режимі Markdown: - **Портативність тексту**: Ваші нотатки зберігаються у універсально читабельному форматі - **Робочий процес з клавіатурою**: Форматування тексту за допомогою простих командами клавіатури (`**жирний**`, `*курсив*`, `# Заголовок`) - **Способи керування версіями**: Чисті відмінності в Git та інших системах керування версіями - **Швидке написання**: Не потрібно користуватися мишею; тримати руки на клавіатурі - **Універсальна сумісність**: Експорт та обмін файлами `.md`, які працюють в будь-якому середовищі Режим Markdown ідеально підходить для: - Технічної документації та нотаток, пов’язаних з кодом - Письменників, які віддають перевагу безперешкодному редагуванню простого тексту - Створення довгих контентів з мінімальними витратами на форматування - Користувачів, які хочуть максимальної портативності та готовності до майбутніх змін --- ## Архітектура подвійного режиму NoteRich не просто пропонує два окремі режими редагування – він створює **уніфіковану модель контенту**, яку можна представити в будь-якому з форматів миттєво. Це досягається за допомогою складного механізму перетворення, який перетворює внутрішню структуру документа та синтаксис Markdown в реальному часі. ```mermaid graph TD A[Користувацький ввод] --> B{Внутрішня структура документа} B --> C[Формат Rich Text] B --> D[Формат Markdown] C --> E[Дії панелі форматування] C --> F[Операції перетягування та зміни] C --> G[Форматування за контекстом] D --> H[Виявлення командами Markdown] D --> I[Розпізнавання синтаксичних шаблонів] D --> J[Імпорт/експорт тексту] B --> K[Універсальний шар зберігання] K --> L[Зберігання через IndexedDB] K --> M[Пошта для об’єднання P2P] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style D fill:#fafafa,stroke:#eaeaea,color:#333 style K fill:#000,stroke:#000,color:#fff ``` Ця архітектура означає, що **ваш контент ніколи не закріплюється в одному форматі**. Незалежно від того, чи ви починаєте писати в Markdown чи використовуєте форматування через панель форматування Rich Text, внутрішня структура документа залишається незмінною, що дозволяє миттєво переключати між форматами без втрати даних чи пошкодження форматування. --- ## Як переключати між режимами ### Спосіб 1: Вибір режиму за налаштуваннями NoteRich пропонує глобальне налаштування, яке визначає стандартний режим редактора для всіх нотаток: 1. **Відкрийте налаштування**: Натисніть іконку з гарантом (⚙️) у верхньому правому кутку редактора 2. **Знайдіть перемикач "Rich Text"**: Знайдіть перемикач з написом "Rich Text" у панелі налаштувань 3. **Перемикайте режим**: - **Ввімкнений (✓)**: Редактор відкривається в режимі Rich Text з повною панеллю форматування - **Вимкнений (○)**: Редактор відкривається в режимі Plain Text/Markdown ```mermaid sequenceDiagram participant User participant SettingsPanel participant Editor participant DocumentModel User->>SettingsPanel: Натисніть наконтроль User->>SettingsPanel: Перемикайте "Rich Text" SettingsPanel->>Editor: Оновлення флага isRichText Editor->>DocumentModel: Переробка з новим режимом Editor-->>User: Відображення оновленої інтерфейсу ``` **Важливо**: Зміна цього налаштування вимагає перезавантаження сторінки, щоб воно почало діяти. Це гарантує, що всі плагіни та компоненти панелі форматування будуть правильно ініціалізовані для обраного режиму. ### Спосіб 2: Імпорт/експорт нотаток за Markdown Навіть коли ви працюєте переважно в режимі Rich Text, ви можете імпортувати та експортувати окремі нотатки у форматі Markdown: #### Експорт нотатки у Markdown 1. Відкрийте нотатку, яку хочете експортувати 2. Натисніть **Меню дій** (зазвичай представлене трьома крапками `⋮` або іконкою завантаження) 3. Виберіть **"Експортувати як Markdown"** 4. Нотатка перетворюється на синтаксис Markdown та завантажується як файл `.md` Процес експорту робить розумне використання: - **Заголовки**: Перетворюються на синтаксис `#`, `##`, `###` - **Списки**: Блокові та номеровані списки зберігаються з правильним відступом - **Блоки коду**: Анотації мови зберігаються (наприклад, ```javascript) - **Таблиці**: Форматуються як Markdown-таблиці з маркерами вирівнювання - **Посилання та зображення**: URL зберігаються з альтернативними текстами #### Імпорт Markdown-контенту 1. Створіть нову нотатку або відкрийте існуючий проєкт 2. Перейдіть до функції **Імпорт** з меню дій 3. Виберіть файл `.md` або вставіть текст Markdown безпосередньо 4. NoteRich автоматично розпізнає синтаксис Markdown та перетворює його на внутрішню структуру документа Імпортний механізм використовує розпізнавання шаблонів для визначення елементів Markdown: ```markdown Паттерн → Елемент Rich Text -------------------------------------------------- # Заголовок 1 → H1 Заголовок ## Заголовок 2 → H2 Заголовок **жирний текст** → Жирний текст *курсивний текст* → Курсивний текст - Пункт списку → Пункт блокового списку 1. Номерований пункт → Номерований пункт списку > Цитата → Блокове цитування ```code``` → Блоковий блок коду [Посилання](url) → Посилання ![Зображення](url) → Зображення ``` ### Спосіб 3: Команди Markdown у режимі Rich Text Однією з найпотужніших функцій NoteRich є можливість використання **команд Markdown навіть у режимі Rich Text**. Цей гібридний підхід дозволяє писати природним способом, використовуючи швидкість Markdown. Коли режим Rich Text увімкнений, введення Markdown-синтаксу запускає автоматичне перетворення: | Введіть це | Стане це | Умови запуску | |--------------------|---------------------------|--------------------------| | `# ` | H1 Заголовок | Проба зі знаком проби | | `## ` | H2 Заголовок | Проба з двоє пробів | | `### ` | H3 Заголовок | Проба з трьома пробами | | `- ` або `* ` | Блоковий список | Проба з пробою/астериком| | `1. ` | Номерований список | Проба з числом та крапкою | | `[] ` | Табуковий список | Проба з дужками | | `> ` | Блокове цитування | Проба з пробою більше | | ```` ``` ```` | Блоковий блок коду | Три трійки + Enter | | `**текст**` | **Жирний текст** | Закінчення астериком | | `*текст*` | *Курсивний текст* | Закінчення астериком | | `~~текст~~` | ~~Пробігти через текст~~| Закінчення тилдами | | `` `текст`` `` | `Внутрішній код` | Закінчення backticks | | `[текст](url)` | [Посилання](url) | Повна синтаксична форма | | `---` або `***` | Горизонтальна рамка | Три крапки/астерики | ```mermaid graph LR A[Користувач вводить Markdown] --> B[Детектор команд] B -->|Збіг шаблону| C[Перетворення в елемент] B -->|Не збіг| D[Збереження як текст] C --> E[Оновлення стану редактора] E --> F[Відображення Rich Text] style A fill:#fafafa,stroke:#eaeaea,color:#333 style B fill:#000,stroke:#000,color:#fff style C fill:#fafafa,stroke:#eaeaea,color:#333 style F fill:#fafafa,stroke:#eaeaea,color:#333 ``` Це означає, що ви можете насолоджуватися **швидкістю написання Markdown** з **візуальними перевагами формату Rich Text** – без необхідності вручну переключати режими. --- ## Надійні функції: Елементи багатокороткових Механізм Markdown в NoteRich включає складну обробку елементів багатокороткових, особливо блокових кодів та блокових цитат. ### Виявлення блокових блоків коду Редактор розумно розрізняє однокороткові та багатокороткові блоки коду: ```markdown Однокоротковий: ```python print("Hello")``` → Внутрішній блок коду Багатокоротковий: ```python def hello(): print("Hello") ``` → Повний блок коду Коли імпортується чи вводиться код, NoteRich: 1. Виявляє початковий блок (``` + необов’язковий ідентифікатор мови) 2. Захоплює весь вміст до закінчення блоку 3. Зберігає відступи та пробіли так, як введено 4. Використовує підсвічування синтаксу відповідно до ідентифікатора мови ### Обробка вкладених списків Списки з кількома рівнями відступів правильно відновлюються: ```markdown - Пункт рівня 1 - Пункт рівня 2 (4 відступи) - Пункт рівня 3 (8 відступів) - Повернення до рівня 1 ``` Механізм перетворення розраховує рівні відступів та створює відповідну структуру списків у моделі документа. --- ## Розгляд продуктивності Багатокористовуваний перетворення між Rich Text та Markdown оптимізовано для продуктивності, навіть при роботі з великими документами. ### Індикатори перетворення ```echarts { "xAxis": { "type": "category", "data": ["1k chars", "5k chars", "10k chars", "25k chars", "50k chars"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "name": "Час (мс)", "splitLine": { "lineStyle": { "color": "#f4f4f5" } }, "axisLabel": { "color": "#666" } }, "series": [ { "name": "Markdown → Rich Text", "data": [8, 15, 22, 35, 48], "type": "line", "smooth": true, "lineStyle": { "color": "#000", "width": 3 }, "itemStyle": { "color": "#000" }, "symbol": "circle", "symbolSize": 8 }, { "name": "Rich Text → Markdown", "data": [5, 10, 16, 28, 38], "type": "line", "smooth": true, "lineStyle": { "color": "#666", "width": 2, "type": "dashed" }, "itemStyle": { "color": "#666" }, "symbol": "circle", "symbolSize": 8 } ], "grid": { "left": "10%", "right": "5%", "bottom": "10%" }, "legend": { "data": ["Markdown → Rich Text", "Rich Text → Markdown"], "bottom": 0, "textStyle": { "color": "#666" } } } ``` Навіть при документах, що перевищують 50 000 символів, перетворення завершується менш ніж за 50 милі секунд – це непомітно для користувача під час нормальної роботи. ### Індивідуальні оновлення Замість повного переробки всього документа на кожне натискання клавіші, NoteRich використовує **індивідуальні перетворення**: - **Команди Markdown**: Визначається лише поточна рядок для перевірки шаблонів - **Дії панелі форматування**: Пряме керування елементами без повного перезавантаження - **Блоковий імпорт**: Великі файли Markdown обробляються частинами, щоб не блокувати інтерфейс --- ## Найкращі практики вибору режиму ### Коли використовувати режим Rich Text Виберіть режим Rich Text як стандартний, коли: 1. **Важливе візуальне оформлення**: Створення документів з таблицями, зображеннями та складним форматуванням 2. **Спільнодрукування**: Ширше спілкування з колегами, які віддають перевагу візуальним редакторам 3. **Часті зміни форматування**: Використання панелі форматування для швидких корекцій 4. **Нетехнічні аудиторії**: Підготовка контенту для читачів, які не знайомі з Markdown-синтаксисом 5. **Потреби доступності**: Використання екранних читалок, які краще підтримують структурований Rich Text ### Коли використовувати режим Markdown Виберіть режим Markdown (або Plain Text) коли: 1. **Технічна документація з багатим кодом**: Написання технічних посібників з численними прикладами коду 2. **Інтеграція з системами керування версіями**: Ведення змін у Git-репозиторіях 3. **Необтяжливе письмо без відволікаючих елементів**: Віддача переваги мінімального інтерфейсу без панелей форматування 4. **Кросплатформенна портативність**: Часте експорт у інші пристрої, сумісні з Markdown 5. **Робочий процес з клавіатурою**: Бажання постійно тримати руки на клавіатурі ### Гібридний підхід: Стратегія досвідченого користувача Багато досвідчених користувачів NoteRich використовують **гібридний процес роботи**: 1. **Встановіть стандартним режимом Rich Text**: Насолоджуйтеся повною панеллю форматування та візуальними перевагами 2. **Використовуйте команди Markdown**: Введіть `#`, `-`, `**текст**` для швидкого форматування 3. **Експортуйте як Markdown**: Ширше спілкування з іншими колегами, коли це необхідно 4. **Імпортуйте файли Markdown**: Плавне введення зовнішнього контенту Цей підхід максималізує **швидкість написання** та **візуальну чіткість**, використовуючи переваги обох форматів. --- ## Виправлення поширених проблем ### Проблема: Команди Markdown не запускаються **Симптоми**: Введення `#` або `-` не перетворюється на заголовок чи список **Рішення**: 1. Переконайтеся, що режим Rich Text увімкнений (перевірте панель налаштувань) 2. Переконайтеся, що плагін команд Markdown активний 3. Перевірте на наявність суперечливих брандпредасток 4. Спробуйте додати пробіл після символа Markdown ### Проблема: Втрата форматування під час експорту **Симптоми**: Експортований файл Markdown втрачає деякі формати **Рішення**: 1. Деякі розширені функції (додаткові кольори, вбудовані елементи) можуть не мати відповідного Markdown-аналога 2. Перевірте експортований файл на відсутність несумісних елементів 3. Використовуйте HTML-експорт для складних документів з додатковим форматуванням ### Проблема: Імпорт не створює очікувану структуру **Симптоми**: Імпортований Markdown не відповідає очікуваній структурі **Рішення**: 1. Переконайтеся, що синтаксис Markdown відповідає специфікаціям CommonMark 2. Перевірте відсутність несумісних відступів у списках 3. Переконайтеся, що блоки коду правильно закінчуються 4. Перевірте менші частини для виявлення проблемного синтаксу ### Проблема: Повільна продуктивність з великими документами **Симптоми**: Затримка під час введення чи перемикання режимів у дуже довгих нотатках **Рішення**: 1. Увімкніть індивідуальне перетворення в налаштуваннях 2. Розділіть дуже довгі документи на під-нотатки 3. Вимкніть непотрібні плагіни для Plain Text 4. Використовуйте режим Markdown для початкового форматування, перейдіть на Rich Text для остаточного форматування --- ## Майбутнє подвійного режиму Архітектура подвійного режиму NoteRich представляє фундаментальну зміну в способі мислення про редагування документів. Замість того, щоб розглядати Rich Text та Markdown як конкуруючі формати, NoteRich об’єднує їх у **один, гнучкий контентний модель**, який адаптується до вашого робочого процесу. Майбутні покращення включають: - **Налаштування режиму для окремих нотаток**: Перепризначення глобальних стандартів для окремих нотаток - **Реальнечасне спілкування**: Відображення команд Markdown користувачів миттєво - **Автоматичне перетворення з допомогою ІК**: Розумні пропозиції щодо оптимізації вибору форматів - **Свої керовані перетворювачі**: Визначення власних шаблонів перетворення Markdown на Rich Text --- ## Висновок Вибір між Rich Text та Markdown не повинен бути чистим „або“. Завдяки інноваційній архітектурі подвійного режиму NoteRich ви отримуєте: ✅ **Візуальну насиченість**, коли вона потрібна ✅ **Простоту тексту**, коли вона потрібна ✅ **Безперешкодний перехід** між обома режимами ✅ **Команди Markdown** у режимі Rich Text ✅ **Повна сумісність** з зовнішніми інструментами Markdown Незалежно від того, чи ви розробник, письменник чи керівник проектів, NoteRich адаптується до вашого улюбленого способу роботи – без необхідності компромісів. Почніть з режиму, який вам найбільше підходить, експериментуйте з командами Markdown та знайдіть ідеальний баланс для ваших особистих потреб. Ваші нотатки, ваші правила. --- ## <div class="flex flex-wrap gap-2 mt-8 mb-12"> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Rich Text</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Markdown</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Подвійний режим</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">WYSIWYG</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Команди</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Продуктивність</span> </div>