# Rich Text versus Markdown: Hoe je van de ene naar de andere modus schakelt en ze gebruikt In de moderne wereld van notatie-applicaties moeten gebruikers vaak kiezen tussen twee verschillende manieren van noteren: de visuele eenvoud van **Rich Text** editors en de handige portability van **Markdown**. De meeste applicaties dwingen je om voorkeur te geven aan één van deze twee. **NoteRich** biedt een andere optie. Door gebruik te maken van een geavanceerde dubbelmodemodel, kan NoteRich gemakkelijk worden gewisseld tussen de Rich Text- en Markdown-notation van dezelfde inhoud. Hierdoor kun je het beste van beide modi gebruiken, zonder compromissen te moeten sluiten. --- ## Begrijpen van de twee modi Voordat je begrijpt hoe je van de ene naar de andere modus kunt schakelen, is het belangrijk om te begrijpen wat elke modus biedt en wanneer je ze moet gebruiken. ### Rich Text Modus: Visuele bewerkingen op topniveau De Rich Text-modus biedt een **WYSIWYG (What You See Is What You Get)**-ervaring. In de Rich Text-modus: - **Visuele vormgeving**: Gewone cursief, koppen en lijsten verschijnen precies zoals ze gaan zien. - **Toegang tot de toolbalk**: Een uitgebreide toolbalk voor vormgeving biedt toegang tot alle vormgevingsopties met één klik. - **Ingebouwde media**: Afbeeldingen, tabellen, formules en interactieve elementen worden direct weergegeven. - **Vastleggen en verplaatsen**: Content kan eenvoudig worden herorganiseerd door blokken te slepen. - **Contextuele menu’s**: Rechts-klikacties en flottende vormgevingstoolbalken verhogen de productiviteit. De Rich Text-modus is ideaal voor: - Gebruikers die visuele feedback prefereren tijdens het typen. - Documenten met complexe lay-outs (tabellen, meerdere kolommen). - Samenwerkingsoverdrachten waarbij visuele helderheid belangrijk is. - Snelle vormgeving zonder dat je de syntax moet onthouden. ### Markdown Modus: Eenvoudige portability De Markdown-modus vertaalt je inhoud in eenvoudig tekst met lichtgewicht vormgevingssyntax. Als je in de Markdown-modus werkt: - **Eenvoudige portability**: Je notities worden opgeslagen in een universeel leesbaar formaat. - **Klaviergeoriënteerde werkwijze**: Tekst kan worden vormgegeven met eenvoudige toetsenbordshortcuts (`**bold**`, `*italic*`, `# Kopje`). - **Vriendelijk voor versiebeheer**: Eenvoudige verschillen in Git en andere versiebeheersystemen. - **Snelle typing**: Geen muis nodig; houd je handen op het toetsenbord. - **Universele compatibiliteit**: Exporteer en delen `.md` bestanden die overal werken. De Markdown-modus is ideaal voor: - Technische documentatie en notities met veel code. - Schrijvers die een eenvoudige teksteditie prefereren. - Longform-content creëren met minimale vormgevingskosten. - Gebruikers die maximale portability en toekomstbestendigheid willen. --- ## Het dubbelmodemodel NoteRich biedt niet simpelweg twee aparte editiemogelijkheden – het creëert een **geïntegreerd inhoudmodel** dat in beide modi kan worden weergegeven. Dit wordt bereikt door een geavanceerd transformatie-engine die de interne documentstructuur en Markdown-syntax in real-time omzet. ```mermaid graph TD A[User Input] --> B{Internal Document Model} B --> C[Rich Text Representation] B --> D[Markdown Representation] C --> E[Visuele Toolbar Acties] C --> F[Vastleggen en verplaatsen Opslagen] C --> G[Contextuele menu’s Vormgeving] D --> H[Markdown Shortcut Detectie] D --> I[Syntaxpatroonherkenning] D --> J[Eenvoudig tekstimport/export] B --> K[Unificerende opslaglaag] K --> L[IndexedDB Permanente] K --> M[P2P Sync Payload] 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 ``` Dit model betekent dat **je inhoud nooit in één formaat blijft vastzitten**. Of je nu in Markdown typt of vormgeving gebruikt via de Rich Text-toolbalk, het onderliggende documentmodel blijft consistent, zodat je gemakkelijk kunt wisselen zonder dat er dataverlies of vormgevingsproblemen ontstaan. --- ## Hoe je van de ene naar de andere modus kunt schakelen ### Methode 1: Selectie van de modus op basis van instellingen NoteRich biedt een globale instelling die de standaardeditormodus voor alle notities bepaalt: 1. **Open Instellingen**: Klik op het schroeficon (⚙️) in de rechterbovenhoek van de editor. 2. **Vind “Rich Text”**: Vind de schakelaar met “Rich Text” in het instellingenpaneel. 3. **Schakel de modus**: - **Geschakeld (✓)**: De editor opent in Rich Text-modus met alle toolbalken. - **Niet geschakeld (○)**: De editor opent in Plain Text/Markdown-modus. ```mermaid sequenceDiagram participant User participant SettingsPanel participant Editor participant DocumentModel User->>SettingsPanel: Klik op het instellingicon User->>SettingsPanel: Schakel “Rich Text” aan SettingsPanel->>Editor: Update isRichText Flag Editor->>DocumentModel: Herrender met nieuwe modus Editor-->>User: Weergeef de gewijzigde interface ``` **Belangrijk**: Het wijzigen van deze instelling vereist een pageload om effectief te zijn. Dit zorgt ervoor dat alle plugins en toolbalken correct worden geïnitialiseerd voor de geselecteerde modus. ### Methode 2: Import/Export per nota Zelfs wanneer je voornamelijk in de Rich Text-modus werkt, kun je individuele notities als Markdown importeren en exporteren: #### Exporten van een nota naar Markdown 1. Open de nota die je wilt exporteren. 2. Klik op **Actiesmenu** (meestal weergegeven als drie punten `⋮` of een downloadicon). 3. Kies **“Export als Markdown”**. 4. De nota wordt omgezet naar Markdown-syntax en gedownload als een `.md` bestand. De exportprocedure handelt intelligente handelingen uit: - **Koppen**: Omgezet naar `#`, `##`, `###` syntax. - **Liisten**: Bulleted en gerangschikte listen worden behouden met de juiste indentatie. - **Codeblokken**: Taalaanmerkingen blijven behouden (bijvoorbeeld, ```javascript). - **Tabellen**: Gevormd als Markdown-tabellen met aligneringstekens. - **Links en afbeeldingen**: URL’s worden behouden met alt-tekst. #### Importen van Markdown-inhoud 1. Maak een nieuwe nota of open een bestaande draft. 2. Raadpleeg de **Import**-functie in het actiesmenu. 3. Kies een `.md` bestand of kopieer Markdown-tekst rechtstreeks. 4. NoteRich detecteert automatisch de Markdown-syntax en omzet deze in het interne documentmodel. De import-engine gebruikt patroonherkenning om Markdown-elementen te identificeren: ```markdown Pattern → Rich Text Element -------------------------------------------------- # Kopje 1 → H1 Kopje ## Kopje 2 → H2 Kopje **bold tekst** → Bold Tekst Node *italic tekst* → Italic Tekst Node - Liesteekselement → Bullet Liesteekselement 1. Gerangschikt liesteekselement → Ordinaal Liesteekselement > Quotatie → Blockquote Node ```code``` → Codeblok Node [Link](url) → Link Node ![Afbeelding](url) → Afbeelding Node ``` ### Methode 3: Markdown-shortcuts in Rich Text-modus Een van de krachtigste functies van NoteRich is het mogelijk maken om **Markdown-shortcuts te gebruiken zelfs in de Rich Text-modus**. Deze hybridoplossing stelt je in staat om natuurlijk te typen, terwijl je de snelheid van Markdown gebruikt. Wanneer de Rich Text-modus is geactiveerd, zal het typen van Markdown-syntax automatisch worden omgezet: | Typ dit | Wordt dit | Triggering condition | |--------------------|---------------------------|--------------------------| | `# ` | H1 Kopje | Spatie na hash | | `## ` | H2 Kopje | Spatie na dubbele hash | | `### ` | H3 Kopje | Spatie na triple hash | | `- ` of `* ` | Bullet Liesteekselement | Spatie na dash/asterisk| | `1. ` | Gerangschikt liesteekselement | Spatie na nummer+dot | | `[] ` | Checkbox Liesteekselement | Spatie na haakjes | | `> ` | Blockquote | Spatie na groter-than- | | ```` ``` ```` | Codeblok | Drie backticks + Enter | | `**tekst**` | **Bold Tekst** | Sluitende asterisken | | `*tekst*` | *Italic Tekst* | Sluitende asterisk | | `~~tekst~~` | ~~Strikethrough~~ | Sluitende tildes | | `` `tekst`` | `Inline Code` | Sluitende backtick | | `[tekst](url)` | [Hyperlink](url) | Volledige linksyntax | | `---` of `***` | Horizontale regel | Drie haken/asterisken | ```mermaid graph LR A[User Typet Markdown] --> B[Shortcut Detector] B -->|Patroon Matched| C[Transformeren naar Node] B -->|Niet Matched| D[Houden als Eenvoudig Tekst] C --> E[Update Editor State] E --> F[Weergeef 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 ``` Dit betekent dat je kunt genieten van de **snelheid van Markdown-typing** met de **visuele voordelen van Rich Text-weergave** – zonder dat je de modus moet wisselen. --- ## Avanceerde functies: Meerregel-elementen Het Markdown-engine van NoteRich biedt een geavanceerde manier om meerregel-elementen te verwerken, vooral codeblokken en blockquotes. ### Detectie van codeblokken De editor onderscheidt intelligent tussen enkeleregel- en meerregelcodeblokken: ```markdown Enkeleregel: ```python print("Hello")``` → Inline code fence Meerregel: ```python def hello(): print("Hello") ``` → Volledig codebloknode Wanneer codeblokken worden geïmporteerd of getypt, detecteert NoteRich: 1. De opening fence (``` + optionele taalidentificator). 2. Alle inhoud wordt geregistreerd tot de sluitende fence. 3. Indentatie en ruimte worden precies zo behouden als getypt. 4. Syntaxhighlighting wordt toegepast op basis van de taalidentificator. ### Opslag van gecompliceerde lijsten Liisten met meerdere indentatieniveaus worden correct gereconstrueerd: ```markdown - Niveau 1 Item - Niveau 2 Item (4 spatie-indentatie) - Niveau 3 Item (8 spatie-indentatie) - Terug naar Niveau 1 ``` De transformatie-engine berekent de indentatieniveaus en creëert de juiste indeling van de lijsten in het documentmodel. --- ## Prestatieoverwegingen De dubbelmodemodeling voor Rich Text en Markdown is geoptimaliseerd voor snelle werking, zelfs bij grote documenten. ### Conversiemeter ```echarts { "xAxis": { "type": "category", "data": ["1k chars", "5k chars", "10k chars", "25k chars", "50k chars"], "axisLabel": { "color": "#666" } }, "yAxis": { "type": "value", "name": "Tijd (ms)", "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" } } } ``` Zelfs bij documenten die meer dan 50.000 tekens bevatten, verloopt de conversie binnen 50 milliseconden – onmerkbaar voor gebruikers tijdens normale werking. ### Incrementele updates In plaats van het hele document op elk toetsenklik te analyseren, gebruikt NoteRich **incrementele transformatie**: - **Markdown-shortcuts**: Alleen de huidige regel wordt geanalyseerd voor patroonvoldoening. - **Toolbaracties**: Direct manipulatie van nodes zonder volledige herserialisatie. - **Batchimporten**: Grote Markdown-bestanden worden in groepen verwerkt om UI-blockering te voorkomen. --- ## Best practices voor het kiezen van de modus ### Wanneer je de Rich Text-modus gebruikt Kies de Rich Text-modus als je standaardmodus wanneer: 1. **Visuele lay-out belangrijk is**: Documenten maken met tabellen, afbeeldingen en complexe vormgeving. 2. **Samenwerking**: Notities delen met teamleden die visuele editors prefereren. 3. **Frequent vormgeving**: Gebruik de toolbalk voor snelle stijlwijzigingen. 4. **Niet-technisch publiek**: Content voorbereiden voor lezers die niet bekend zijn met Markdown-syntax. 5. **Accessibilisering**: Gebruik screen readers die structurele rich text beter ondersteunen. ### Wanneer je de Markdown-modus gebruikt Kies de Markdown-modus (of Plain Text-modus) wanneer: 1. **Technische documentatie met veel code**: Schrijf technische handleidingen met veel codevoorbeelden. 2. **Versiebeheer integratie**: Track wijzigingen in Git-repositories. 3. **Onverstoorbare schrijfwerk**: Prefereer een eenvoudige interface zonder toolbalken. 4. **Cross-platform compatibiliteit**: Vaak exporteer naar andere compatibele Markdown-tools. 5. **Klaviergeoriënteerde werkwijze**: Wil je altijd met je handen op het toetsenbord. ### Hybridoplossing: De strategie voor ervaren gebruikers Veel ervaren NoteRich-gebruikers gebruiken een **hybride werkwijze**: 1. **Stel de standaard op Rich Text**: Geniet van alle toolbalken en visuele feedback. 2. **Gebruik Markdown-shortcuts**: Typ `#`, `-`, `**tekst**` voor snelle vormgeving. 3. **Exporteer als Markdown**: Delen van draagbare versies wanneer nodig. 4. **Importeer Markdown-bestanden**: Breng externe inhoud soepel in. Deze methode maximaliseert zowel **typing-snelheid** als **visuele helderheid**, waarbij de sterke punten van beide modi worden benut. --- ## Oplossingen voor veelvoorkomende problemen ### Probleem: Markdown-shortcuts werken niet **Symptomen**: Typen van `#` of `-` levert geen kopjes of lijsten op. **Oplossingen**: 1. Controleer of de Rich Text-modus is geactiveerd (kijk in de instellingen). 2. Zorg dat de Markdown-shortcut-plugin actief is. 3. Controleer of er geen conflicten zijn met andere browserplugins. 4. Probeer een spatie toe te voegen na het Markdown-symbool. ### Probleem: Vormgeving verdwijnt bij export **Symptomen**: Exporteerde Markdown-bestanden missen sommige vormgevingen. **Oplossingen**: 1. Sommige geavanceerde functies (custom colors, ingebouwde widgets) hebben geen equivalent in Markdown. 2. Controleer de geëxporteerde bestanden op onbekende elementen. 3. Gebruik HTML-export voor complexe documenten met speciale vormgevingen. ### Probleem: Import van Markdown resulteert in onverwachte structuren **Symptomen**: De geïmporteerde Markdown-bestanden hebben een andere lay-out dan verwacht. **Oplossingen**: 1. Controleer of de Markdown-syntax volgens de CommonMark-specifikatie is. 2. Controleer of de indentatie in lijsten consistent is. 3. Zorg dat de codeblokken correct worden gesloten. 4. Test met kleinere secties om problematische syntax te identificeren. ### Probleem: Snelle prestaties bij grote documenten **Symptomen**: Het typen of wisselen van modus duurt lang bij lange notities. **Oplossingen**: 1. Activeer incremental rendering in de instellingen. 2. Breek lange documenten op in sub-notities. 3. Schakel onnodige plugins voor Plain Text-modus uit. 4. Gebruik de Markdown-modus voor eerste schetsen, Rich Text voor definitieve vormgeving. --- ## De toekomst van het dubbelmodemodel Het dubbelmodemodel van NoteRich vertegenwoordigt een fundamentele verandering in de manier waarop we documenten bewerken. In plaats van Rich Text en Markdown als concurrerende formaten te zien, combineert NoteRich deze in een **enkelvoudig, flexibel inhoudmodel** dat past bij je werkflow. Toekomstige verbeteringen omvatten: - **Modusinstellingen per nota**: Overdragen van globale standaarden voor individuele notities. - **Real-time samenwerking**: Koppen van collega’s’ Markdown-shortcuts te zien meteen. - **AI-geïnduceerde conversie**: slimme suggesties voor het optimaliseren van vormgeving. - **Custom transformatoren**: Maak je eigen mappen van Markdown naar Rich Text. --- ## Conclusie Het kiezen tussen Rich Text en Markdown moet geen dilemma zijn. Met het innovatieve dubbelmodemodel van NoteRich krijg je: ✅ **Visuele rijkdom** wanneer dat nodig is. ✅ **Eenvoudig eenvoudig tekst**: Wanneer dat gewenst is. ✅ **Snelle wisseling**: Tussen de twee modi. ✅ **Markdown-shortcuts** in de Rich Text-modus. ✅ **Volledige compatibiliteit** met externe Markdown-plugins. Of je nu een developer bent die code documenteert, een schrijver die lange inhoud maakt, of een kenniswerker die complexe projecten beheert, NoteRich past zich aan aan jouw werkflow – zonder dat je compromissen moet sluiten. Begin met de modus die je het beste past, experimenteer met Markdown-shortcuts en vind de perfecte balans voor jouw behoeften. Jouwe notities, op jouw manier. --- ## Flexibel layout, duidelijke overzicht en veel mogelijkheden <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]">Dubbelmodus</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]">Shortcuts</span> <span class="px-3 py-1 bg-[#f4f4f5] border border-[#eaeaea] rounded-full text-xs font-medium text-[#666]">Productiviteit</span> </div>