> This guide is an abstraction from Github's Formatting Syntax documentation.[^1]\ > We are using it to show the various styles that we have available. # Headings To create a heading, add one to two # symbols before your heading text. The number of # you use will determine the hierarchy level and typeface size of the heading.

Heading 1

Heading 2

```text copy # Heading 1 # Heading 2 ``` # Styling Text You can indicate emphasis with bold, italic, strikethrough, subscript, or superscript text in comment fields and .md files.

**Bold**

*Italic*

~~Strikethrough~~

_Subscript

^Superscript

⌘K

```text **Bold** *Italic* ~~Strikethrough~~ _Subscript ^Superscript ⌘K ``` # Quoting Text You can quote text with a >. Text that is not a quote > Text that is a quote ```text Text that is not a quote > Text that is a quote ``` # Links You can create an inline link by wrapping link text in brackets, and then wrapping the URL in parentheses. [Link](https://www.youtube.com/watch?v=dQw4w9WgXcQ) ```text [Link](https://www.youtube.com/watch?v=dQw4w9WgXcQ) ``` # Lists You can make an unordered list by preceding one or more lines of text with -. - George Washington - John Adams - Thomas Jefferson ```text - George Washington - John Adams - Thomas Jefferson ``` To order your list, precede each line with a number. 1. James Madison 2. James Monroe 3. John Quincy Adams ```text 1. James Madison 2. James Monroe 3. John Quincy Adams ``` # Footnotes You can add footnotes to your content by using this bracket syntax `[^1]` and then defining the footnote at the bottom of your content.

The invention of the printing press revolutionized the spread of information in Europe during the 15th century.[^2]

[^2]: Johannes Gutenberg is credited with inventing the movable-type printing press around 1440 in Mainz, Germany. ```text The invention of the printing press revolutionized the spread of information in Europe during the 15th century.[^2]. [^2]: Johannes Gutenberg is credited with inventing the movable-type printing press around 1440 in Mainz, Germany. ``` # Preview You can preview your markdown content in real-time by using the preview feature in the editor. We have been using it throughout this guide to show you how your markdown content will look when rendered. It comes with a single prop, codeblock, that you can use to display the code block right below the preview.

```tsx

``` ```tsx

``` # Inline Code Append `{:lang}{:js}` (e.g. `{:js}{:js}`) to the end of inline code to highlight it like a regular code block. To useEffect or not to `useEffect(){:tsx}`, that is the question. ```text This is an array `[1, 2, 3]{:js}` of numbers 1 through 3. ``` # Code Blocks To format code or text into its own distinct block, use triple backticks. ```tsx function feature() { return "It works in my environment."; } ``` ```text ```tsx function feature() { return "It works in my environment."; } ```‎ ``` # Media You can embed images, videos, and other media in your markdown content. You can also add captions to your images via the `` component.

```text

``` # Tables You can create tables by assembling a list of words and dividing them with hyphens - (for the first row), and then separating each column with a pipe |. | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | ```text | First Header | Second Header | | ------------- | ------------- | | Content Cell | Content Cell | | Content Cell | Content Cell | ``` [^1]: Github, ["Basic Writing and Formatting Syntax"](https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax) Github, 2024. [Accessed: 19-Sep-2024].

Component Showcase