This is the most significant release to date. It has many new features, but most are related to enhanced Markdown editing experience. Let's dive into what's new. ## Markdown syntax highlighting in the editor This is arguably the most important change in this release and the most noticeable since it will touch the experience of every user. The Markdown editing experience is still a split-view of editor and preview but compare to the previous release you will see Markdown syntax highlighted in the editor. In addition to the changed font colors for different syntactic elements, you may see different font sizes (for headings) and more. All of that is designed to make navigation faster and improve the orientation in the document. This is especially important on mobile devices where due to small screen size instead of split-view you just see the editor or the preview but not both. Let's see the real-life difference: ![NotesHub 2.x](/posts/attachments/nh30_markdown_syntax_before.webp "NotesHub 2.x") ![NotesHub 3.0](/posts/attachments/nh30_markdown_syntax_after.webp "NotesHub 3.0") ## Syntax highlighting in code-blocks In addition to Markdown, this release expands syntax highlighting to code blocks for the most popular programming languages. ![NotesHub 2.x](/posts/attachments/nh30_code_highlight_before.webp "NotesHub 2.x") ![NotesHub 3.0](/posts/attachments/nh30_code_highlight_after.webp "NotesHub 3.0") ## Search/replace inside notes Finally, you can search and replace text inside notes. In order to show the search panel on the Desktop, use `Ctrl+F` (`Cmd+F` on macOS) hotkey, or on mobile devices use _Search_ button from the editor toolbar. As search options, you can toggle _match case_, _match whole word_, or _use regular expression_. All options are available as buttons inside the search field. ![Search inside note](/posts/attachments/nh30-search.webp "Search") ![Search and replace inside note](/posts/attachments/nh30-replace.webp "Search & Replace") ## Highlight (marker) tool The new tool allows you to highlight text by marking it with a vivid, translucent yellow color, that will help to bring attention to sections of text. To highlight text, use two equal signs `==` before and after the words. Also, you can achieve the same effect by selecting the text and clicking _Highlight_ button from the editor toolbar. As an example the following Markdown: ```markdown I need to highlight these ==very important words==. ``` Will be rendered to: I need to highlight these very important words. ## Mermaid diagrams [Mermaid](https://mermaid.js.org/intro/) is a flowchart and diagram visualization tool, it uses syntax inspired by Markdown in order to create and modify diagrams dynamically. If you are familiar with Markdown you should have no problem learning [Mermaid's Syntax](https://mermaid.js.org/intro/n00b-syntaxReference.html). It supports many [types of diagrams](https://mermaid.js.org/intro/) such as flowcharts, sequence diagrams, class diagrams, Gantt, mindmap, and many more. To add a diagram, create a `mermaid` code block. For example, the following Markdown: ````markdown ```mermaid sequenceDiagram Alice->>+John: Hello John, how are you? Alice->>+John: John, can you hear me? John-->>-Alice: Hi Alice, I can hear you! John-->>-Alice: I feel great! ``` ```` Will be rendered to: ## Math expressions Mathematical expressions in this release are powered by [MathJax](https://www.mathjax.org) library that utilizes [LaTeX](https://en.wikibooks.org/wiki/LaTeX) notation. For the available syntax refer to [MathJax basic tutorial and quick reference](https://math.meta.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference). To add inline math expressions wrap them in `$` symbols. To create math blocks, use two dollar signs `$$` on the lines before and after the math block. Example: ```markdown The length of the hypotenuse: $c=\sqrt{a^2+b^2}$ Chemical formula of water: $\ce{H2O}$ The determinant of 2-by-2 matrices is given by $$ \det \begin{bmatrix} a&b\\ c&d\\ \end{bmatrix} = ad-bc $$ ``` Will be rendered to: The length of the hypotenuse: Chemical formula of water: The determinant of 2-by-2 matrices is given by ## Callouts When it comes to emphasizing specific ideas or highlighting content that is only relevant in certain situations, callouts can be extremely effective. They serve as a useful tool for drawing attention and providing additional context. Callouts are almost equivalent to standard Markdown block quotes in their syntax. To create a callout, add `[!INFO]` to the first line of a blockquote, where `INFO` is the type of callout. The type determines how the callout looks. All supported callout types: - **info** (alias: note) - **todo** (alias: checklist) - **example** - **summary** (aliases: abstract, tldr) - **question** (aliases: help, faq) - **tip** (alias: hint) - **quote** (alias: cite) - **success** (aliases: check, done) - **warning** (aliases: caution, attention) - **error** (aliases: fail, failure, missing, exception) - **danger** - **bug** Various callout examples: ![Callout](/posts/attachments/nh30-callouts.webp "Callouts") ## Embed YouTube videos and tweets Use Markdown image syntax to embed YouTube videos and tweets into your notes. Just copy the URL from the browser and place it as an image URL. ![Embed YouTube vidoes and tweets](/posts/attachments/nh30-youtube-tweets.webp "YouTube and X content") ## Markdown support in Kanban cards By many customer support requests, we have added Markdown support in Kanban cards so that you can add your tasks, links, images, etc. By default you see the rendered Markdown, in order to enter the edit mode simply click anywhere in the details field. ![Markdown in Kanban cards - Preview](/posts/attachments/nh30-markdown-in-kanban-preview.webp "Markdown in Kanban cards - Preview") ![Markdown in Kanban cards - Editor](/posts/attachments/nh30-markdown-in-kanban-edit.webp "Markdown in Kanban cards - Editor") ## Other notable features - _Tips_ and _Hot Keys_ tabs in _Info_ panel. - In-note blocks folding (headings, lists, code blocks, etc). - Multi-cursor mode (see the instruction on how to use it in _Tips_ tab of _Info_ panel). - Rectangular selection (see the instruction on how to use it in _Tips_ tab of _Info_ panel). - Autocompletion of close brackets. - Highlighting of matching brackets and selections. - Statements autocompletion in code blocks. - Subscript and superscript support in Markdown. - Advanced key-mapping in the editor (the list of available key-bindings you can find in the _Info_ panel). - Drag-and-drop support for adding file attachments into the editor. - Support for file attachments of any type. - `iframe`, `svg` and `center` HTML tags support in Markdown. - Easy change of a checkbox status in the editor with an inline widget. - _Paste as plain text_ command in native apps. ## Important fixes - Fixes numerous issues while converting HTML into Markdown on paste. - Reduces the typing latency on big notes. - Disables spell check for code and math blocks. - Fixes rendering of nested checklists. - Fixes the issue when in some scenarios due date was showing the wrong value after the board reopening (Kanban Boards). - Fixes layout shift when the soft keyboard opens (iOS). - Adds auto-focus on input when creating new notes/kanban boards (iOS). - The dark theme now applies to the soft keyboard and status bar (iOS). - iCloud Drive notebooks and folders with special characters in their names are now properly supported.

Latest Posts

NotesHub 3.0