Timeline Blocks

Render Obsidian Timeline-style events as structured HTML blocks.

Mental model

A timeline block is parsed in groups of three + lines:

1. date/time
2. title
3. description

Do this

Input format:

<div class="timeline-container">
  <div class="timeline-line"></div>
  <div class="timeline-event">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-date">Date</div>
      <div class="timeline-title">Title</div>
      <div class="timeline-description">Description</div>
    </div>
  </div>
</div>

Demo input:

<div class="timeline-container">
  <div class="timeline-line"></div>
  <div class="timeline-event">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-date">1492</div>
      <div class="timeline-title">First Contact</div>
      <div class="timeline-description">Initial contact is established.</div>
    </div>
  </div>
  <div class="timeline-event">
    <div class="timeline-marker"></div>
    <div class="timeline-content">
      <div class="timeline-date">1500</div>
      <div class="timeline-title">Expansion</div>
      <div class="timeline-description">Major expansion period begins.</div>
    </div>
  </div>
</div>

Rendered output:

Verify

• Events appear in order with date/title/description grouping.
• Blank lines between events do not break parsing.
• WikiLinks inside timeline entries resolve correctly.

Limits

• Timeline text is HTML-escaped before rendering.
• WikiLinks in title/description are converted to safe links.
• Non-3-line event groups are ignored.

See Documentation/WikiLinks.