CheatSheets

Начало работы

Develop Setup

  • Клон репозитория View on Github ``Шелл-скрипт {.wrap} $ git clone https://github.com/Fechin/reference.git
  • Установка зависимостей в каталог проекта 
    $ npm install
  • Запуск Dev-сервера http://localhost:4000 
    $ npm run dev
  • Создайте или измените source/_posts/{name}.md.
  • Отправьте нам pull request и chill {.marker-timeline}

Хорошей практикой является обращение к исходному коду CheatSheets reference.

Структура каталогов

``yaml . ├── source │ ├──── _posts # Исходные файлы чипшита │ │ ├──── awk.md │ │ ├──── vim.md # => cheatsheets.zip/vim │ │ │ ├──── php.md │ │ ├──── css.md # => cheatsheets.zip/css │ │ ├── … │ └──── widget # Файлы виджетов │ └──── chmod.html ├──── public # Файлы дистрибутива ├──── _config.yml ├──── gulpfile.js ├──── package.json ├──── postcss.config.js ├──── tailwind.config.js └──── темы └──── coo # Файлы темы


### Структура чит-листа {.row-span-2}

``yaml
.
├──── Раздел 1
│ ├──── Карточка 1
│ ├──── Карточка 2
│ ├──── Карточка 3
│ ├── ...
├──── Раздел 2
│ ├──── Карточка 1
│ │ │ ├──── Параграф
│ │ │ ├──── Код
│ │ │ ├──── <hr/> (он же "---")
│ │ │ ├──── Список
│ │ │ │ ├──── Параграф
│ │ │ │ └──── Код
│ │ │ └──── Таблица
│ │ │ ├──── Параграф
│ │ │ └──── Код
│ ├──── Карточка 2
│ ├──── Карточка 3
│ └── ...
├──── Раздел 3
├──── Раздел 4
└── ...
  • Одна шпаргалка содержит несколько разделов
  • Один раздел содержит несколько карточек
  • Одна карточка может содержать код, таблицу, список и абзац
  • Один список может содержать код и абзац
  • Одна таблица может содержать код и абзац

Варианты синтаксиса

Все варианты магии, поддерживаемые CheatSheets.zip

Создать source/_posts/demo.md

Начало работы
---------------

### Карточка списка {.col-span-2}
- Быстрая справка
- Шпаргалка для разработчиков
...
{.style-timeline}

### Карточка таблицы
| id | name |
|----|---------|
| 1 | Roberta |
{.show-header}

Варианты секций

Обзор разделов

- -
{.cols-1} одноколоночный макет
{.cols-2} двухколоночный макет
{.cols-3} трехколоночный макет (по умолчанию)
…
{.cols-6} шестиколоночная верстка
  • Раздел содержит несколько карточек
  • Используйте {.cols-n} для указания раздела в виде n-колоночного макета
  • Щелкните на кнопке предварительного просмотра ниже, чтобы сфокусироваться на разделе

Предварительный просмотр {.link-arrow}

.cols-1

``text

Пример одной колонки

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 2 ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯


#### ↓ Исходный код

Пример с одной колонкой

1

2


