On this page
palette
Showing the (previously) hidden HTML events in notes
Timeline span and div entries (.ob-timelines class) are hidden in preview by default, however, if you wish to display content, try adding (in your Obsidian settings) a CSS snippet like this:
/* Render the ob-timelines span or div elements as inline blocks that use an italic font */
.ob-timelines {
display: inline-block !important;
font-style: italic;
}
/* Use the before pseudo element to display attributes of the span or div */
.ob-timelines::before {
content: "🔖 " attr(data-start-date) ": " attr(data-title) ".";
color: lilac;
font-weight: 500;
}Using the above snippet, a span like this:
<div
class='ob-timelines'
data-start-date='1499-03-28-00'
data-title="An example">
</div>would be rendered (in Live Preview mode) as:

Note: It is highly recommended to use
divelements for HTML events rather thanspanelements.
I’ve noticed that using a span in Reading Mode or when viewing a span event in an Popover tends to render incorrectly. If proper rendering is a must-have, I recommend using a div for your events.