TypeEngine supports MultiMarkdown. For complete reference on the syntax you can visit the MultiMarkdown guide or the MultiMardown github page. The following are a few specific features you may find useful, as well as a few TypeEngine specific features we’ve added for you.


Metadata

Metadata can be added to any article by adding it at the beginning. It can be added using the following syntax.

name:value

It is important to note that the Metadata must start on the first line of the article there can be no whitespace before the start of the variable name. After your last Metdata entry, leave one full line of blank space. Here’s an example:

Title: This is the document title
 Author: Edgar Rice Burroughs
 Copyright: 10/20/2014

Smarty Pants

TypeEngine fully supports Smarty Pants which means you can write, edit, and save your posts using regular ASCII, but your published article will output with smart quotes, em-dashes, and proper ellipses. The following characters are automatically converted.

  • Straight quotes ( " and ' ) are converted into “curly” quote HTML entities
  • Backticks-style quotes (`like this`) are converted into “curly” quote HTML entities
  • Dashes (– and —) are converted into en- and em- dash entities
  • Three consecutive dots (...) are converted into an ellipsis entity
  • You can change the quotes style by adding a metadata variable named “Quotes Language”, with one of the following values:
    • dutch (or nl)
    • english
    • french (fr)
    • german (de)
    • germanguillemets
    • swedish (sv)

Document Bookmarks

When you create a Header (H1, H2, H3, H4, h3, H6), the header text is automatically added as the id, with spaces and capitalization removed. To set a custom id, add [somerefname] to your header. For example,

# First Header[therefname]

generates:

<h1 id="therefname">First Header</h1>

You can then link to this header from anywhere in your article like so: do this anywhere in your article, like so:

[Text to display][therefname]

which generates:

<a href="#therefname">Text to display</a>

This can also be applied to images or tables if you like.


Images

![This is the caption](sample.jpg "This is a description")

generates:

  <div class="asset-container">
    <figure>
      <img src="sample.jpg" alt="This is the caption" title="This is a description" />
      <figcaption>This is the caption</figcaption>
    </figure>
  </div>

As a side note, ‘basic’ Markdown is also supported within the caption.


Link and Image Attributes

Arbitrary attributes can be added to links and images by adding them later on in the document, like so:

[ref]: sample.jpg "Optional title" style="border: solid black 1px"
  ![TheImage][ref]

which generates:

  <div class="asset-container">
    <figure>
      <img src="sample.jpg" alt="TheImage" id="ref" title="Optional title" style="border: solid black 1px" />
      <figcaption>TheImage</figcaption>
    </figure>
  </div>

Mailto links can easily be generated with the following code:

[Send email to someone](mailto:someone@domain.com)

Superscript / Subscript

This superscript^2
This superscript<sup>2</sup>
This subscript~23~
This subscript<sub>23</sub>

Audio

$[audio.mp3]
  <audio controls="controls">
    <source src="audio.mp3" type="audio/mpeg" />
  </audio>

Video

Videos can be embedded by either, uploading a video asset directly into the publication and linking the local file, or embedding a remote video file. Using the helper will allow you to select from one of the following supported video types available in the dropdown menu: YouTube, Vimeo, File Uploads, Generic, Dailymotion, Instagram, GettyImages. Each method generates its own HTML, and will also append a lower-cased video source class. For more details on proper attribute settgins, please visit: embedresponsively.com/

Local Video Files
^[samplevideo.mp4](file)

generates:

  <div class="markdown-video file">
    <video controls="controls">
      <source src="samplevideo.mp4"></source>
    </video>
  </div>
Remote Video Files
^[http://www.youtube.com/embed/3UmC6acEHk0](YouTube)

generates:

  <div class="markdown-video youtube">
    <iframe src="http://www.youtube.com/embed/3UmC6acEHk0" height="240" width="320" allowfullscreen="" frameborder="0"></iframe>
  </div>

In the event that an unsupported file type is embedded, either audio or video, the following message will be output to the HTML.

  <iframe>...Sorry, video[or: audio] is not available.</iframe>

Additional Audio and Video Attributes

Additional attributes can be added as follows:

^[videoUrl attr1="value1" attr2="value2" ...]

The following attributes are supported.

  • “AUTOPLAY”: true/false (not recommended)
  • “CONTROLS”: true by default
  • “HEIGHT”: (n/a for audio)
  • “LOOP”: true/false
  • “MUTED”: true/false
  • “POSTER”: (n/a for audio) Information on using poster
  • “PRELOAD”: true/false
  • “WIDTH” (n/a for audio)

Footnotes

Footnotes require two elements to function properly. A ‘Footnote’ which is a tappable call to action, and the ‘Footnote Reference’ which refers to the contents of the footnote. Footnote references can appear anywhere in the article, since all footnote references are consolidated together at the end of the article.

Footnote Syntax:
Tap this footnote to read it[^This is the footnote]

fngenerates the following HTML:

  Tap this footnote to read it<a href="#fn:1" id="fnref:1" title="see footnote" class="footnote">[1]</a>
Footnote Reference Syntax:
[^This is the footnote]: This is the footnote content. It will display when you tap on the footnote

fncontentgenerates the following HTML:

<ol>
  <li id="fn:1">
    <p>This is the footnote contents it will display when you tap on the footnote <a href="#fnref:1" title="return to article" class="reversefootnote">&#160;&#8617;</a></p>
  </li>
</ol>

Pullquotes

"" I'm a quote
  <div class="pullquote">
    <blockquote>I'm a quote</blockquote>
  </div>