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
div
elements for HTML events rather thanspan
elements.
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.