Markdown

Базовые понятия

Данная информация коротко пересказывает информацию с сайта Markdown Guide (opens in a new tab)

Заголовки

Чтобы создать заголовок, добавьте перед словом или фразой знаки номеров #. Количество знаков номеров должно соответствовать уровню заголовка. Например, чтобы создать заголовок третьего уровня <h3>, используйте три знака номеров например, ### Мой заголовок.

Markdown

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

Акцент

Вы можете добавить акцент, сделав текст полужирным или курсивом.

Жирный

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

Курсив

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

Жирный и курсивный

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.

Цитаты

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.

Цитаты с несколькими абзацами

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.

Вложенные цитаты

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.

Цитаты с другими элементами

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.

Списки

Вы можете организовать элементы в упорядоченные и неупорядоченные списки.

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.

Линия (HR)

Чтобы создать горизонтальную линейку, используйте три или более звездочек ***, дефисов --- или символов подчеркивания ___ в отдельной строке.

Markdown

***
 
---
 
_________________

Визуализированный вывод всех трех выглядит одинаково:

Ссылки

Чтобы создать ссылку, заключите текст ссылки в квадратные скобки (например, [Duck Duck Go]), а затем сразу же укажите URL-адрес в круглых скобках (например, (https://duckduckgo.com)).

Markdown

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

Отрендеренный вывод выглядит следующим образом:

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

ℹ️

Вы также можете вставить просто ссылку без какого либо форматирования.

Изображения

Чтобы добавить изображение, добавьте восклицательный знак !, замещающий текст в скобках и путь или URL-адрес ресурса изображения в скобках. При желании вы можете добавить заголовок в кавычках после пути или URL-адреса.

Markdown

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

Placeholder!

MDX

Все ваши файлы .mdx, находящиеся в каталоге pages, будут отображаться с использованием MDX (opens in a new tab) — это расширенный формат Markdown с поддержкой компонентов React.

Например, вы можете использовать импорт и использовать компоненты React внутри файлов Markdown следующим образом:

Markdown

## Привет, MDX
 
import { useState } from 'react'
 
export function Counter({ children }) {
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => setCount(count + 1)}>
      {children}
      {count}
    </button>
  )
}
 
<Counter>**Клики**: </Counter>

Преобразуется в:

Помимо базового MDX, в Документации также встроены некоторые расширенные возможности Markdown.

GitHub Flavored Markdown

GFM (opens in a new tab) - это расширение Markdown, созданное GitHub, которое добавляет поддержку зачеркивания, списков задач, таблиц и многого другого.

Зачеркивание

~~удалено~~

Markdown

~~удалено~~

Список задач

Написать пресс-релиз
Обновить веб-сайт
Связаться с СМИ

Markdown

- [x] Написать пресс-релиз
- [ ] Обновить веб-сайт
- [ ] Связаться с СМИ

Автоссылки

Посетите https://nextjs.org (opens in a new tab).

Посетите https://nextjs.org.

Пользовательский идентификатор заголовка

Вы можете указать пользовательский идентификатор заголовка, используя формат ## Мой заголовок [#пользовательский-id]. Например:

Markdown

## Длинный заголовок [#about]

В этом примере #about будет использоваться в качестве ссылки на заголовок, заменяя стандартный #длинный-заголовок.

import

Подсветка синтаксиса

Мы используем Shiki (opens in a new tab) для подсветки синтаксиса на этапе сборки. Он очень надежный и эффективный. Например, добавление следующего кода в ваш файл Markdown:

Markdown

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

Результат:

console.log('hello, world')

Особенности

Встроенный код

Также поддерживается встроенная подсветка синтаксиса, например let x = 1, с помощью синтаксиса {:}:

Markdown

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

Подсветка строк

Вы можете выделить определенные строки кода, добавив атрибут {} к блоку кода:

Markdown

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

Результат:

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

Подсветка подстрок

Вы можете выделить определенные подстроки кода, добавив атрибут // к блоку кода:

Markdown

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

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

Вы можете выделить только часть вхождений этой подстроки, добавив к ней число: /str/1 или несколько: /str/1-3, /str/1,3.

Кнопка копирования

Добавление атрибута copy приведет к добавлению кнопки копирования в блок кода, когда пользователь наводит на него курсор:

Markdown

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

Вывод:

console.log('hello, world')

Номера строк

Вы можете добавить номера строк к блокам кода, добавив атрибут showLineNumbers:

Markdown

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

Вывод:

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

Имена файлов и заголовки

Вы можете добавить имя файла или заголовок к блокам кода, добавив атрибут filename:

Markdown

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

Вывод:

example.js

console.log('hello, world')

Подсветка ANSI-кодов

Вы можете подсветить ANSI-escape-коды:

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
```

Вывод:

 ✓ 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

Поддерживаемые языки

Проверьте этот список (opens in a new tab) для всех поддерживаемых языков.

С динамическим содержимым

Поскольку подсветка синтаксиса выполняется на этапе сборки, вы не можете использовать динамическое содержимое в блоках кода. Однако, так как MDX очень мощный, есть обходной путь через клиентский JS. Например:

dynamic_code.js

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

Increase the number Change to `1 + 1`

Этот обходной путь имеет ограничение: обновленное содержимое не будет подсвечиваться снова. Например, если мы обновим число на 1 + 1, оно будет неправильно подсвечено.

Начало работы Основные блоки

Markdown

Базовые понятия

Заголовки

Акцент

Жирный

Курсив

Жирный и курсивный

Цитаты

Цитаты с несколькими абзацами

Вложенные цитаты

Цитаты с другими элементами

Списки

Линия (HR)

Ссылки

Изображения

MDX

GitHub Flavored Markdown

Зачеркивание

Список задач

Автоссылки

Пользовательский идентификатор заголовка

Подсветка синтаксиса

Особенности

Встроенный код

Подсветка строк

Подсветка подстрок

Кнопка копирования

Номера строк

Имена файлов и заголовки

Подсветка ANSI-кодов

Поддерживаемые языки

С динамическим содержимым

Ресурсы

Игра

Редактор

Наполнение

Поддержка

Юридическое

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