[Preview](resolutions#lists-of-resolutions) {.link-arrow}




### .cols-2
``text
# Пример двух колонок
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ 1 ┆ ┆ 2 ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯
╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮
┆ 3 ┆
╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

↓ Исходный код

Пример с двумя колонками {.cols-2}
----------

### 1
### 2
### 3

Preview {.link-arrow}

.cols-3 (по умолчанию)

``text

По умолчанию

╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈┈╮ ┆ 4 ┆ ╰┈┈┈┈┈┈┈┈┈┈╯


#### ↓ Исходный код

По умолчанию

1

2

3

4





Варианты карт
--------------------

### Обзор карты {.secondary}

#### Указывает количество столбцов, которые охватывает карточка.

| - | - |
|-----------------|---|
| `{.col-span-2}` | [Пример](#col-span-2)|
| `{.col-span-3}` | | |
| ...             | |
| `{.col-span-6}` | | ...

#### Указывает количество строк, которые охватывает карточка {.text-left}

| - | - |
|-----------------|---|
| `{.row-span-2}` | [Пример](#row-span-2)|
| | `{.row-span-3}` | | |
| ...             | |
| | `{.row-span-6}` | | ...

#### Карта "Подчеркнуть" (она же секция `H3`)

| - | - |
|----------------|-------------------------------------------------------|
| `{.primary}` | Красные заголовки, [Пример](#primary-card)|
| `{.secondary}` | Желтые заголовки, [Пример](#secondary-card) |

Полный пример: [Пример карточек](#cards-example)




### .col-span-2 {.row-span-2}

#### Пятая карта занимает два столбца.

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 4 ┆ ┆ 5 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯

-----------

1

2

3

4

5


#### Вторая карта охватывает два столбца.

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 3 ┆ ┆ 4 ┆ ┆ 5 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

-----------

1

2

3

4

5


#### Четвертая карта охватывает два столбца.

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 4 ┆ ┆ 5 ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

-----------

1

2

3

4

5






### .row-span-2 {.row-span-2}

#### Первая карта занимает два ряда.

╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ 4 ┆ ┆ 5 ┆ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

----------

1

2

3

4

5


#### Вторая карта охватывает два ряда.

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 4 ┆ ┆ ┆ ┆ 5 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯

---------

1

2

3

4

5


#### Третья карта охватывает два ряда.

╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ 4 ┆ ┆ 5 ┆ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈╯

-----------

1

2

3

4

5





### .col-span-2 .row-span-2

╭┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 1 ┆ ┆ 2 ┆ ┆ ┆ ╰┈┈┈┈┈┈┈┈┈╯ ┆ ┆ ╭┈┈┈┈┈┈┈┈┈╮ ┆ ┆ ┆ 3 ┆ ╰┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ╭┈┈┈┈┈┈┈┈┈╮ ┆ 4 ┆ ┆ 5 ┆ ┆ 6 ┆ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯ ╰┈┈┈┈┈┈┈┈┈╯


#### ↓ Исходный код

1

2

3

4

5

Одновременно охватывает строки и столбцы




Варианты таблиц
--------------------

### Обзор таблиц {.secondary}

| - | - |
|------------------|------------------------------|
| `{.show-header}` | Показать заголовок таблицы |
| `{.shortcuts}` | Отображать стиль клавиш быстрого доступа |
| `{.bold-first}` | Выделить полужирным первый столбец |
| `{.plus-first}` | Плюс первый столбец |
| `{.show-header}` | Показать заголовки |
| `{.left-text}` | Выравнивание последней колонки по левому краю |
| `{.no-wrap}` | Не оборачивать текст |




### Основная таблица

| Шаблон | Описание |
|----------|------------------------|
| `[abc]` | Искать a, b или c |
| `[^abc]` | Искать кроме a, b или c |
| `[a-z]` | Искать от a до z |

#### ↓ Исходный код
Шаблон Описание
[abc] Искать a, b или c
[^abc] Искать кроме a, b или c
[a-z] Искать от a до z 




### .shortcuts

| - | - |
|-------------|------------|
| `Ctrl` `N` | Новый файл |
| `Ctrl` `S` | Сохранить |
{.shortcuts}

#### ↓ Исходный код
- -
Ctrl N Новый файл
Ctrl S Сохранить
{.shortcuts} 




### .show-header

| Шаблон | Описание |
|----------|------------------------|
| `[abc]` | Искать a, b или c |
| `[^abc]` | Искать кроме a, b или c |
| `[a-z]` | Искать от a до z |
{.show-header}

#### ↓ Исходный код
Pattern Description
[abc] Искать a, b или c
[^abc] Искать кроме a, b или c
[a-z] Искать от a до z
{.show-header} 




### .left-text

| Шаблон | Описание |
|----------|------------------------|
| `[abc]` | Искать a, b или c |
| `[^abc]` | Искать кроме a, b или c |
| `[a-z]` | Искать от a до z |
{.left-text}

#### ↓ Исходный код
Pattern Description
[abc] Искать a, b или c
[^abc] Искать кроме a, b или c
[a-z] Искать от a до z
{.left-text} 




### .bold-first

| Шаблон | Описание |
|----------|------------------------|
| `[abc]` | Искать a, b или c |
| `[^abc]` | Искать кроме a, b или c |
| `[a-z]` | Искать от a до z |
{.bold-first}

#### ↓ Исходный код
Pattern Description
[abc] Искать a, b или c
[^abc] Искать кроме a, b или c
[a-z] Искать от a до z
{.bold-first} 




Варианты списка
--------------------

### Обзор списка {.secondary}
Колонки списка

| - | - |
|-------------|------------------------|
| `{.cols-1}` | один столбец _(по умолчанию)_ |
| `{.cols-2}` | два столбца |
| ...         | |
| `{.cols-6}` | | ...

Маркеры списка

| - | - |
|------------|------------------------|
| `{.marker-none}` | Маркер не установлен |
| `{.marker-timeline}` | Стиль маркера как у временной шкалы |
| `{.marker-round}` | Круглый маркер |




### Один столбец (по умолчанию)
- Поделиться краткой справкой.
- шпаргалка для разработчиков.
- Предоставляется ангелами открытого кода.
- Управление фрагментами кода.

#### ↓ Исходный код
  • Обмен быстрыми ссылками.
  • шпаргалка для разработчиков.
  • Предоставлена ангелами открытого кода.
  • Управление фрагментами кода.




### .cols-3
- Поделиться
- Быстрый
- Ссылка
- и
- Шпаргалка
- Для
- Разработчики
  {.cols-3}

#### ↓ Исходный код
  • Поделиться
  • Быстрый
  • Ссылка
  • и
  • Шпаргалка
  • Для
  • Разработчики {.cols-3}




### .marker-timeline {.row-span-2}
- **Переименование** в `new_name`
    ``Шелл-скрипт
    $ git branch -m <new_name>
    ```
- **Толкаем** и сбрасываем
    ```
    $ git push origin -u <new_name>
    ```
- **Удаление** удаленной ветки
    ```
    $ git push origin --delete <old>
    ```
{.marker-timeline}

#### ↓ Исходный код
  • Переименовано в new_name. ``шелл-скрипт $ git branch -m <new_name>
  • Толкаем и сбрасываем 
    $ git push origin -u <new_name>
  • Удаление удаленной ветки 
    $ git push origin --delete <old>

{.marker-timeline}





### .marker-none
- Поделиться
- Быстрый
- Ссылка
- и
- Шпаргалка
  {.cols-2 .marker-none}

#### ↓ Исходный код
  • Share
  • Быстрый
  • Ссылка
  • и
  • Шпаргалка {.cols-2 .marker-none}




### .marker-round
- Поделиться
- Быстрый
- Ссылка
  {.marker-round}

#### ↓ Исходный код
  • Share
  • Быстрый
  • Ссылка {.marker-round}




Варианты кода
--------------------

### Базовый код

```js
cheatsheets.zip.is(() => {
  awesome.site()
})

here.is.some.more()

↓ Исходный код


```js
cheatsheets.zip.is(() => {
  awesome.site()
})
\```

```js
here.is.some.more()
\```

Блоки кода могут располагаться один за другим.

Код с заголовками

index.js

cheatsheets.zip.is(() => {
    awesome.site()
})

other.js

here.is.some.more()

↓ Исходный код

#### index.js
```js
cheatsheets.zip.is(() => {
    awesome.site()
})
\```
#### other.js
```js
here.is.some.more()
\```

Блоки кода могут иметь заголовки.

Обводка строк

<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>

↓ Исходный код

````js
<script>(function(d,s){if(window.Promise&&[].includes&&Object.assign&&window.Map)return;var js,sc=d.getElementsByTagName(s)[0];js=d.createElement(s);js.src='https://cdn.polyfill.io/v2/polyfill.min.js';sc.parentNode.insertBefore(js, sc);}(document,'script'))</script>
\```

Добавьте {.wrap} для обертывания длинных строк.

Длинные строки (по умолчанию)

function createNode(nodeName: string, options: { key: string }) {
  return true
}

Длинные строки будут иметь полосы прокрутки.

Варианты абзацев

Заголовочные абзацы

Текст, который отображается в заголовке

↓ Исходный код

### Основные абзацы
Текст, отображаемый в заголовке

Средние абзацы

  • Это список

Этот абзац появится в середине

cheatsheets.is(() => {
  awesome.site()
})

↓ Исходный код

### Средние абзацы

- Это список

Этот абзац появится в середине

```js
cheatsheets.is(() => {
  awesome.site()
})
\```

Абзацы нижнего колонтитула

cheatsheets.is(() => {
  awesome.site()
})

↓ Исходный код

```js
cheatsheets.is(() => {
  awesome.site()
})
\```

Этот абзац появится в нижнем колонтитуле

Этот абзац появится в нижнем колонтитуле

Перекрестная ссылка

Добавьте {.link-arrow} для создания больших громких внешних ссылок:

[Home](/) {.link-arrow}

Home {.link-arrow}

Пример карточек

row-span-2

1

col-span-2

2

Первичная карта

3

Добавьте {.primary}, чтобы сделать заголовок красным.

Вторичная карта

4

Добавьте {.secondary}, чтобы сделать заголовок желтым.

col-span-3

5