Tag Reference for HTML Export

Ulysses 13 ‐ 2018-05-28

The following table gives a mapping from Ulysses markup definitions to HTML tags.
Ellipses (“…”) are replaced with the text inside the tags.

Structure

Markup Definition HTML Output CSS Selector
Heading 1 <h1>…</h1> h1
Heading 2 <h2>…</h2> h2
Heading 3 <h3>…</h3> h3
Heading 4 <h4>…</h4> h4
Heading 5 <h5>…</h5> h5
Heading 6 <h6>…</h6> h6

Paragraph

Markup Definition HTML Output CSS Selectors
Comment (Deleted)  
Divider <hr /> hr
Code Block <pre><code>…</code></pre> pre, code
Raw Source (Unchanged)  

Grouping

Markup Definition HTML Output CSS Selectors
Ordered List <ol><li>…</li></ol> ol, li
Unordered List <ul><li>…</li></ul> ul, li
Block Quote <blockquote>…</blockquote> blockquote

Text

Markup Definition HTML Output CSS Selector
Strong <strong>…</strong> strong
Emphasis <em>…</em> em
Marked (Unchanged)  
Delete (Deleted)  
Inline Comment (Deleted)  
Inline Code <code>…</code> code
Inline Raw Source (Unchanged)  

Attributed Text

Markup Definition HTML Output CSS Selector
Link <a href="URL" title="Title">…</a> a
Annotation (Deleted)  

Text Objects

Markup Definition HTML Output CSS Selectors
Image <img src="URL" title="Title" alt="Desc." /> img
Video <video src="URL" title="Title" /> video
Footnote Link: <sup><a class="footnote">Index</a></sup>
Reference: <ol id="footnotes"><li>…</li></ol>
sup, a.footnote
ol#footnotes

Syntax Highlight

If a programming language is set for a code block, the <code> element will have two additional CSS classes:

  • code-highlighted: Specifies that a code block has a syntax highlight in general.
  • code-LANGUAGE: Specifies that a code block is highlighted for a specific language (e.g. “code-swift”).

Inside the <code> element, Ulysses will place highlighted text inside <span> elements. All highlighted elements will have two CSS classes:

  • syntax-all: A class that is applied to all highlighted elements. It allows to style highlighted elements in general (e.g. to make all highlighted elements bold).
  • syntax-TYPE: A class that is specific to the type of highlight. You can find an overview of all highlights here.