Markdown

Basic Concepts

This information briefly summarizes the information from the Markdown Guide (opens in a new tab) website.

Headings

To create a heading, add number signs # before the word or phrase. The number of number signs should correspond to the heading level. For example, to create a third-level heading <h3>, use three number signs, for example, ### My Heading.

Markdown

# Heading level 1
## Heading level 2
### Heading level 3
#### Heading level 4
##### Heading level 5
###### Heading level 6

Emphasis

You can add emphasis by making text bold or italic.

Bold

I just love **bold text**. - I just love bold text.
I just love __bold text__. - I just love bold text.
Love**is**bold - Loveisbold

Italic

Italicized text is the *cat's meow*. - Italicized text is the cat's meow.
Italicized text is the _cat's meow_. - Italicized text is the cat's meow.
A*cat*meow - Acatmeow

Bold and Italic

This text is ***really important***. - This text is really important.
This text is ___really important___. - This text is really important.
This text is __*really important*__. - This text is really important.

Blockquotes

Markdown

> Dorothy followed her through many of the beautiful rooms in her castle.

Dorothy followed her through many of the beautiful rooms in her castle.

Blockquotes with multiple paragraphs

Markdown

> Dorothy followed her through many of the beautiful rooms in her castle.
>
> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Nested blockquotes

Markdown

> Dorothy followed her through many of the beautiful rooms in her castle.
>
>> The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Dorothy followed her through many of the beautiful rooms in her castle.

The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Blockquotes with other elements

Markdown

> **The quarterly results look great!**
>
> - Revenue was off the chart.
> - Profits were higher than ever.
>
>  *Everything* is going according to **plan**.

The quarterly results look great!

Revenue was off the chart.

Profits were higher than ever.

Everything is going according to plan.

Lists

You can organize items into ordered and unordered lists.

Markdown

1. First item
2. Second item
3. Third item
4. Fourth item

First item
Second item
Third item
Fourth item

Markdown

1. First item
2. Second item
3. Third item
    1. Indented item
    2. Indented item
4. Fourth item

First item
Second item
Third item
1. Indented item
2. Indented item
Fourth item

Markdown

- First item
- Second item
- Third item
- Fourth item

First item
Second item
Third item
Fourth item

Markdown

- First item
- Second item
- Third item
    - Indented item
    - Indented item
- Fourth item

First item
Second item
Third item
- Indented item
- Indented item
Fourth item

Markdown

* This is the first list item.
* Here's the second list item.
 
    I need to add another paragraph below the second list item.
 
* And here's the third list item.

This is the first list item.
Here's the second list item.

I need to add another paragraph below the second list item.
And here's the third list item.

Horizontal Rule

To create a horizontal rule, use three or more asterisks ***, dashes ---, or underscores ___ on a separate line.

Markdown

***
 
---
 
_________________

The visual output of all three is the same:

Links

