Normal text.
For images with thin grey border, usually when the image has a white background which is indistinguishable from the page background, in the <img> tag, add class="border". Example post.
For comparison slider (example post), use the code below, modifying the values in [square brackets] as needed.
<div class="compare" [data-labels="black-on-white"] data-left="[Before]" data-right="[After]">
<img alt="" height="[362]" src="[after.jpg]" width="580" />
<img alt="" height="[362]" src="[before.jpg]" width="580" />
<input type="range" max="100" value="50" aria-label="Drag to compare before and after" />
</div>By default, the labels (like "Before" and "After") are white text on semi-transparent black background. They can be changed to plain white or black text (no background) or black text on semi-transparent white background, using <data-labels="white">, ="black" or ="black-on-white". Other looks require custom CSS.
Bullet list with <ul> and <li>:
- Point 1.
- Point 2.
- Point 3.
<blockquote class="tr_bq">...</blockquote>:
The book is long, and sometimes complicated. I have therefore separated my arguments into 154 parts, and given each part a descriptive title.
—Reasons and Persons by Derek Parfit
<code>...</code> and <kbd>Alt+F</kbd>.
For codebox, like the one below, use <pre class="codebox"><code>...</code></pre>.
Conversation. tbody style needed for text to be top-aligned. td style need not be repeated, but padding-right: 1em; should appear in the td style for the longest speaker name.
<table cellpadding="0" style="border-spacing: 0px 4px;">
<tbody style="vertical-align: top;">
<tr>
<td style="padding-right: 1em; white-space: nowrap;">Grandma:</td>
<td>বাড়ি কবে আসছো? (When are you coming home?)</td>
</tr>
<tr>
<td>me:</td>
<td>৬ তারিখ! (6th December!)</td>
</tr>
<tr>
<td>Grandma:</td>
<td>হ্যাঁ, তোমার মা বলছিল... (Yes, your mum was telling me...)</td>
</tr>
<tr>
<td>me:</td>
<td>তাহলে আবার আমাকে জিজ্ঞেস করছো কেন? নিজের মেয়েকে বিশ্বাস করো না?
(Then why are you asking me? You don't believe your own daughter?)</td>
</tr>
</tbody>
</table>| Grandma: | বাড়ি কবে আসছো? (When are you coming home?) |
| me: | ৬ তারিখ! (6th December!) |
| Grandma: | হ্যাঁ, তোমার মা বলছিল... (Yes, your mum was telling me...) |
| me: | তাহলে আবার আমাকে জিজ্ঞেস করছো কেন? নিজের মেয়েকে বিশ্বাস করো না? (Then why are you asking me? You don't believe your own daughter?) |
Asterisk.*
| * | Footnote text goes at the bottom of the page. It is formatted as an HTML table so that it remains indented if it runs into more than one line. Code below. |
<table cellpadding="0" cellspacing="0" style="font-size: 85%;">
<tbody>
<tr>
<td style="padding-right: 3px; vertical-align: top;">*</td>
<td>Footnote text goes at the bottom of the page. It is formatted
as an HTML table so that it remains indented if it runs into more
than one line.<br /></td>
</tr>
</tbody>
</table>
Section break:
<p style="text-align: center;">* * *</p>
* * *
Boxed text:
Some Aurora Myths
A Finnish folktale says that the aurora is caused by an arctic fox flinging fire into the sky with its tail. Some Scandinavians believed that the lights are the celestial reflection of a giant school of herring. Inuits thought they are the souls of dead children. Icelanders, typically, eschewed such romantic notions, holding only that if a pregnant woman gazed at the northern lights, her child would be born cross-eyed.
The Koyukuk Indians in northwest Alaska banged on metal pans to attract aurora – I know not to what end. In Lapland, people were warned not to mock or whistle at the aurora, though I must confess that the one time I saw the lights, it did not occur to me to do either of these things.
Horizontal line for subsequent edits, or1 footnotes.2
<hr style="float: left; margin-bottom: 5px; margin-top: 5px; width: 150px;" />
Edit: I often use this for updates, or to link to a follow-up post.
| 1. | Footnote 1. |
| 2. | Footnote 2. |
Footnotes code:
<table cellpadding="0" cellspacing="0" style="border-spacing: 0px 10px; font-size: 85%;">
<tbody>
<tr>
<td style="padding-right: 6px; vertical-align: top;">1.</td>
<td>Footnote 1.</td>
</tr>
<tr>
<td style="padding-right: 6px; vertical-align: top;">2.</td>
<td>Footnote 2.</td>
</tr>
</tbody>
</table>