Typemill   ›   Author Guide   ›   Visual Markdown Editor

Visual Markdown Editor

The Visual Markdown Editor of Typemill works like a modern block editor and immediately transforms your Markdown block into HTML, making it feel much like classic content editing. The Visual Markdown Editor is the standard editing mode. You can switch to the Raw Markdown Editor using the button in the publish panel at the bottom of the screen. You can select the standard editor in the system settings.

Quick Tips for Editing

Before you go into the details, read some tips to boost your productivity with the visual editor:

  • All block interfaces of the visual editor are just helpers. You can use a paragraph block and insert Markdown for a table or a list, and it will work just fine.
  • If you append a block at the end of the page, you can add two returns at the end of the block to save the current block and open a new block. This way, you can proceed with writing without clicking any buttons.
  • If you add one return in an empty block, the block will close.
  • If you stick with an element, just switch to the Raw Markdown Editor.
  • There are some hidden secrets of Markdown. For example, if you need a soft line break, just add two spaces at the end of the line.

Working with Blocks

We won't provide too many details for each block interface because most of them should be self-explanatory. If you have trouble using an element, please ask the friendly community at GitHub.

Append a Block to the Bottom

At the bottom of each page, you will see a format bar with different buttons. To append a new block to the page, just click on a button and create content.

Add a Block Above

To add a new block above another block, hover over the block and click the "add" button. A new format bar will appear, allowing you to select a button to create new content.

Delete a Block

To delete a block, hover over the block and click the "delete" button. This will immediately delete the block without further confirmation.

Edit a Block

To edit an existing block, just click on it. The block will open with the block-specific interface. For most elements, this will be a simple edit field. However, there are also special interfaces for complex content elements like tables, images, or definition lists.

Cancel a Block

If you want to cancel a block without saving the changes, just click the cancel button at the bottom of the block element.

Save a Block

To save a block, simply click the save button at the bottom of the block element.

Move a Block

To move a block, just click on the block and drag it while keeping the mouse button down.

Inline Elements

To activate an inline format bar for links, italic, bold, or inline code, just highlight text inside the block editor.

Block Elements

Overview of Block Elements

The block editor provides 16 buttons for different content elements, starting with paragraphs and ending with shortcodes.

Button Description
Button paragraph Paragraph
Button headlines Headlines
Button unordered list Unordered list
Button ordered list Ordered list
Button table Table
Button blockquote Blockquote
Button notice Notice
Button image Image
Button video Video file
Button audio Audio file
Button file General file
Button Table of Contents Table of contents
Button horizontal line Horizontal line
Button definition list Definition list
Button codeblock Code block
Button shortcode Shortcode

Enhance the Block Editor

The block editor is quite flexible and customizable. You can deactivate buttons in the system settings by opening the "writing" tab. It is also possible to add more buttons and functionality with a plugin. The math plugin is an example of how you can extend the editor with additional editing features. Another possibility to add features to the editor is through shortcodes. The embed plugin, the HTML plugin, and the ebook product plugin are examples of how you can integrate all kinds of content and features into the editor.