Markdown in TinyBones

Markdown is the primary format for writing content in this blog. Below are examples of common Markdown syntax (all markdown syntax is supported).

Headings

To create headings, use hash symbols (#) followed by a space. The number of hash symbols indicates the heading level.

# Heading 1

## Heading 2

### Heading 3

#### Heading 4

##### Heading 5

###### Heading 6

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraphs

To create paragraphs, use a blank line to separate one or more lines of text.

<!-- empty line -->

I love Star Wars.

<!-- empty line -->

My favourite is Episode III – Revenge of the Sith.

<!-- empty line -->

I love Star Wars.

My favourite is Episode III – Revenge of the Sith.

Italics

Use one asterisk (*) or underscore (_) to italicize text.

I _love_ Star Wars.
My _favourite_ is Episode III – Revenge of the Sith.

I love Star Wars. My favourite is Episode III – Revenge of the Sith.

Bold

Use two asterisks (*) or underscores (_) to bold text.

I **love** Star Wars.
My **favourite** is Episode III – Revenge of the Sith.

I love Star Wars. My favourite is Episode III – Revenge of the Sith.

Italics and Bold

Use three asterisks (*) or underscores (_) to both bold and italicize text.

I **_love_** Star Wars.
My **_favourite_** is Episode III – Revenge of the Sith.

I love Star Wars. My favourite is Episode III – Revenge of the Sith.

Blockquotes

To add a blockquote add the greater-than character (>) before a paragraph. For multi-line blockquotes, add additional greater-than character for each line and include an empty spacer line.

> So this is how liberty dies...
>
> with thunderous applause.

So this is how liberty dies…
with thunderous applause.

Strikethrough

Use tilde (~) symbols to strikethrough text.

~~I don't like sand.~~ It's coarse and rough and irritating.

~~I don’t like sand.~~ It’s coarse and rough and irritating.

Horizontal Rule

Use three hyphens (-), asterisks (*), or underscores (_) to create a horizontal rule.

---

Links

To create a link, the link text in brackets ([]) and then follow it immediately with the URL in parentheses (()).

[boogerbuttcheeks.com](https://boogerbuttcheeks.com)

boogerbuttcheeks.com

Ordered Lists

To create an ordered list, add line items with numbers followed by periods. Use an indent to create a nested list.

1. Item 1
2. Item 2
   1. Sub item 1
   2. Sub item 2
3. Item 3

Item 1
Item 2
1. Sub item 1
2. Sub item 2
Item 3

Unordered List

To create an unordered list, add a hyphen (-), an asterisk (*), or a plus sign (+) in front of line items. Don’t mix. Use an indent to create a nested list.

- Item 1
- Item 2
  - Sub item 1
  - Sub item 2
- Item 3

Item 1
Item 2
- Sub item 1
- Sub item 2
Item 3

Checkboxes

Combine a list with square brackets ([]) representing a checkbox. Typing x inside the brackets marks the task as complete.

- [x] Build a lightsaber
- [ ] Pass the Jedi Trials
- [ ] Train a Padawan

Build a lightsaber
Pass the Jedi Trials
Train a Padawan

Code

To denote a word or phrase as code, enclose it in backticks (`).

`Hello, world!`

Hello, world!

Code Blocks

Denote a code block by wrapping a section of valid code in triple backticks (`). To enable syntax highlighting, type the shorthand symbol for the language after the first three backticks. Reference for shorthand symbols.

```js
  function hello() {
    console.log("hello world");
  }
```

function hello() {
  console.log("hello world");
}

Images

To add an image, add an exclamation mark (!), followed by alt text in brackets ([]), and the path or URL to the image asset in parentheses.

![altText](pathToImage)

Relative

Use the ![altText](./image.*) pattern relative to the same folder as the markdown file. Notice the period.

![X-Wing Starfighter](./x-wing.jpeg)

X-Wing Starfighter

External Image

Use the ![altText](imageUrl) pattern.

![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg)

Naboo N-1 Starfighter

Image link

Use the [![altText](imageUrl)](href)

[![Naboo N-1 Starfighter](https://raw.githubusercontent.com/trevortylerlee/n1/main/n1.jpeg)](https://trevortylerlee.com)

Footnotes

Add a caret (^) and an identifier inside brackets ([^1]). Identifiers can be numbers or words but can’t contain spaces or tabs.

Here's a footnote, [^1] and here's another one. [^2]
[^1]: This is the first footnote.
[^2]: This is the second footnote.

Here’s a footnote, ¹ and here’s another one. ²

See the bottom of this page to view the footnotes.

HTML

<p align="center">
 This is a paragraph aligned to the center.
</p>

This is a paragraph aligned to the center.

Subscript

Use the <sub> tag to denote subscript.

H<sub>2</sub>O

H₂O

Superscript

Use the <sup> tag to denote superscript.

E=mc<sup>2</sup>

E=mc²

Keyboard

Use the <kbd> tag to denote keys on the keyboard.

<kbd>CTRL</kbd> + <kbd>ALT</kbd> + <kbd>Delete</kbd>

CTRL + ALT + Delete

Abbreviate

Use the <abbr> tag to denote abbreviation.

<abbr title="Graphics Interchange Format">GIF</abbr>

GIF

Highlight

Use the <mark> tag to denote highlighted text.

Do or do not. <mark>There is no try.</mark>

Do or do not. There is no try.

Tables

Use three or more hyphens (-) for the column headers and use pipes (|) to separate each column. You can align text in the columns to the left, right, or center by adding a colon (:) to the left, right, or on both side of the hyphens.

| Item   | Count |
| :----- | ----: |
| X-Wing |     1 |
| Y-Wing |     2 |
| A-Wing |     3 |

Item	Count
X-Wing	1
Y-Wing	2
A-Wing	3

MDX Support

This blog also supports MDX (Markdown with JSX) which allows you to use React-like components in your content.

See the MDX Syntax Example for details on using MDX, including the built-in InfoBox component for admonitions and creating your own custom components.

Conclusion

Refer to markdownguide.org for best practices as well as extended syntax.

footnote example*

This is the first footnote. ↩
This is the second footnote. ↩

Markdown Syntax Example

Table of Contents