To create a link, enclose the link text in square brackets (e.g., [Duck Duck Go]), and then immediately follow it with the URL in parentheses (e.g., (https://duckduckgo.com)).

Markdown

My favorite search engine is [Duck Duck Go](https://duckduckgo.com "The best search engine for privacy").

The rendered output will look like this:

My favorite search engine is Duck Duck Go (opens in a new tab).

ℹ️

You can also insert a plain URL without any formatting.

Images

To add an image, use an exclamation mark !, followed by the alt text in brackets, and the path or URL of the image resource in parentheses. Optionally, you can add a title in quotes after the path or URL.

Markdown

![Placeholder!](https://placehold.co/832x400/ "Placeholder")

Placeholder!

MDX

All your .mdx files located in the pages directory will be rendered using MDX (opens in a new tab) - an extended Markdown format with React components support.

For example, you can import and use React components inside Markdown files like this:

Markdown

## Hello, MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      {children}
      {count}
    </button>
  )
}
 
<Counter>**Clicks**: </Counter>

It will be transformed into:

In addition to basic MDX, the Documentation also incorporates some advanced Markdown features.

GitHub Flavored Markdown

GFM (opens in a new tab) is a Markdown extension created by GitHub that adds support for strikethrough, task lists, tables, and more.

Strikethrough

~~deleted~~

Markdown

~~deleted~~

Task Lists

Write press release
Update website
Contact media

Markdown

- [x] Write press release
- [ ] Update website
- [ ] Contact media

Autolinks

Visit https://nextjs.org (opens in a new tab).

Visit https://nextjs.org.

Custom Heading ID

You can specify a custom heading ID using the format ## My Heading [#custom-id]. For example:

Markdown

## Long Heading [#about]

In this example, #about will be used as the link to the heading, replacing the default #long-heading.

import

Syntax Highlighting

We use Shiki (opens in a new tab) for syntax highlighting during the build process. It is highly reliable and efficient. For example, adding the following code to your Markdown file:

Markdown

```js
console.log('hello, world')
```

Output:

console.log('hello, world')

Features

Inline Code

Inline syntax highlighting is also supported, for example let x = 1, using the syntax {:}:

Markdown

Inlined syntax highlighting is also supported `let x = 1{:jsx}` via:

Line Highlighting

You can highlight specific lines of code by adding the {} attribute to the code block:

Markdown

```js {1,4-5}
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Output:

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

Substring Highlighting

You can highlight specific substrings within the code block by adding // attribute:

Markdown

```js /useState/
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Output:

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

You can highlight only certain occurrences of that substring by adding a number to it: /str/1 or multiple: /str/1-3, /str/1,3.

Copy Button

Adding the copy attribute will add a copy button to the code block when the user hovers over it:

Markdown

```js copy
console.log('hello, world')
```

Output:

console.log('hello, world')

Line Numbers

You can add line numbers to code blocks by adding the showLineNumbers attribute:

Markdown

```js showLineNumbers
import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}
```

Output:

import { useState } from 'react'
 
function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

File Names and Headers

You can add a file name or header to code blocks by adding the filename attribute:

Markdown

```js filename="example.js"
console.log('hello, world')
```

Output:

example.js

console.log('hello, world')

ANSI Highlighting

You can highlight ANSI escape codes:

Markdown

```ansi
[0m [0;32m✓[0m [0;2msrc/[0mindex[0;2m.test.ts (1)[0m
  [0;2m Test Files [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m      Tests [0m [0;1;32m1 passed[0;98m (1)[0m
  [0;2m   Start at [0m 23:32:41
  [0;2m   Duration [0m 11ms
  [42;1;39;0m PASS [0;32m Waiting for file changes...[0m
         [0;2mpress [0;1mh[0;2m to show help, press [0;1mq[0;2m to quit
```

Output:

 ✓ src/index.test.ts (1)
   Test Files  1 passed (1)
        Tests  1 passed (1)
     Start at  23:32:41
     Duration  11ms
   PASS  Waiting for file changes...
         press h to show help, press q to quit

Supported Languages

Check this list (opens in a new tab) for all the supported languages.

With Dynamic Content

Since syntax highlighting is done during the build process, you cannot use dynamic content within code blocks. However, since MDX is very powerful, there is a workaround using client-side JavaScript. For example:

dynamic_code.js

function hello () {
  const x = 2 + 3
  console.log(1)
}

Increase the number Change to `1 + 1`

This workaround has a limitation: updated content will not be highlighted again. For example, if we update the number to 1 + 1, it will not be correctly highlighted.

Getting Started Basic Blocks

Markdown

Basic Concepts

Headings

Emphasis

Bold

Italic

Bold and Italic

Blockquotes

Blockquotes with multiple paragraphs

Nested blockquotes

Blockquotes with other elements

Lists

Horizontal Rule

Links

Images

MDX

GitHub Flavored Markdown

Strikethrough

Task Lists

Autolinks

Custom Heading ID

Syntax Highlighting

Features

Inline Code

Line Highlighting

Substring Highlighting

Copy Button

Line Numbers

File Names and Headers

ANSI Highlighting

Supported Languages

With Dynamic Content

Resources

Game

Editor

Content

Support

Legal

DEVLOG 1 - Перший реліз редактора!