Reviewing the LeoFinance Markdown Guide is something I've been meaning to do for some time. Finally, I can present my discoverries to my fellow Hivers and Leos. It's OK to read only the parts of interest; it's reference material, not literature. The rest is there waiting for you if you ever want to check it out.
After a few weeks of posting and commenting, we all discover how Markdown we use here isn't like Markdown used elsewhere. What I will do in this post is compare actual Markdown output with what the Markdown Guide at LeoFinance says we can use. The comparison will also include how Ecency handles this flavor of Markdown we use. Along the way we may learn a new thing or two. Whether we do or not, we will know what we can do at LeoFinance and more generally at Hive Social and take advantage of the flavor of Markdown we have here.
Banner text, "x", and checkmark were made using MS Paint and Character Map.
Remainder of image is a screen capture taken from the Markdown Guide found at the Publish page at LeoFinance.
Time and word count come from LeoFinance.
The Markdown Guide available at LeoFinance lists 19 items for which Markdown can be used. Below is a list showing which Markdown codes work no matter which front-end we use. Below that is a list showing which Markdown codes we should avoid. The rest of the post covers each of the 19 items in greater detail.
Below is a list of 19 items for which we use Markdown at LeoFinance and on Hive:
Some items such as footnotes have just one way to do them. Other items such as making text bold or italics have more than one Markdown method to account for situations such as nesting Markdown codes. All ways of using Markdown as shown in the Markdown Guide will be covered here.
Bold text is text which appears thicker and darker than surrounding text. Bold text is a form of emphasized text. Nearly all blogging platforms and office-type applications offer bold text as a formatting option.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 2 asterisks (**) before and after content | **Bitcoin** is the King of Cryptocurrency | Bitcoin is the King of Cryptocurrency | <b>Bitcoin</b> is the King of Cryptocurrency |
| 2 underscores (__) before and after content | __Bitcoin__ is the King of Cryptocurrency | Bitcoin is the King of Cryptocurrency | <b>Bitcoin</b> is the King of Cryptocurrency |
| Comments |
|---|
| The 2 characters surround content that needs to appear in bold. Either code will bold the text, but they must be used as a matching set (only asterisks or only underscores). Spaces are not allowed between the pair of characters and the text. |
Italic text is text which appears lighter and/or thinner than surrounding text. Like bold text, italic text is another form of emphasized text. As with bold text, nearly all blogging platforms and office-type applications offer italic text as a formatting option.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 asterisk (*) before and after content | *Ethereum* is Number 2 | Ethereum is Number 2 | <i>Ethereum</i> is Number 2 |
| 1 underscore (_) before and after content | _Ethereum_ is Number 2 | Ethereum is Number 2 | <i>Ethereum</i> is Number 2 |
| Comments |
|---|
| 1 of either asterisks or underscores surround content that needs to appear in intalic. Either code will itaicize the text, but either must be used as a matching set (only asterisks or only underscores). As with bold, spaces are not allowed between the characters and the text. |
1 or more (up to 6) pound/hashtag characters (#), followed by a space after the final #, turn the line of text after it into a heading. The number of pound/hashtag characters indicates what level heading is being used.
Most of us use these characters to start headings. The Markdown Guide shows these characters both before and after the heading text. Since headers don't work inside tables, they will be presented in stand-alone lines. Each heading will be presented in 3 lines: a code line, a usage line, and an output line. Let's see what works
Code(s): #, then 1 space, then content
Usage: # Binance Coin (BNB) Heading 1 text
HTML Equivalent: <h1>Binance Coin (BNB) Heading 1 text</h1>
Code(s): ##, then 1 space, then content
Usage: ## Polygon (MATIC) Heading 2 text
HTML Equivalent: <h2>Polygon (MATIC) Heading 2 text</h2>
Code(s): ###, then 1 space, then content
Usage: ### THORChain (RUNE) Heading 3 text
HTML Equivalent: <h3>THORChain (RUNE) Heading 3 text</h3>
Code(s): ####, then 1 space, then content
Usage: #### Cardano (ADA) Heading 4 text
HTML Equivalent: <h4>Cardano (ADA) Heading 4 text</h4>
Code(s): #####, then 1 space, then content
Usage: ##### Solana (SOL) Heading 5 text
HTML Equivalent: <h5>Solana (SOL) Heading 5 text</h5>
Code(s): ######, then 1 space, then content
Usage: ###### Polkadot (DOT) Heading 6 text
HTML Equivalent: <h6>Polkadot (DOT) Heading 6 text</h6>
Code(s): #, then 1 space, then content, then #
Usage: # [Avalanche (AVAX) Heading 1 text #
HTML Equivalent: <h1>Avalanche (AVAX) Heading 1 text</h1>
Code(s): ##, then 1 space, then content, then ##
Usage: ## Ripple (XRP) Heading 2 text ##
HTML Equivalent: <h2>Ripple (XRP) Heading 2 text</h2>
Code(s): ###, then 1 space, then content, then ###
Usage: ### Terra (LUNA) Heading 3 text ###
HTML Equivalent: <h3>Terra (LUNA) Heading 3 text</h3>
Code(s): ####, then 1 space, then content, then ####
Usage: #### VeChain (VET) Heading 4 text ####
HTML Equivalent: <h4>VeChain (VET) Heading 4 text</h4>
Code(s): #####, then 1 space, then content, then #####
Usage: ##### Cub Finance (CUB) Heading 5 text #####
HTML Equivalent: <h5>Cub Finance (CUB) Heading 5 text</h5>
Code(s): ######, then 1 space, then content, then ######
Usage: ###### PolyCub (POLYCUB) Heading 6 text ######
HTML Equivalent: <h6>PolyCub (POLYCUB) Heading 6 text</h6>
| Comments: |
|---|
| Both Left-Only and Bookend style for Markdown headers produce the same kind of output. There may be a reason to use Bookend style, but for most people Left-Only style is enough. |
Dividing lines (also known as horizontal rules) separate different sections of text which still need to appear in the same section or under the same heading.
Due to the nature of dividing lines, they will be handled here the same way as Markdown headings:
Code(s): 3 equal signs (===)
Usage: ===
===
HTML Equivalent: <hr />
Code(s): 3 dashes/hyphens/minus signs (---)
Usage: ---
HTML Equivalent: <hr />
Code(s): 3 asterisks (***)
Usage: ***
HTML Equivalent: <hr />
| Comments: |
|---|
| The Markdown Guide says 3 equal signs can be used as a dividing line, but I didn't see it rendered by LeoFinance; however, LeoFinance rendered a dividing line for 3 dashes. Although the Markdown Guide made no mention of 3 asterisks, LeoFinance rendered a dividing line for that Markdown Code. For our purposes, avoid 3 equal signs when making dividing lines. |
Superscript text appears higher from the baseline than normal text. Superscript text is commonly found in footnotes and in mathematics or science formulas.
Subscript text appears lower from the baseline than normal text. Not as common in writing, subscript is also commonly found in mathematics or science.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 caret (^) | E = mc^2^ | E = mc2 | E = mc<sup>2</sup> |
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 tilde (~) | Water = H~2~O | Water = H2O | Water = H<sub>2</sub>O |
| Comments: |
|---|
| Mixed results for Markdown codes for superscript and subscript: * In the 2-pane data entry mode for writing posts, the Markdown works as advertised; * In the actual post (or even the draft preview), the Markdown codes don't do anything. If you have doubts about whether you can use Markdown codes for superscript or subscript, Markdown will accept their respective HTML codes ( <sup>...</sup> and <sub>...</sub>). |
Underline text is a form of emphasized text which uses lines at the baseline of the text being emphasized.
Strikethrough text is obsolete text which is still included to show that it has been replaced with a correction or updated text. Unlike underline text, strikethrough text is not a form of emphasized text.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 2 pluses (++) | Splinterlands is really ++HUGE++ | Splinterlands is really HUGE | Splinterlands is really <u>HUGE</u> |
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 2 tildes (~~) | Dogecoin is a ~~SHITCOIN~~ memecoin | Dogecoin is a | Dogecoin is a <s>SHITCOIN</s> memecoin |
| Comments: |
|---|
| Mixed results for Markdown codes for underline and strikethrough: * In the 2-pane data entry mode for writing posts, the Markdown works as advertised; * In the actual post (or even the draft preview), the Markdown codes for underline don't do anything, but Markdown codes for strikethrough are OK. If you have doubts about whether you can use Markdown codes for underline or strikethrough, Markdown will accept their respective HTML codes ( <u>...</u> and <s>...</s>). |
Marked text is a form of emphasized text which relies on highlighting by the application. It's the digital version of using a highlight marker to write over text needing to be highlighted on the paper.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 2 equal signs (==) | ==CUB== is on sale | CUB is on sale | <mark>CUB</mark> is on sale |
| Comments: |
|---|
| Mixed results for Markdown codes for marking text: * In the 2-pane data entry mode for writing posts, the Markdown works as advertised; * In the actual post (or even the draft preview), the Markdown codes for marking text don't do anything. |
More accurately, blockquote. > followed by a space is the Markdown code for setting off a block of text to be quoted. <blockquote>...</blockquote> is the HTML element the Markdown code imitates.
Due to the nature of [block]quotes (also known as horizontal rules), they will be handled here the same way as Markdown headings:
Code(s): The greater-than symbol (>), then 1 space
Usage: > HIVE is criminally undervalued.
OUTPUT:
HIVE is criminally undervalued.
HTML Equivalent: <blockquote>HIVE is criminally undervalued.</blockquote>
| Comments: |
|---|
| Blockquotes can be nested. This is handy if the quoted text comes from a forum thread or conversation. If a blockquote contains multiple paragraphs, each paragraph is connected by adding a blank blockquote line above it. For the blockquote to end where it needs to end, a blank line needs to be put between the blockquote and the resumption of normal content. Like headers and dividing lines, blockquotes cannot be used inside Markdown tables. |
There are 2 types of lists: ordered lists and unordered lists. An ordered list is a listed whose items are stated in a specific order; think of a set of instructions or championship league standings. An unordered list is a list of bulleted items whose order does not matter; think of a list of ingredients for a recipe.
Due to the nature of ordered and unordered lists, they will be handled here the same way as Markdown headings:
Code(s): A number, then a period, then a space, then the content
Usage:
1. Dogecoin
2. Shiba Inu
3. Floki
Output:
HTML Equivalent:
<ol><li>Dogecoin</li>
<li>Shiba Inu</li>
<li>Floki</li>
</ol>
Code(s): An asterisk (*), then a space, then the content
Usage:
* Cash
* Precious Metals
* Stocks
Output:
HTML Equivalent:
<ul><li>Cash</li>
<li>Precious Metals</li>
<li>Stocks</li>
</ul>
It's possible to have an ordered list as a sublist of an unordered list, or an unordered list as a sublist of an ordered list. Just indent the sublist 4 spaces before starting it:
Code(s): Put spaces before the new sublist items
Usage:
1. Bitcoin
* Market Cap
* MAX Supply
* Price
2. Ethereum
3. Tether
Output:
HTML Equivalent:
<ol><li>Bitcoin</li>
<ul><li>Market Cap</li>
<li>MAX Supply</li>
<li>Price</li>
</ul>
<li>Ethereum</li>
<li>Tether</li>
</ol>
Code(s): Put 4 spaces before the new sublist items
Usage:
* Cash
1. United States Dollars (USD)
2. European Union Euros (EUR)
3. United Kingdom Pound Sterling (GBP)
4. Swiss Francs (CHF)
* Precious Metals
* Stocks
Output:
HTML Equivalent:
<ul><li>Cash</li>
<ol><li>United States Dollars (USD)</li>
<li>European Union Euros (EUR)</li>
<li>United Kingdom Pound Sterling (GBP)</li>
<li>Swiss Francs (CHF)</li>
</ol>
<li>Precious Metals</li>
<li>Stocks</li>
</ul>
| Comments: |
|---|
Lists can be nested several levels deep in any combination; for each level, add another 4 spaces for each level. Although actual lists cannot be included inside Markdown tables, they can be simulated by escaping characters and adding <br /> at the end of each list item. For an ordered list, escape the period by placing a backslash (\) before it. For an unordered list, either escape the asterisk (*)by placing a backslash before it, or just use a special character that can be used like a list bullet. Blank lines are placed after the final list item so that normal content can resume. |
To-do lists are special web forms which can be checked or unchecked to show whether a task was done or not.
Due to the nature of to-do lists, they will be handled here the same way as Markdown headings:
Code(s):
Usage:
- [ ] Markdown code for to-do list
- [ ] Markdown code for links
Output:
HTML Equivalent:
<form>
<input type="checkbox" /> Markdown code for to-do list
<input type="checkbox" /> Markdown code for links
</form>
Code(s):
Usage:
- [x] Markdown code for to-do list
- [ ] Markdown code for links
Output:
HTML Equivalent:
<form>
<input type="checkbox" checked="checked" /> Markdown code for to-do list
<input type="checkbox" /> Markdown code for links
</form>
| Comments: |
|---|
| Mixed results for Markdown codes for to-do lists: * In the 2-pane data entry mode for writing posts, the Markdown works as advertised; * In the actual post (or even the draft preview), the Markdown codes for to-do lists appear as raw text with no functionality. Given that the front-ends discourage use of any element which would change how the front-end operates-- not just CSS and scripts but also form elements-- it's just as well. |
This is actually 2 separate items, but since the Markdown Guide puts them together they will appear together here. One item is a text link or hyperlink. The other item is described by the Markdown Guide as an "image link" but it looks like code for just showing an image. automatic URL linking is a trivial thing when it comes to Markdown, but it will be included here as a 3rd item. Markdown code for a linked image will be included as a 4th item.
Text Link template: [link-text](hyperlink)
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| Left and right square brackets ([]) followed by left and right parentheses (()); link-text inside square brackets; hyperlink inside parentheses | Tokenized blogging about crypto at [LeoFinance](https://leofinance.io) | Tokenized blogging about crypto at LeoFinance | Tokenized blogging about crypto at <a href="https://leofinance.io">LeoFinance</a> |
Image Link template: 
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| Exclamation point or bang character (!), then left and right square brackets ([]) followed by left and right parentheses (()); alt-text inside square brackets; image link inside parentheses |  | <img src="https://leofinance.io/_nuxt/img/leofinance.c6ad534.svg" alt="LeoFinance SVG graphic" /> |
If a URL needs to be displayed as a URL (with no link text), then no Markdown code is needed: Just type it into the post or comment. The blogging platform will automatically convert the URL provided this way into a working link.
| How To Disable Automatic URL Linking: |
|---|
| What if a URL needs to be included but not as a clickable link? Maybe the link appeared earlier in a post, or the link had been given several times using different link labels. To disable automatic URL linking for a URL to be typed, just surround it with backticks ( `) so that it gets treated as code to be displayed. |
Linked Image template: [](hyperlink)
(link-to-image and hyperlink can be the the same or different.)
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| See Linked Image template | [](https://leofinance.io) | <a href="https://leofinance.io"><img src="https://leofinance.io/_nuxt/img/leofinance.c6ad534.svg" alt="LeoFinance SVG graphic" /></a> |
| Comments: |
|---|
The only difference between a text link and an image link is the ! before the left square bracket ([). Text inside is required for a text link but optional for an image link; even so, including alt-text for an image link is helpful for achieving better SEO (Search Engine Optimization). For a linked image or clickable image, an optional text label (such as "Click for full-sized image") can be included before the 2nd right square bracket; if it needs to appear on a separate line, precede that text label with <br />. |
There are 2 kinds of code fragments:
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 backtick or grave accent mark (`), then the code, then 1 backtick (`) | `Monero (XMR)` is a privacy-focused altcoin. | Monero (XMR) is a privacy-focused altcoin. | <code>Monero (XMR)</code> is a privacy-focused altcoin. |
| Comments |
|---|
The 1 backtick (or grave accent mark)-- `-- precedes and follows the short text being rendered as code in a sentence. Spaces are not allowed between the backticks and the text. |
In theory, it is possible to include block code inside a Markdown table. When the block code involves actual HTML CODE elements, it can get tricky. For this reason, block code will handled here the same way as Markdown headings:
Code(s): 3 backticks or grave accent marks (```) on one line, then the lines of code, then 3 backticks (```)
Usage:
```
var xmr = "Monero";
document.write("XMR is the symbol for ", xmr);
```
Output:
```
var xmr = "Monero";
document.write("XMR is the symbol for ", xmr);
```
HTML Equivalent:
<code>
var xmr = "Monero";
document.write("XMR is the symbol for ", xmr);
</code>
| Comments |
|---|
The 3 backticks (or grave accent marks)--```-- are also known as "code fencing" because they are on lines by themselves before and after the code block. Spaces inside the block of code are recognized and left alone by the web browser. For HTML, both inline code and block code use the CODE element. |
Tables are sets of data arranged in columns and rows. Usually they feature numeric data, but any kind of inline data can be included in a table.
Markdown tables are easier to create or generate than HTML tables. However, HTML tables are more versatile than Markdown tables, and HTML tables can feature merged cells which span multiple columns or rows.
Markdown tables are easy to generate even by hand:
|).---) inside each column.||).The description for a 4-column Markdown table will be handled differently here:
Code: Start with 1 pipe (|), then alternate column heading titles and single pipes. However many columns the table has, there needs to be 1 extra pipe (|).
Usage: | Heading 1 | Heading 2 | Heading 3 | Heading 4 |
Output: | Heading 1 | Heading 2 | Heading 3 | Heading 4 |
HTML Equivalent:
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
<th>Heading 4</th>
</tr>
</thead>
| Comments: |
|---|
| While doable, one of the hardest tasks in HTML is making tables. Markdown makes creating tables a simple task even if the Markdown code is typed rather than generated. However many columns the table has, there needs to be 1 extra pipe (|). In HTML, tables are split into 3 parts: THEAD, TBODY, and TFOOT. If a table has column headings, then the THEAD section is required to use them. |
Code: Same as for Column Headings, only 3 dashes (---) are used in place of the column heading titles.
Usage: | --- | --- | --- | --- |
Output: | --- | --- | --- | --- |
HTML Equivalent: None
| Comments: |
|---|
| Placing column headings in the THEAD section automatically divides the column headings from the data section of the table. |
| Did You Know? |
|---|
| Depending on which Hive front-end is used, table text can be aligned based on how the table divider is defined. Colons (:)determine the alignment: * :--- = --- = Aligned Left;* ---: = Aligned Right;* :---: = Aligned Center |
Code: Same as for Column Headings, only actual data is used in place of the column heading titles.
Usage: | Words | Numbers | Images | Data |
Output: | Words | Numbers | Images | Data |
HTML Equivalent:
<tbody>
<tr>
<td>Words</td>
<td>Numbers</td>
<td>Images</td>
<td>Data</td>
</tr>
</tbody>
| Comments: |
|---|
| In both Markdown and HTML, the column heading row and the data rows are created almost the same way. Markdown column headings appear above the table divider, and in HTML they appear inside TH elements inside a THEAD element. Markdown data rows appear below the table divider, and in HTML they appear inside TD elements inside a TBODY element. |
NOTE: ± = the single character representing combined "plus or minus"
| Crypto | USD (6 February 2022) | 5 March 2022 | Trend | USD ± | Percentage ± |
| --- | ---: | ---: | --- | ---: | ---: |
| Bitcoin | 42,476.000 | 39,463.000 | DOWN ↘ | -3,013.000 | -7.093% |
| Ethereum | 3,062.670 | 2,668.710 | DOWN ↘ | -393.960 | -12.863% |
| Litecoin | 127.600 | 105.0400 | DOWN ↘ | -22.560 | -17.680% |
| HBD | 0.981 | 0.958 | DOWN ↘ | -0.023 | -2.345% |
| HIVE | 1.230 | 0.921 | DOWN ↘ | -0.309 | -25.122% |
| Cub Finance | 0.278 | 0.426 | UP ↗ | +0.148 | +53.237% |
| Crypto | USD (6 February 2022) | 5 March 2022 | Trend | USD ± | Percentage ± |
|---|---|---|---|---|---|
| Bitcoin | 42,476.000 | 39,463.000 | DOWN ↘ | -3,013.000 | -7.093% |
| Ethereum | 3,062.670 | 2,668.710 | DOWN ↘ | -393.960 | -12.863% |
| Litecoin | 127.600 | 105.0400 | DOWN ↘ | -22.560 | -17.680% |
| HBD | 0.981 | 0.958 | DOWN ↘ | -0.023 | -2.345% |
| HIVE | 1.230 | 0.921 | DOWN ↘ | -0.309 | -25.122% |
| Cub Finance | 0.278 | 0.426 | UP ↗ | +0.148 | +53.237% |
It's obvious how compact tables are using Markdown. Below is the HTML equivalent of the above table. Extra spacing and whitespeace have been added for clarity and readability.
<table>
<thead>
<tr>
<th>Crypto</th>
<th>USD (6 February 2022)</th>
<th>5 March 2022</th>
<th>Trend</th>
<th>USD ±
<th>Percentage ±
</tr>
</thead>
<tbody>
<tr>
<td>Bitcoin</td>
<td>42,476.000</td>
<td>39,463.000</td>
<td>DOWN ↘
<td>-3,013.000</td>
<td>-7.093%</td>
</tr>
<tr>
<td>Ethereum</td>
<td>3,062.670</td>
<td>2,668.710</td>
<td>DOWN ↘
<td>-393.960</td>
<td>-12.863%</td>
</tr>
<tr>
<td>Litecoin</td>
<td>127.600</td>
<td>105.0400</td>
<td>DOWN ↘
<td>-22.560</td>
<td>-17.680%</td>
</tr>
<tr>
<td>HBD</td>
<td>0.981</td>
<td>0.958</td>
<td>DOWN ↘
<td>-0.023</td>
<td>-2.345%</td>
</tr>
<tr>
<td>HIVE</td>
<td>1.230</td>
<td>0.921</td>
<td>DOWN ↘
<td>-0.309</td>
<td>-25.122%</td>
</tr>
<tr>
<td>Cub Finance</td>
<td>0.278</td>
<td>0.426</td>
<td>UP ↗
<td>+0.148</td>
<td>+53.237%</td>
</tr>
</tbody>
</table>
Even if the HTML was compressed to have only HTML elements and data, the table would have been larger than its Markdown equivalent. On top of that, the HTML table would have been-- at the very least-- difficult not only to read but also to maintain and update.
| Comments : |
|---|
| Each piece of Markdown from the example table-- anything between the pipes (|)-- would have taken up 42 separate lines had they been spaced like an old-school HTML table. While that's a lot of lines, it's less than the 52 lines taken up by the actual HTML equivalent table. Part of the appeal of Markdown is its ability to work together with HTML to produce a final piece of content. For most blogging platforms, Markdown would be good enough for most tables. For situations such as merged column cells or merged row cells, an HTML table is needed. |
Footnotes are used to document sources used in making a written work such as a non-fiction book or a wiki-style page. A notation appears beside the text which had been sourced, and at the end of the page or document the source is noted and/or explained.
The example for Footnote in the Markdown Guide available at the LeoFinance Publish page wasn't clear on how to make a footnote in Markdown. For this reason, I took the following example Markdown code for footnotes from the Extended Syntax page at {Markdown Guide}
Here's a simple footnote,[1] and here's a longer one.[2]
Add as many paragraphs as you like.
%This line is not part of the blockquote, but is included to explain that the actual footnotes will appear at the end of this post even after the customary closing signature.%
| Comments: |
|---|
| Unlike most pieces or Markdown explained above (and below), footnotes need to be handled in two parts: the note where its needed, and the explanation of the note. These two parts are written together, but they will be displayed properly when the blog post is published, with notes appearing where needed and the explanations at the end of the post. |
Although footnotes are made in two parts, thr Markdown code for each part is identical.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 left square bracket ([), then 1 caret (^), then an alphanumeric identifier, then 1 right square bracket (]) | This is sentence is supposed to be about SafeMoon (SAFEMOON)[^safemoon]. This sentence is supposed to be about Cosmos (ATOM)[^cosmos] | This is sentence is supposed to be about SafeMoon (SAFEMOON)[^safemoon]. This sentence is supposed to be about Cosmos (ATOM)[^cosmos] | This is sentence is supposed to be about SafeMoon (SAFEMOON)<sup><a href="#anchor-sf" id="safemoon">1</a></sup>. This sentence is supposed to be about Cosmos (ATOM)<sup><a href="#anchor-ca" id="cosmos">2</a></sup> |
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| Same as 14a, only followed by 1 colon (:) and 1 space. | [^safemoon]: SafeMoon (SAFEMOON) is a cryptocurrency. [^cosmos]: Cosmos (ATOM) is another cryptocurrency | `[^safemoon]: SafeMoon (SAFEMOON) is a cryptocurrency. [^cosmos]: Cosmos (ATOM) is another cryptocurrency | <sup id="safemoon">1: SafeMoon (SAFEMOON) is a cryptocurrency.< href="achor-sf">↩</a> <sup id="cosmos">2: Cosmos (ATOM) is another cryptocurrency< href="achor-ca">↩</a> |
| Comments: |
|---|
| The 2 parts of the footnote are required for Markdown code to work as intended. If either piece is missing, it will appear in the blog post as code which doesn't work. Any alphanumeric identifier can be used for a footnote; by the time the blog post is published, it will be displayed properly (i.e., in numeric order). The notes will appear where they are needed, but the explanations will be shifted to the bottom of ther blog post. HTML equivalent for footnotes isn't an HTML element for footnotes; it's a combination of superscript ( <sup>...</sup>) surrounding anchor links (<a href="#...">...</a>). While Markdown will convert alphanumeric identifiers into their sequential numeric equivalents, HTML doesn't offer this convenience; the numbers need to be inserted manually for both parts of each footnote. |
Emojis (or emoticons, or emotive icons) are small inline inages which represent an emotion or gesture or some other idea. Smileys are one of the earliers forms of emojis, and they were made by combining keyboard characters (for example, :) for a smiling face).
Emojis as we know them today are special codes called shortcodes associated with small images. These emjois can be inserted into a post by directly typing the shortcode or by selecting it from a toolbar widget. A good number of blogging platforms include ways to add emojis to posts or comments.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
1 colon (:), then the emjoi shortcode, then 1 colon (:) | Two thumbs up for Terra (LUNA)! :thumbup: :thumbup: | Two thumbs up for Terra (LUNA)! :thumbup: :thumbup: | Two thumbs up for Terra (LUNA)! :<img src="whatever-the-URL-is-for-thumbsup" />: :<img src="whatever-the-URL-is-for-thumbsup" />: |
| Comments: |
|---|
| Mixed results for Markdown codes emojis: Support for shortcodes (for example, :thumbsup:) is iffy to zero; there are too many to test for now to see if they will display properly. Emojis from the editor toolbar will be inserted natively in posts and comments, so they will be displayed natively. Emojis from one front-end (for example, Ecency) can be copied to a front-end which doesn't have an emoji widget on its edit toolbar (such as the LeoFinance front-end). |
Mathematics and Engineering are toics for which communities exist on Hive blockchain, so it make sense that complex equations need to be displayed in a post as they would be displayed in a textbook: with advanced symbols and subscripts and superscripts.
Even finance posts explaining the mathematics behind financial functions can use this advanced notation.
This is where KaTeX Mathematics enters the picture. Just as Markdown can include HTML codes, Markdown can include KaTeX Mathematics codes.
The Markdown Guide at LeoFinance mentions 2 types of formulas, so it will be these 2 types explained here: inline formulas, and single-line formulas. Rather than use the explanation format for the other Markdown codes, let's trace how KaTeX Mathematics codes work step by step.
Just as there can be inline code included within a sentence, there can be inline KaTeX Mathematics Codes included in a sentence. This example comes from the Markdown Guide used at LeoFinance:
We can render formulas for example $x_i + y_i = z_i$
Whatever the formula to be formatted is needs to be surrounded by dollar signs ($).
Values for x and y are being added to get a sum called z. There may be versions of these values for initial state, current state, final state, etc.; this is why the example formula included the subscript i for all 3 values. To add a subscript to a value, place an underscore character (_) between the value and the subscripted letter or number.
That's it for this example.
What if a superscript needs to be used, as in Albert Einstein's famous equation?
c and the 2.What if a formula needs to be on its own line with no other text or content?
Instead of using 1 "$" to surround the formula, the formula gets surrounded by 2 dollar signs ("$$"). Using 1 "$" here is similar to using 1 "*" for italic text, and using 2 "$" characters here is similar to using 2 "*" here for bold text.
| Comments: |
|---|
| Mixed results for KaTeX Mathematics Codes: While the LeoFinance front-end will show properly-rendered KaTeX in the 2-pane data entry mode for writing posts, the KaTeX don't appear as proper formulas but rather raw codes. For Ecency, KaTeX Mathematics Codes: will not appear. Given the communities which could benefit from using KaTeX Mathematics Codes, it's a shame that bloggers won't be able to do so. |
Markdown codes for layout are used to position pieces of content as a group. These pieces of content can be positioned left, centered, or right, and other content flows around it. Think of floated content from popular news sites of all types.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
3 colons (:::), then 1 space, then "hljs-", then one of "left" or "right" or "center"; then content on the next line, then 3 colons (:::) on a separate line | ::: hljs-centerChainlink::: | ::: hljs-center Chainlink ::: | HTML with CSS classes or inline style would need to be used here |
::: hljs-center
Testing
:::
::: hljs-center
Markdown
:::
::: hljs-center
Layout
:::
| Comments |
|---|
| NOT SUPPORTED * Neither LeoFinance front-end nor Ecency will show content arranged using the Markdown codes for layout. Alternatives exist, but they are not Markdown alternatives. |
Definition lists are lists of paired items, each item containing a term and its definition. Dictionaries or glossaries are the most common uses of definition lists, but they can have other uses (even in comments or replies).
Due to the nature of definition lists, they will be handled here the same way as ordered lists and unorderd lists:
Code(s): The term on one line, then on the next line 1 colon (:), then 5 spaces, then the definition
Usage:
PLS
: PulseChain
FTM
: Fantom
Output:
PLS[PulseChain](https://leofinance.io/hive-167922/@crypto-guides/what-is-pulsechain-pls)
[Fantom](https://leofinance.io/hive-167922/@crypto-guides/what-is-fantom-crypto-ftm)
HTML Equivalent:
<dl>
<dt>PLS</dt>
<dd>PulseChain</dd>
<dt>FTM</dt>
<dd>Fantom</dd>
</dl>
| Comments: |
|---|
| Mixed results for definition lists While the LeoFinance front-end will properly display definition lists in the 2-pane data entry mode for writing posts, the definition lists appear as raw Markdown in the draft preview page or actual blog post. However, for Ecency, definition lists (at least simple ones) look like definition lists. Oddly enough, HTML for definition lists won't work in either the LeoFinance front-end or Ecency. This means that a definition list would need to use an HTML workaround (maybe even including symbol emojis) to be displayed. |
Abbreviations are shorthand terms which stand for a full name: Symbols for many cryptocurrencies and foreign currencies can be considered abbreviations. More familiar abbreviations include those for sports leagues, certain countires or regions, government agencies-- anything which is better-known by a few letters or a shorter word.
The idea behind Markdown and HTML abbreviations is to define a common abbreviation so that it can be displayed as text with a tooltip. Markdown is coded for the abbreviation, but it will kept out of sight. Then when text is typed containing the abbreviation, the abbreviation will apprear (usually) with a dotted underline. If the mouse is placed over this abbreviation, a tooltip should appear explaining the meaning behind the abbreviation.
| Code(s) | Usage | Output | HTML Equivalent |
|---|---|---|---|
| 1 asterisk (*), then 1 left square bracket ([), then the abbreviation, then 1 right square bracket (]), then 1 colons (:), then 1 space, then the meaning of the abbreviation | *[NFT]: Non-fungible TokendCity is another blockchain game using something called NFT | *[NFT]: Non-fungible Token dCity is another blockchain game using something called NFT | dCity is another blockchain game using something called <abbr title="Non-fungible Token">NFT</abbr> |
| Comments: |
|---|
| Mixed results for abbreviation While the LeoFinance front-end will properly display an abbreviation in the 2-pane data entry mode for writing posts, the sentence containing the abbreviation appears as plain text with no special effect indicating the presence of an abbreviation. Markdown code for abbreviation does not work with Ecency. HTML for abbreviation in both the LeoFinance front-end and Ecency is not supported. |
Shortcodes for emjois should be recognized by the front-end, yet they appear in posts as raw text. For the emoji to appear as an emoji, it needs to be inserted from the emoji widget on the editing toolbar. If it's not on the editing toolbar at the LeoFinance front-end, it will accept emojis from other front-ends such as Ecency.
It turns out there are TWO post viewers used by the LeoFinance front-end:
The first viewer actually displays most of the 19 kinds of Markdown used here. Unfortunately, the second viewer presents that Markdown as raw text, codes and all. For this reason, some Markdown codes offer mixed results. For some of these problematic Markdown codes, HTML equivalents can be used; for others, they are not ready for prime time. Noting these discrepancies accounts for many chunks of this post.
Below is a list of external references mentioned in the Markdown Guide used by LeoFinance:
Below are resources I consulted while preparing this post:
Markdown is a good tool for composing blog posts and typing comments. It also has its limitations. What makes the situation more complicated is the variety of extended Markdown flavors which exist. Markdown from fron flavor won't work with another flavor of Markdown, and some other version of Markdown won't recognize code from the other two versions.
LeoFinance offers a Markdown Guide anyone can access when using the LeoFinance front-end to compose and publish a post. It makes sense to think that the Markdown coves shown in the guide are the same ones we can use as we type our posts. To my surprise, some work as expected in edit mode, yet they don't do a thing in draft preview or in an actual post. WYSIWIG doesn't exist here.
The Markdown Guide covers 19 topics, and I went through every topic and variation listed for the topics. This post is the result of my research into the Markdown we use at Hive Social.
Each topic covers Markdown codes for the topic, Markdown usage, Markdown output, and the HTML equivalent where possible. Comments for each topic include what I discovered during my research.
As I worked on this post I saw the need for additional-- and smaller-- posts which would refer back to this one. Topics include which Markdown codes can be used, which ones can be avoided, and how the general front-ends plus the LeoFinance front-end handle the Markdown. Emojis will be covered separately as well.
| Links in image | URLs |
|---|---|
| Daily Crypto Markets Live Blog | https://leofinance.io/@leomarkettalk |
| LeoFinance | https://leofinance.io |
| TheTerminal | /created/hive-101265 |
| Hive Projects | https://hiveprojects.io |
| Dust Sweeper |  @dustsweeper |
| Dust Bunny |  @dustbunny |
| Links in image | URLs |
|---|---|
| "...to make up for..." | https://leofinance.io/hive-167922/@magnacarta/who-is-magnacarta-and-why-is-he-sending-me-pizza |
| LeoFinance | https://leofinance.io/@magnacarta |
| Proof of Brain | https://proofofbrain.blog/@magnacarta |
| ♦ D.Buzz-only ♦ D.Buzz: ♦ at-magnacarta.buzz | https://blog.d.buzz/#/@magnacarta.buzz |
| Festivus | https://festivusweb.com/index.php |