HTML Plugin

The HTML Plugin enables you to integrate custom HTML tags into your Markdown content using shortcodes. It supports div, span, address, mark, sub, sup, and kbd. You can also add classes and IDs to customize the style and behavior of your tags. A MAKER license is required to use this plugin.

Key Features

  • Include HTML tags in Markdown with secure shortcodes.
  • Customize tags with class and id attributes for styling and functionality.
  • Compatible with both the visual editor and the Markdown editor in Typemill.
  • Drag-and-drop functionality for repositioning HTML elements in the visual editor.
  • Visual editor displays HTML tags in light gray for easy identification.

Div and Span

The div and span tags are versatile and widely used. Use div for block elements and span for inline elements.


[:div class="myclass test" id="myid":]
  This is text inside the div with an [:span class="myclass":]inline   span element[:/span:] inside the div.
[:/div:]

Address

Use the address tag for contact information:


[:address:]
Typemill Inc.  
Millerstreet 12  
11223 Bread-City  
[:/address:]

Mark, KBD, Sub, and Sup

The HTML plugin also supports the tags mark, kbd, sup and sub.

  • Use the mark tag to highlight important text.
  • Use the kbd tag to represent keyboard inputs or shortcuts.
  • Use the sup tag for superscripts, such as mathematical expressions.
  • Use the sub tag for subscripts, commonly used in scientific formulas or chemical notations.
A [:mark:]highlighted phrase[:/mark:] in a text.
Press [:kbd:]Ctrl+C[:/kbd:] to copy text.
Typemill[:sup:]®[:/sup:]
H[:sub:]2[:/sub:]O represents water.

IDs and Classes

Every tag supports class and id attributes for identifying and styling.

You can use utility classes from the Tachyons CSS library to style your elements, such as bg-dark-gray white for a dark background with white text. The Tachyons library is used for most themes of Typemill.


[:div class="bg-dark-gray white":]
Dark background with white text
[:/div:]

For additional customization, you can add your own styles in the theme configuration under the custom CSS section.

Accordion

The HTML plugin provides a simple solution for styling accordions with CSS and JS. Wrap the accordion sections with the ID accordion, and then wrap the content that should toggle in an accontent class. Headlines will serve as titles for each accordion section.


[:div id="accordion":]

## Accordion Item

[:div class="accontent":]

Text for the accordion item. It will open and close with a click on the item headline.

[:/div:]

[:/div:]

You can use one accordion element on a page, and it can contain an unlimited number of accordion sections.