# GITPITCH
## Руководство для пользователя
GitPitch - это современное решение для разработчиков. Используя инструменты Markdown + Git, вы можете легко представить концепцию, дизайн, структуру, продукт, услугу,учебные материалы или любую другую документацию в виде презентации.
# Создай свою первую презентацию за 60 СЕКУНД
Для начала следует завести (если его ещё нет), аккаунт на GitHub, GitLab или Bitbucket. После этого рекомендуется изучить краткое руководство по созданию первого документа в Gitpich.
GitPitch представляет новое соглашение для всех пользователей GitHub , соглашение PITCHME.md.
Это новое соглашение автоматически превращает любой файл PITCHME.md, найденный в репозитории GitHub, в современный и гибкий набор слайдов, который автоматически доступен для совместного использования и представления непосредственно на gitpitch.com.
# Шаг 1. Создайте репозиторий
Создайте разветвление этого хранилища. Создание этого репозитория даст вам видеть новый in-60-seconds репозиторий под вашей собственной учетной записью GitHub. В вашем новом репозитории вы найдете базовую структуру файлов для презентации слайд-шоу GitPitch:
.
├── PITCHME.md
├── PITCHME.yaml
└── assets
├── css
│ └── PITCHME.css
└── img
└── *.png, jpg, gif
Для создания презентации слайд-шоу GitPitch требуется только один файл - PITCHME.md. Это файл, в который вы добавляете содержание для ваших слайдов. Дополнительные файлы, такие как PITCHME.yaml и PITCHME.css, могут быть добавлены для активации пользовательских настроек и стилей для вашего слайд-документа.
# Шаг 2. Создание вашей первой презентации GitPitch Slideshow.
После разветвления хранилища в вашем новом хранилище будет найден файл разметки PITCHME.md. Это означает, что ваш первый набор слайдов GitPitch доступен по следующему URL:
https://gitpitch.com/$USER/in-60-seconds
Вы должны заменить имя своей учетной записи GitHub$USER в приведенном выше URL-адресе слайд-шоу.
Когда вы откроете URL-адрес, вы должны увидеть первый пример слайда, который должен выглядеть примерно так:
# Подробнее о файле PITCHME.md
- Имя файла PITCHME.md - это новое соглашение, введенное GitPitch
- Имя файла PITCHME.md чувствительно к регистру
- PITCHME.md содержимое файла является стандартным для Markdown
- `---` Данный фрагмент действует как слайд-разделитель, который делит вашу презентацию на слайды.
# Внутри файла PITCHME.md
Образец PITCHME.md в этом репозитории автоматически отображается как набор всего с 5 слайдами. Каждый слайд представляет важные новые концепции, демонстрируя при этом простоту и мощь GitHub Flavored Markdown в сочетании с GitPitch Markdown Shortcuts + Widgets.
## Образец слайда № 1
Фрагмент Markdown первого слайда в презентации показан здесь:
```
# Let's Get Started
```
Этот фрагмент Markdown выглядит следующим образом:
На слайде используется стандартный синтаксис заголовка Markdown для отображения текста на слайде, где текст автоматически центрируется.
## Образец слайда № 2
Фрагмент Markdown для второго слайда в презентации показан здесь:
```
## Add Some Slide Candy
```
Этот фрагмент Markdown выглядит следующим образом:
Этот образец слайда представляет первое использование разделителя слайдов. Разделители слайдов используются для обозначения начальной точки каждого нового слайда в презентации. Этот образец слайда также демонстрирует смесь текста и изображения, отображаемого на слайде. Опять же, здесь используется только стандартный синтаксис Markdown.
Мы также видим первое использование относительного пути к файлу репозитория assets/img/presentation.png - для визуализации содержимого этого файла на слайде. Файлы PITCHME.md могут ссылаться на исходный код, текст, изображения и даже видеофайлы в репозитории и видеть содержимое этих файлов, отображаемых на любом слайде.
## Образец слайда № 3
Фрагмент Markdown для третьего слайда в презентации показан здесь:
```
---?color=linear-gradient(180deg, white 75%, black 25%)
@snap[west span-50]
## Customize the Layout
@snapend
@snap[east span-50]
@snapend
@snap[south span-100 text-white]
Snap Layouts let you create custom slide designs directly within your markdown.
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Большинство инструментов и сервисов презентаций с Markdown практически не контролируют размещение контента на слайдах. Но GitPitch дает вам полный контроль над макетом слайд-контента. Такая же гибкость, которой вы, возможно, пользовались при работе со старомодными инструментами перетаскивания, такими как Powerpoint и Keynote, но теперь при помощи Markdown. Функция создания макетов позволяет создавать уникальные дизайны слайдов, которые соответствуют вашим конкретным потребностям.
Если вы внимательно посмотрите на пример фрагмента Markdown для этого слайда, то увидите, что синатксис тега @snap, представленный компоновками, просто оборачивает блоки стандартного содержимого слайда Markdown.
## Образец слайда № 4
Фрагмент Markdown для четвертого слайда в презентации показан здесь:
```
---?color=linear-gradient(90deg, #E27924 65%, white 35%)
@snap[north-west h4-white]
#### And start presenting...
@snapend
@snap[west span-55]
@ul[spaced text-white]
- You will be amazed
- What you can achieve
- *With a little imagination...*
- And **GitPitch Markdown**
@ulend
@snapend
@snap[east span-45]
@img[shadow](assets/img/conference.png)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Этот пример слайда демонстрирует ряд замечательных функций. Cосредоточимся на том, что нового на этом слайде. Давайте сначала посмотрим на разделитель слайдов для этого примера, он выглядит следующим образом:
```
---?color=linear-gradient(90deg, #E27924 65%, white 35%)
```
Как отмечалось ранее, разделители слайдов используются для обозначения начальной точки каждого нового слайда в презентации. Но их также можно использовать для активации целого ряда специфичных для слайдов функций. В этом примере мы используем синтаксис разделителя цвета, чтобы назначить собственный градиент цвета фона для нашего образца слайда. Это только верхушка айсберга, поскольку разделители можно использовать для рендеринга фоновых изображений, видео, цвета, градиентов и даже исходного кода на слайдах.
Помимо разделителей, этот пример слайда также демонстрирует использование чрезвычайно популярной функции GitPitch, известной как Markdown Fragments. Фрагменты можно использовать для отображения отдельных элементов на слайде по очереди в отличие от раскрытия всех элементов на слайде одновременно. В этом случае мы раскрываем элементы списка. Но фрагменты могут быть применены практически к любому контенту на ваших слайдах.
## Образец слайда № 5
Фрагмент Markdown для пятого слайда в презентации показан здесь:
```
---?image=assets/img/presenter.jpg
@snap[north span-100 h2-white]
## Now It's Your Turn
@snapend
@snap[south span-100 text-06]
[Click here to jump straight into the interactive feature guides in the GitPitch Docs @fa[external-link]](https://gitpitch.com/docs/getting-started/tutorial/)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Предыдущий пример слайда познакомил нас с мощью и гибкостью разделителей слайдов. Этот слайд демонстрирует использование синтаксиса разделителя фонового изображения, который можно использовать для вставки изображения в качестве фона для любого слайда. Дополнительные параметры этого разделителя изображений можно использовать для позиционирования, размера, масштаба и даже управления непрозрачностью (только для профессионалов), чтобы вы могли создавать необходимые фоновые эффекты.
Опять же, если вы внимательно посмотрите на пример фрагмента Markdown для этого слайда, то увидите, что синтаксис тега `@snap`, представленный в макетах привязок, использует ряд пользовательских стилей CSS, таких как `span-100` и, `h2-white` для управления внешним видом содержимого, отображаемого на слайде. Как автору презентации, эти функции дают вам практически неограниченную гибкость в создании набора слайдов, которые действительно отражают ваш продукт или бренд.
# Настройка внешнего вида презентации PITCHME.MD
## Конвенция README.md
Если вы когда-либо работали с Git на GitHub, GitLab или Bitbucket - вы, вероятно, уже знакомы с соглашением README.md. Это соглашение автоматически превращает любой файл README.md, найденный в репозитории Git, в красиво оформленную документацию.
Это соглашение предоставляет разработчикам простой и удобный способ документировать любой проект.
## Конвенция PITCHME.md
GitPitch представляет совершенно новое соглашение для всех пользователей Git, соглашение PITCHME.md. Это соглашение автоматически превращает любой файл PITCHME.md, найденный в репозитории Git, в красивую презентацию слайд-шоу.
Это соглашение предоставляет разработчикам простой и удобный способ продвижения, презентации или презентации абсолютно чего угодно.
# РАЗДЕЛИТЕЛИ СЛАЙДОВ
Содержимое презентациb GitPitch создается с использованием Markdown. Чтобы разделить содержание Markdown на серию слайдов, следует использовать специальный синтаксис разделителя слайдов. Каждый разделитель обозначает начало нового слайда.
Чтобы создать новый слайд, используйте следующий синтаксис в файле PITCHME.md:
```
---
```
Поскольку GitPitch поддерживает как горизонтальные (по умолчанию), так и вертикальные слайды, каждый из них имеет свой уникальный синтаксис разделителя. Чтобы создать новый вертикальный слайд, используйте следующий синтаксис в файле PITCHME.md:
```
+++
```
Используя комбинацию горизонтальных и вертикальных разделителей слайдов, вы можете настроить восприятие аудитории и навигацию по контенту в своей презентации.
Обычно горизонтальные слайды представляют информацию верхнего уровня. Вертикальные слайды затем используются для детализации.
## Пример использования
Очень простая презентация слайдов PITCHME.md с двумя слайдами может быть создана следующим образом:
```
## Hello, World!
---
## The End :)
```
Обратите внимание, что разделитель для первого слайда в каждой презентации неявный. Таким образом, в приведенном выше примере необходим только один явный разделитель слайдов.
Вот простая презентация PITCHME.md из четырех слайдов, в которой используются как горизонтальные, так и вертикальные слайды:
```
## Hello!
+++
## Hola!
---
## Goodbye!
+++
## Adiós!
```
# ОСНОВЫ MARKDOWN
GitHub Flavored Markdown - это основной инструмент для создания содержимого слайдов в PITCHME.md. Это тот же инструмент, который вы используете в качестве разработчика для создания проектов README или вики для репозиториев Git.
Руководство по мастерингу Markdown - хороший ресурс для изучения или обновления базового использования расширений Markdown и GitHub Flavored Markdown (GFM).
Используйте разделители слайдов в файле PITCHME.md, чтобы разделить содержание Markdown на разные слайды.
Слайды презентации GitPitch могут отображать широкий спектр различных типов контента, включая форматированный текст Markdown, заголовки, цитаты, ссылки, списки, таблицы, изображения, а также код, видео, математические формулы и многое другое.
Помимо стандартной поддержки синтаксиса Markdown, GitPitch поддерживают синтаксис Markdown Labels и визуальные Markdown-виджеты **!!!ссылки**, которые позволяют создавать великолепные дизайны слайдов.
# URL ПРЕЗЕНТАЦИИ
Авторы презентаций могут публиковать и делиться презентациями в виде слайд-шоу из публичных и частных репозиториев на GitHub, GitLab и Bitbucket. Каждая презентация имеет свой уникальный URL.
По умолчанию GitPitch рассматривает GitHub в качестве службы репозитория git, известной как GRS.
Если вы хотите просмотреть или поделиться URL-адресом своей презентации, опубликованной из репозитория GitLab или Bitbucket, вам необходимо указать GRS в URL-адресе презентации. Как это сделать, описано далее.
## URL презентация GitHub (по умолчанию)
URL-адрес для презентации, опубликованной на GitHub, определяется следующим образом:
### https://gitpitch.com/$user/$repo/$branch
Замените имя своей учетной записи Git, репозиторий и ветвь соответственно на $ user, $ repo и $ branch.
## URL презентация GitLab
URL-адрес для презентации, опубликованной на GitLab, определяется следующим образом:
### https://gitpitch.com/$user/$repo/$branch?grs=gitlab
Замените имя своей учетной записи Git, репозиторий и ветвь соответственно на $ user, $ repo и $ branch.
## URL-адреса слайд-шоу Bitbucket
URL-адреc для презентации, опубликованной в Bitbucket, определяется следующим образом:
### https://gitpitch.com/$user/$repo/$branch?grs=bitbucket
Замените имя своей учетной записи Git, репозиторий и ветвь соответственно на $ user, $ repo и $ branch.
## Расширенные URL презентации
Каждый из URL-адресов презентации, указанных выше, можно использовать для обращения к презентации по умолчанию в пределах указанной ветви и репозитория. Но GitPitch также поддерживает публикацию нескольких презентаций в пределах одной ветви. Это требует дальнейшей настройки URL презентации.
## Неограниченное количество презентаций
### Работа со слайд-шоу по умолчанию в ветке
PITCHME.md находится в корневом каталоге любого филиала известном как презентация по умолчанию. Соответствующая структура каталогов и файлы внутри ветви для презентации слайд-шоу по умолчанию:
```
.
├── PITCHME.md
├── PITCHME.yaml
```
PITCHME.yaml файл свойств не является обязательным. Когда он присутствует, его можно использовать для активации пользовательских настроек для презентации.
Презентация по умолчанию будет доступна по следующему адресу:
Где вы должны заменить соответствующее имя учетной записи Git, репозиторий и ветвь соответственно на $ user, $ repo и $ branch.
### Работа с дополнительными презентациями в филиале
Нет ограничений на количество презентаций, которые вы можете создать в одной ветке в Git-репозитории. Все презентации, найденные в подкаталоге ниже корневого в ветви, доступны по следующему URL:
Значение $ directory должно указывать путь к каталогу внутри ветви, содержащей файл Markdown PITCHME.md.
## Пример: URL презентации-конференции
Предполагая, что ветка имеет следующую структуру каталогов и файлов:
```
.
├── PITCHME.md
├── PITCHME.yaml
│
├── conference
│ └── PITCHME.md
```
URL презентации-конференции создается следующим образом:
## Пример: URL презентации в Нью-Йорке
Предполагая, что ветка имеет следующую структуру каталогов и файлов:
```
.
├── PITCHME.md
├── PITCHME.yaml
│
├── conference
│ └── PITCHME.md
│
├── meetups
| |
│ ├── newyork
│ │ ├── PITCHME.md
| |
│ ├── berlin
│ │ ├── PITCHME.md
│ │ ├── PITCHME.yaml
| |
│ ├── tokyo
│ │ ├── PITCHME.md
│ │ ├── PITCHME.yaml
```
URL-презентация Нью-Йорк Meetup создается следующим образом:
# Общие ресурсы презентации
Подход с одной ветвью позволяет повторно использовать широкий спектр ресурсов вашего слайд-шоу в нескольких презентациях. Эти активы могут включать изображения, пользовательские логотипы, фоны слайдов и даже пользовательские CSS.
Совместное использование активов в нескольких презентациях в рамках одной ветви упрощает управление активами и позволяет избежать ненужного дублирования. Это также отличный способ создать единообразный внешний вид в серии связанных слайд-шоу презентаций.
# Модульный Markdown
Разработчики привыкли писать код по модульному принципу. Модульность достигается за счет использования различных функций, файлов и каталогов для значительного разделения кода. Этот подход обычно улучшает ясность кода и помогает модификациям и обслуживанию с течением времени.
GitPitch поддерживает этот же модульный подход для разметки презентации и связанных ресурсов изображений, настроек и пользовательских CSS.
### Рассмотрим пример:
Этот фрагмент разметки Markdown PITCHME.md:
```
## Modular Markdown Demo
---?include=meetup/intro/PITCHME.md
---?include=meetup/topics/PITCHME.md
---?include=meetup/call-to-action/PITCHME.md
```
Результаты в презентации, которая включает в себя следующие слайды:
* Каждый слайд, определенный в файле PITCHME.md верхнего уровня, плюс
* Каждый слайд определен во вступлении, темах и файлах разметки призыва к действию.
Любые включенные файлы Markdown могут содержать неограниченное количество слайдов с использованием стандартных разделителей слайдов и полных функций GitPitch.
## Модульный Markdown разделитель include
Разделитель include используется для импорта модульного содержимого markdown в PITCHME.MD верхнего уровня для данной презентации. Разделитель принимает относительный путь к любому файлу Markdown, найденному в вашем репозитории. Пути должны быть относительно корневого каталога репозитория.
```
---?include=path/to/topic/PITCHME.md
```
Разделитель include может быть использован только в верхнем уровне pitchme.md для данной презентации. Любой включенный файл markdown не может сам использовать разделитель include для включения дополнительных файлов.
## Пример: модульная учебная презентация HTML5
В следующем примере демонстрируется модульный подход к предоставлению учебных материалов для введения в HTML5. Структура файлов и каталогов распознает модульный характер содержания курса.
Давайте предположим, что наш учебный курс по HTML5 представляет собой введение в ключевые технологии HTML5: HTML, CSS и JavaScript. Мы можем использовать следующую структуру каталогов и файлов для содержимого слайд-шоу в репозитории:
```
.
├── PITCHME.md
|
├── PITCHME.yaml
|
├── common
│ ├── about
│ │ └── PITCHME.md
│ └── contact
│ └── PITCHME.md
|
└── training
|
└── topics
|
├── css
| |
│ ├── PITCHME.md
| |
│ ├── selectors
│ │ └── PITCHME.md
| |
│ └── syntax
│ └── PITCHME.md
|
├── html
| |
│ ├── PITCHME.md
| |
│ ├── attributes
│ │ └── PITCHME.md
| |
│ └── tags
│ └── PITCHME.md
|
└── js
|
├── PITCHME.md
|
├── callbacks
│ └── PITCHME.md
└── objects
└── PITCHME.md
```
Принятие этого модульного подхода при управлении содержимым презентации обеспечивает все преимущества, обычно связанные с модульным дизайном: повышенную ясность, большую согласованность и упрощенное обслуживание.
Этот модульный подход к управлению и поддержке содержания презентации также идеально подходит для предоставления модульных слайд-шоу.
## Пример: модульное локализованное содержание слайд-шоу
В следующем примере демонстрируется модульный подход к доставке локализованного содержимого слайд-шоу для доставки одного набора слайдов на нескольких языках. Структура файлов и каталогов использует преимущества модульной языковой специфики и языкового контента презентации.
Предположим, что наша цель - создать набор слайдов, который может поставляться на английском, испанском, французском и японском языках. Мы можем использовать следующую структуру каталогов и файлов для нашего содержимого слайд-шоу в репозитории:
```
.
├── PITCHME.yaml
|
├── assets
|
│ ├── css
│ │ └── PITCHME.css
| |
│ └── img
│ ├── humor.gif
│ ├── logo.png
│ └── overview.jpg
|
└── slides
|
├── en
│ └── PITCHME.md
|
├── es
│ └── PITCHME.md
|
├── fr
│ └── PITCHME.md
|
├── jp
│ └── PITCHME.md
|
└── shared
|
├── architecture.md
├── contact.md
└── thank-you.md
```
Применение этого модульного подхода к управлению содержимым слайд-шоу обеспечивает все преимущества, обычно связанные с модульным проектированием: улучшенную четкость, большую согласованность и упрощенное обслуживание.
В этом примере каждый набор языковых слайдов поддерживается в четко дифференцированных языковых каталогах:
```
└── slides
|
├── en
│ └── PITCHME.md
├── es
│ └── PITCHME.md
├── fr
│ └── PITCHME.md
└── jp
└── PITCHME.md
```
В то время как независимые от языка слайды и общие ресурсы, такие как изображения, настройки и даже пользовательский css, поддерживаются независимо следующим образом:
```
.
├── PITCHME.yaml
|
├── assets
|
│ ├── css
│ │ └── PITCHME.css
| |
│ └── img
│ ├── humor.gif
│ ├── logo.png
│ └── overview.jpg
|
└── slides
|
└── shared
|
├── architecture.md
├── contact.md
└── thank-you.md
```
Чтобы представить это слайд-шоу для определенного языка, просто определите выбранный язык [en, es, fr, jp] в качестве параметра запроса в URL-адресе слайд-шоу. Например, чтобы представить на французском языке:
https://gitpitch.com/acmecorp/demo?p=slides/fr
Чтобы представить ту же слайд-шоу презентацию на японском языке:
https://gitpitch.com/acmecorp/demo?p=slides/jp
## Пример: содержание слайд-шоу для конкретной аудитории
Модульный подход, продемонстрированный в приведенном выше примере «Локализованное содержимое слайд-шоу», может быть использован для предоставления всех видов набора слайдов, которые необходимы для предоставления пользовательских вариаций содержимого слайдов для конкретной аудитории.
Например, этот же подход можно использовать для создания набора слайдов, в которой представлен API. Вместо того, чтобы использовать специфичные для испанского, французского и японского слайды, этот же модульный подход можно использовать для предоставления специфичных для Java, Elixir и Go слайдов для одного и того же API.
Чтобы представить это слайд-шоу для определенной аудитории языка программирования, просто определите выбранный язык [java, elixir, go] в качестве параметра запроса в URL-адресе слайд-шоу. Например, чтобы выступить на конференции или встрече в Elixir:
https://gitpitch.com/acmecorp/api?p=slides/elixir
# Модульные презентации
Модульные презентации - это те, которые построены с использованием модульного Markdown, что позволяет публиковать мини-деки. Каждая мини-дека представляет собой набор слайдов, найденных в основной презентации. Мини-деками можно делиться независимо с любой аудиторией.
Эта функция особенно полезна, когда вы разрабатываете презентацию для курсов и учебных материалов. Модульные презентации позволяют разрабатывать полный контент курса, который может делиться общими слайдами, ресурсами и стилями. А затем представьте свой курс аудитории в виде серии тематических мини-деков.
## Пример: повторное посещение учебной презентации HTML5
Руководство по модульному Markdown продемонстрировало, как модульный подход может использоваться для доставки учебных материалов с использованием примера курса - Введение в HTML5. Вот файл репозитория и структура каталогов для этого примера:
```
.
├── PITCHME.md
|
├── PITCHME.yaml
|
├── common
│ ├── about
│ │ └── PITCHME.md
│ └── contact
│ └── PITCHME.md
|
└── training
|
└── topics
|
├── css
| |
│ ├── PITCHME.md
| |
│ ├── selectors
│ │ └── PITCHME.md
| |
│ └── syntax
│ └── PITCHME.md
|
├── html
| |
│ ├── PITCHME.md
| |
│ ├── attributes
│ │ └── PITCHME.md
| |
│ └── tags
│ └── PITCHME.md
|
└── js
|
├── PITCHME.md
|
├── callbacks
│ └── PITCHME.md
└── objects
└── PITCHME.md
```
Приведенная выше структура файлов и каталогов распознает модульную природу - HTML , CSS и JavaScript - природу содержания курса Введение в HTML5.
Основная презентация, представленная контентом в этом репозитории, предоставляет полный набор контента по всем темам, охватываемым примером курса HTML5. Основная презентация может быть предоставлена по следующему (фиктивному) URL-адресу презентации:
https://gitpitch.com/acmecorp/html5
Приведенный ниже пример демонстрирует, как мини-деки могут быть доставлены с нулевыми изменениями к основному контенту.
## Пример: HTML5 обучающие мини-презентации
В следующем примере используется преимущество существующего содержимого в примере «Введение в репозиторий HTML5» для предоставления мини-деков для отдельных глав. Эти мини-деки могут быть использованы для упрощения доставки материалов учебного курса.
Следующая схема показывает каталог добавления новой главы конкретных файлов Markdown PITCHME.md:
```
.
├── PITCHME.md
|
├── PITCHME.yaml
|
├── chapter
| |
| ├── css
| │ └── PITCHME.md
| |
| ├── html
| │ └── PITCHME.md
| |
| └── topics
| └── PITCHME.md
|
└── training
|
└── ...
```
Добавление нового содержания главы PITCHME.md позволяет нам повторно использовать существующее содержание Markdown для каждой темы и поставлять отдельные мини-деки для HTML, CSS и JavaScript.
Содержимое нового файла разметки Markdown chapter / css /PITCHME.md может выглядеть следующим образом:
```
---?include=course/common/greeting/PITCHME.md
---?include=course/topics/css/PITCHME.md
---?include=course/topics/css/selectors/PITCHME.md
---?include=course/topics/css/syntax/PITCHME.md
---?include=course/common/contact-me/PITCHME.md
```
Как вы можете видеть выше, содержимое нашей новой мини-презентации CSS-глав создается исключительно путем повторного использования существующего содержимого презентации, найденного в репозитории. Нет дублирования файлов, ресурсов или стилей.
Чтобы представить эту новую мини-деку для CSS-главы, просто определите главу как параметр запроса на стандартном URL-адресе слайд-шоу, например (вымышленный):
```
https://gitpitch.com/acmecorp/html5?p=chapter/css
```
Точно такой же подход можно использовать и для создания мини-деков для глав HTML и JavaScript.
## Пример: демонстрационная презентация GitPitch
Презентация GitPitch Demo обеспечивает реальный пример модульного слайд-шоу. Обзор файла репозитория и структуры каталогов для демонстрационной презентации показан здесь:
```
├── PITCHME.md
├── PITCHME.yaml
├── assets
│ ├── css
│ │ └── PITCHME.css
│ └── img
│ ├── audience.png
│ ├── flowers.png
│ ├── logo.png
│ ├── world.png
│ └── ...
├── deck
│ ├── code-magic
│ │ └── PITCHME.md
│ ├── hello-world
│ │ └── PITCHME.md
│ ├── image-magic
│ │ └── PITCHME.md
│ ├── markdown-magic
│ │ └── PITCHME.md
│ └── media-magic
│ └── PITCHME.md
└── src
├── css
│ └── sample.css
├── go
│ └── sample.go
├── http
│ └── sample.http
├── php
│ └── sample.php
├── sql
│ └── sample.sql
└── uml
└── sequence.puml
```
Основная презентация Demo Deck находится по следующему URL-адресу слайд-шоу:
https://gitpitch.com/gitpitch/demo-deck
Тем не менее, демонстрационная презентация сгруппировала связанные дизайны слайдов в подкатегории. А дизайны слайдов для каждой подкатегории предоставляются в собственных файлах разметки PITCHME.md.
Одним из следствий этого модульного дизайна демонстрационной деки является то, что каждая подкатегория может открываться и просматриваться как отдельная презентация в виде слайд-шоу или мини-дека.
Например, чтобы представить проекты image-magic как независимую мини-презентацию, просто определите категорию image-magic как параметр запроса на стандартном URL слайд-шоу, например:
https://gitpitch.com/gitpitch/demo-deck?p=deck/image-magic
Этот же подход может быть использован для представления любой из подкатегорий в качестве самостоятельного мини-дека.
# МЕНЮ ПРЕЗЕНТАЦИИ
Каждая презентация делает доступным МЕНЮ в нижнем левом углу каждого слайда. Меню обеспечивает доступ к следующим функциям презентации:
* Презентация в оффлайне
* PDF-презентация
* Переключатель тем
* Оглавление
На следующем снимке экрана показано расположение меню в презентации:
На следующем снимке экрана показан расширенный вид всех панелей, которые находятся в меню презентации:
# ONLINE-ПРЕЗЕНТАЦИИ
Просто вставьте содержимое презентации - Markdown и ресурсы - в любую ветку в общедоступном репозитории на GitHub, GitLab или Bitbucket и GitPitch, и вы сразу же сможете найти свою презентацию в Интернете по следующему URL-адресу:
Замените имя своей учетной записи GitHub, репозиторий и ветвь соответственно на $ user, $ repo и $ branch. Для пользователей GitLab и Bitbucket.
# OFFLINE-ПРЕЗЕНТАЦИИ
## GitPitch Desktop Поддержка в автономном режиме
Если вы планируете работать в автономном режиме, мы рекомендуем также скачать GitPitch Docs. Чтобы загрузить пакет документов, нажмите [https://gitpitch.com/docs.zip](https://) Затем разверните пакет zip и откройте index.html под локальным веб-сервером.
Подписки GitPitch Pro + Lite открывают множество функций, в том числе GitPitch Desktop - специализированный инструмент для презентаций, который позволяет разрабатывать, просматривать и представлять презентации GitPitch непосредственно на рабочем столе Linux, Windows или OSX.
[https://youtu.be/aQjKLKg6jFw](https://)
Этот инструмент поддерживает быстрое создание слайдов. Он также разработан специально для работы и представления в автономном режиме, что поможет защитить вас от проблем с Wi-Fi на конференциях например.
(GitPitch Desktop поддерживает также автономный потоковый MP4 и WebM-видео прямо на вашем рабочем столе.)
Загрузка презентации в автономном режиме одним нажатием
GitPitch также поддерживает загрузку в один клик автономных комплектов слайд-шоу для презентаций, опубликованных на gitpitch.com. Эта функция доступна всем.
Просто нажмите «Автономная версия» (.zip) на домашней панели в меню слайд-шоу, чтобы загрузить автономный пакет.
Пакет представляет собой ZIP-архив. После загрузки вам нужно будет развернуть файл архива на диске.
Чтобы запустить слайд-шоу, вам нужно открыть файл index.html на локальном веб-сервере на вашем рабочем столе.
Например, если у вас установлен Python 2 на локальном рабочем столе, вы можете перейти в каталог верхнего уровня в расширенном zip-архиве и запустить простой веб-сервер следующим образом:
Кроме того, если у вас установлен Python 3 в локальной системе, вы можете запустить простой веб-сервер следующим образом:
Вы не ограничены веб-серверами на основе Python. Вы можете использовать любой локальный веб-сервер для показа презентации. Если вы не уверены, какой веб-сервер использовать, этот полезный веб-сервер [https://gist.github.com/willurd/5720255](https://) предоставляет широкий выбор простых в использовании веб-серверов.
После запуска веб-сервера вы можете открыть презентацию GitPitch в своем браузере следующим образом:
Поскольку слайды видео зависят от потоковой передачи через Интернет, они автоматически отключаются для презентаций в автономном режиме, если вы не используете GitPitch Desktop.
# PDF-ПРЕЗЕНТАЦИИ
## Офлайн-печать
Подписчики GitPitch наслаждаются GitPitch Desktop. Ведь это специальный инструмент для настольных презентаций, который позволяет вам разрабатывать, просматривать и представлять слайд-деки в автономном режиме.
На рабочем столе нажмите клавишу D на клавиатуре при просмотре любой слайд-панели, чтобы открыть Генератор документов на рабочем столе. Одним щелчком мыши вы можете экспортировать презентацию в виде документа PDF.
Ваш PDF- документ - это очень переносимый документ, которым можно поделиться абсолютно где угодно. Он также может быть опубликован в Интернете на LinkedIn SlideShare .
## Онлайн печать
GitPitch поддерживает создание PDF в один клик для любой презентации, опубликованной на gitpitch.com.
Просто нажмите Версия для печати (.pdf) на Домашней панели в меню презентации, чтобы создать и загрузить ее версию в формате PDF.
Создание PDF может быть медленным процессом, пожалуйста, подождите достаточно времени для завершения загрузки.
# PDF FAQ
> Почему некоторые из моих изображений не отображаются в сгенерированном PDF?
Если вы распечатываете презентацию в формате PDF и некоторые изображения, используемые на ваших слайдах, не отображаются в сгенерированном PDF-выводе, это неизменно происходит из-за того, что изображения выходят за края слайдов.
Переполнение часто происходит, когда есть несоответствие в соотношении сторон изображения и соотношении сторон набора слайдов. Например, высокое, но узкое изображение может легко переполнить широкий, но короткий слайд.
Наиболее надежным решением является обработка проблемных изображений в качестве фоновых изображений, а затем использование масштабирования фоновых изображений. Например, предположим, что следующий фрагмент Markdown приводит к слайду, который не может правильно отображаться как PDF из-за переполнения изображения:
```
# Slide Title
```
Рекомендуемое решение состоит из двух простых шагов:
Сначала преобразуйте проблемное встроенное изображение в фоновое изображение, например:
```
---?image=assets/img/tall.png
```
Во-вторых, активируйте масштабирование изображения, чтобы оно отображалось в пределах пространства, доступного на слайде, например:
```
---?image=assets/img/tall.png&size=auto 90%
```
Наконец, если слайд также содержит текстовое содержимое, вы можете воспользоваться синтаксисом Snap-Layouts для отображения текста вместе с новым фоновым изображением, например:
```
---?image=assets/img/tall.png&size=auto 90%
@snap[north-west]
# Slide Title
@snapend
```
# ПРЕЗЕНТАЦИИ PPTX
## Экспорт в Microsoft PowerPoint, Apple Keynote и Google Slides
На рабочем столе нажмите клавишу D на клавиатуре при просмотре любой слайд-панели, чтобы открыть Генератор документов на рабочем столе. Одним щелчком мыши вы можете экспортировать презентацию как документ PPTX.
Ваш документ PPTX представляет собой переносимый документ, который можно открыть непосредственно в Microsoft PowerPoint и Apple Keynote на рабочем столе.
Документация также может быть опубликована в Microsoft Office 365, Apple iCloud и Google Slides.
# УПРАВЛЕНИЕ С КЛАВИАТУРЫ
Презентации GitPitch предлагают многочисленные элементы управления клавиатурой и сочетания клавиш, чтобы помочь авторам презентации и их аудитории в навигации и взаимодействии с содержимым слайд-шоу.
Выступающие в режиме реального времени должны обратить особое внимание на следующие режимы слайд-шоу:
* Нажмите F для полноэкранного режима
* Нажмите O для режима обзора
* Нажмите B для режима затемнения
Нажмите ? Клавишу при просмотре любой презентации для просмотра следующей таблицы сочетаний клавиш:
Помимо навигации с помощью клавиатуры, GitPitch также поддерживает навигацию с помощью колесика мыши и навигацию с дистанционным управлением.
# ОСОБЕННОСТИ КОМПОНОВКИ МАКЕТА
## АВТОМАТИЧЕСКОЕ РАСПОЛОЖЕНИЕ
Когда вы разрабатываете слайд-контент с использованием разметки GitPitch, вы получаете автоматическую разметку этого контента. Политика размещения по умолчанию центрирует контент на ваших слайдах. Однако, если вы когда-нибудь захотите изменить эту политику макета по умолчанию для вашей презентации, вы можете активировать пользовательскую политику макета в вашем PITCHME.yaml.
На следующем снимке экрана показан набор доступных политик автоматической разметки:
Хотя эти политики автоматической разметки являются отличным способом начать работу, GitPitch является уникальным среди решений для презентаций с разметкой Markdown, предлагая поддержку гибких макетов слайдов. Можете считать, что перетаскивание стало возможным непосредственно в вашей презентации с использованием Markdown.
Пример синтаксиса:
```
layout : top-left
```
# Привязка макетов
GitPitch предоставляет Markdown snap-синтаксис компоновки, который может использоваться для создания гибких конструкций слайдов путем управления размещением контента на любом слайде.
Эта функция может использоваться для переопределения автоматической компоновки слайд-шоу для отдельного содержимого на отдельных слайдах. Это дает вам возможность создавать уникальные макеты для вашего контента на любом слайде.
https://www.youtube.com/watch?v=MVd-SxhEPFs
Инструменты представления, такие как Powerpoint и Keynote, поддерживают интерфейсы перетаскивания. При работе с этими инструментами авторы презентаций имеют возможность создания контента слайдов и его размещения.
Создание презентаций с использованием GitPitch включает написание разметки для разработки содержания слайдов. Такой подход позволяет авторам презентаций сосредоточиться на создании контента. По умолчанию размещение содержимого слайда выполняется с помощью автоматической настройки макета слайд-шоу. Но для некоторых сценариев использования метод перетаскивания имеет явное преимущество гибкости в поддержке более масштабных конструкций слайдов.
# Синатксис snap layouts
## Базовый синтаксис Snap Layouts
Чтобы активировать snap layouts моментальных для любого блока вашей презентации в Markdown на слайде, просто оберните блок, открывая теги @snap и закрывая теги @snapend, как показано на снимке экрана выше.
1. Первое свойство на открывающем теге всегда указывает на размещение в сетке слоя.
2. Второе свойство обычно является значением span-xxx для управления шириной и высотой привязанного содержимого.
## Snap Layouts 3x3 Grid
Система Snap-Layouts использует сетку 3x3. Здесь мы видим, как эта сеточная система отображает область слайда. Каждая область сетки представляет собой возможную целевую позицию привязки для привязанного содержимого на слайде. С помощью размеров содержимого snap-layouts вы можете контролировать, какая часть слайда используется для визуализации определенных блоков привязанного содержимого.
## Snap Layouts Позиционирование содержимого
Каждая отдельная область сетки адресована с использованием координат компаса, например, север, юг, восток, запад и т.д. Следующий фрагмент Markdown демонстрирует использование snap-layouts для позиционирования контента в западной области сетки:
```
@snap[west span-50]
### Architecture Diagram
@snapend
```
Чтобы переместить этот образец привязанного контента с западной на северо-восточную позицию на слайде, вам просто нужно обновить свойство snap-position тега открытие @snap следующим образом:
```markdown
@snap[north-east span-50]
### Architecture Diagram
@snapend
```
Полный набор поддерживаемых привязок :
* средняя точка
* к северу
* юг
* восток
* запад
* к северо-востоку
* северо-Запад
* юго-восток
* юго-запад
Обратите внимание, что привязка в средней точке может использоваться для центрирования привязанного содержимого вашего слайда. Использование привязки в качестве открывающего свойства для открывающего тега @snap обязательно. Стоит также отметить, что эти имена свойств чувствительны к регистру.
## Размеры содержимого Snap Layouts
По умолчанию пространство, используемое для отображения контента на ваших слайдах, определяется следующим образом:
1. Сам контент, например, количество слов на слайде.
2. Фиксированная тема активная для презентации.
3. Соотношение сторон содержания бестекстового, такие как изображения, и т.д.
Важно понимать, что существуют ограничения на количество контента, которое вы можете добавить к слайду. Например, если вы добавляете длинный абзац текста на слайд, тогда, если вы не предпримете активные шаги по ограничению размера этого контента, очень вероятно, что ваш текст будет переполнен. Это можно легко понять, если учесть влияние активной фиксированной темы на набор слайдов.
Фиксированная тема для набора слайдов определяет стандартные размеры шрифта, отступы, поля и т.д., используемые для визуализации контента. В результате эти правила стиля оказывают существенное влияние на то, сколько пространства слайдов используется для визуализации вашего контента. Стоит отметить, что у вас есть возможность переопределить эти значения по умолчанию своими собственными правилами стиля.
Нетекстовый контент, такой как изображения, бывают разных форм и размеров. Но соотношение сторон ваших слайдов установлено на 16:9. Поэтому, если вы используете изображения с соотношением сторон, которое отличается от вашего набора слайдов, вам, возможно, придется предпринять шаги, чтобы ограничить этот контент в рамках ваших слайдов.
К счастью, Snap-Layouts позволяет очень легко получить полный контроль над размером контента на ваших слайдах. Давайте снова посмотрим на образец слайда Markdown сверху:
```
@snap[west span-50]
### Architecture Diagram
@snapend
```
Комбинация свойств west и span-50 гарантирует, что этот блок привязанного контента использует только 50% доступной ширины, начиная с левой стороны слайда, для визуализации этого контента. Как текст заголовка Markdown, так и сопровождающее изображение автоматически ограничиваются подгонкой в пределах этой области сетки.
Мы могли бы легко настроить это значение свойства span-xxx, чтобы увеличить или уменьшить объем пространства, отведенного для привязанного содержимого на нашем демонстрационном слайде, например:
```
@snap[west span-33]
### Architecture Diagram
@snapend
```
Как правило, ограничивая ширину `привязанного` содержимого с помощью свойства span, высота этого содержимого корректируется пропорционально.
## SNAP LAYOUTS ПРИМЕР 1
Рассмотрим использование GitPitch Snap Layouts для создания следующего примера слайда:
### Шаг 1. Начальный Markdown
Исходный фрагмент уценки для нашего образца слайда выглядит следующим образом:
```
### GraphQL
@fa[quote-left](A query language for your API)
```
Единственный новый элемент Markdown в этом фрагменте, который может быть вам незнаком - это использование **Font Awesome Markdown Widget**. Этот фрагмент Markdown выглядит следующим образом:
Что-то здесь не совсем правильно. В частности, изображение переполняет слайд. Мы быстро понимаем, что образец изображения не соответствует соотношению сторон нашего слайда.
### Шаг 2. Размер слайда
Этот шаг обновляет Markdown, чтобы мы могли контролировать горизонтальную и вертикальную высоту привязанного содержимого, чтобы оно соответствовало границам нашего демонстрационного слайда.
Чтобы предотвратить переполнение содержимого слайда, мы можем обернуть наш образец блока разметки в метки привязки и указать значение свойства span-xxx, чтобы контролировать ширину и высоту привязанного содержимого в пределах пространства, доступного на нашем слайде.
```
@snap[midpoint span-40]
### GraphQL
@fa[quote-left](A query language for your API)
@snapend
```
Этот последний фрагмент Markdown выглядит следующим образом:
Намного лучше. Как правило, вам может потребоваться поэкспериментировать со значением свойства span-xxx, пока вы не найдете правильный размер для вашего конкретного содержимого слайда.
Хотя это простой дизайн слайдов, он демонстрирует эффективное решение распространенной проблемы при работе с произвольным содержимым изображений в презентациях GitPitch.
## SNAP LAYOUTS ПРИМЕР 2
### Шаг 1. Начальный Markdown
Начальный фрагмент Markdown к западу от нашего образца слайда выглядит следующим образом:
```
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left](A query language for your API)
G
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Использование свойства span-40 контролирует ширину и высоту привязанного содержимого, гарантируя, что оно вписывается в западные границы нашего слайда.
Использование свойства text-center устанавливает настраиваемое выравнивание для привязанного содержимого, создавая хороший центрированный стек. По умолчанию в сетке действуют следующие правила выравнивания контента:
1. Содержимое в западных позициях сетки автоматически выравнивается по левому краю текста.
2. Содержимое в центральных позициях сетки автоматически выравнивается по центру текста.
3. Содержимое в восточных позициях сетки автоматически выравнивается по тексту.
### Шаг 2. Вертикальный разделенный экран
Этот шаг обновляет наш Markdown, чтобы обеспечить эффект разделения экрана для нашего образца слайда:
```
---?color=linear-gradient(90deg, white 50%, black 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Этот эффект достигается путем активации цветового градиента на ограничителе цвета для слайда образца.
### Шаг 3. Заголовок и текст в штучной упаковке
Этот шаг обновляет наш Markdown, чтобы доставить заголовок и текст в штучной упаковке к востоку от нашего образца слайда:
```
---?color=linear-gradient(90deg, white 50%, black 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
@snap[north-east span-40 text-08]
@box[](Step 1. Schema # Define types using SDL)
@snapend
@snap[east span-40 text-08]
@box[](Step 2. Query # Fetch data with Queries)
@snapend
@snap[south-east span-40 text-08]
@box[](Step 3. Mutate # Modify data with Mutations)
@snapend
```
Обновленный Markdown в этом фрагменте использует виджет в штучной упаковке. Он также использует встроенные стили размера шрифта текста для настройки размера текста, отображаемого в виджетах в штучной упаковке. Этот промежуточный фрагмент Markdown выглядит следующим образом:
### Шаг 4. Цветное коробочное название и текст
Этот последний шаг обновляет наш Markdown, чтобы доставить цветные прямоугольные заголовок и текст к востоку от нашего образца слайда:
```
---?color=linear-gradient(90deg, white 50%, black 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
@snap[north-east span-40 text-08]
@box[bg-green](Step 1. Schema # Define types using SDL)
@snapend
@snap[east span-40 text-08]
@box[bg-blue](Step 2. Query # Fetch data with Queries)
@snapend
@snap[south-east span-40 text-08]
@box[bg-gold](Step 3. Mutate # Modify data with Mutations)
@snapend
```
Обновленный фрагмент Markdown использует свойства `bg-green`, `bg-blue` и `bg-gold` в виджетах в штучной упаковке, чтобы добавить яркости цвета. Это лишь некоторые из встроенных стилей цвета фона, доступных всем авторам презентаций GitPitch. И, конечно же, как автор презентации GitPitch, вы всегда можете определить свои собственные цвета фона.
Этот последний фрагмент Markdown выглядит следующим образом:
## SNAP LAYOUTS ПРИМЕР 3
Рассмотрим использование GitPitch Snap Layouts для создания следующего примера слайда:
### Шаг 1. Начальный Markdown
Исходный фрагмент Markdown к северу от нашего образца слайда выглядит следующим образом:
```
@snap[north span-40 h3-black]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Использование свойства `span-40` гарантирует, что текст заголовка не будет выходить за пределы центральной части нашего образца слайда. Этот фрагмент также использует свойство `h3-black`. Это один из встроенных стилей цвета заголовка, который можно использовать для настройки цвета любого текста заголовка Markdown на слайдах. И, конечно, как автор презентации GitPitch, вы всегда можете определить свои собственные цвета заголовков.
### Шаг 2. Горизонтальный разделенный экран
Этот шаг обновляет наш Markdown, чтобы обеспечить эффект разделения экрана для нашего образца слайда:
```
---?color=linear-gradient(180deg, white 50%, #E71E60 50%)
@snap[north span-40 h3-black]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Этот эффект достигается путем активации цветового градиента на ограничителе цвета для слайда образца.
### Шаг 3. Внедрение кода
Этот последний шаг обновляет наш Markdown, чтобы внедрить код из внешнего файла прямо на юг нашего примера слайда:
```
---?color=linear-gradient(180deg, white 50%, #E71E60 50%)
@snap[north span-40 h3-black]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
@snap[south span-85]
@code[js zoom-13 code-max code-shadow](src/js/graphql.js)
@snapend
```
Использование свойства `span-85` здесь контролирует ширину и высоту блока кода, отображаемого на нашем примере слайда. Код в этом блоке внедряется с помощью виджета кода.
Помимо простого внедрения кода в свойствах `zoom-13` и `code-max` этого виджета используются мощные функции кода, в том числе Code Step-and-Zoom, Code Revealing и Code Power Properties.
В заключение стоит отметить, что свойство code-shadow - это пользовательский стиль CSS, используемый для создания приятного эффекта тени для нашего блока кода. Этот пример пользовательского стиля CSS определяется следующим образом:
```
.code-shadow {
box-shadow:0 10px 16px 10px rgba(0,0,0,0.2),
0 6px 20px 10px rgba(0,0,0,0.19) !important;
}
```
Этот последний фрагмент Markdown выглядит следующим образом:
## SNAP LAYOUTS ПРИМЕР 4
Рассмотрим использование GitPitch Snap Layouts для создания следующего примера слайда:
### Шаг 1. Начальный Markdown
Исходный фрагмент Markdown к северу от нашего образца слайда выглядит следующим образом:
```
@snap[north span-40]
### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Использование свойства span-40 гарантирует, что текст заголовка ограничен центральной частью нашего образца слайда.
### Шаг 2. Градиентный фон
Этот шаг обновляет наш Markdown, чтобы обеспечить эффект цветового градиента для нашего образца слайда:
```
---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)
@snap[north span-40]
### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Этот эффект достигается путем активации цветового градиента на ограничителе цвета для слайда образца.
### Шаг 3. Вертикальный размер изображения
Этот шаг обновляет наш Markdown с добавлением изображений по центру и размером вокруг средней точки нашего образца слайда:
```
---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)
@snap[north span-40]
### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)
@snapend
@snap[midpoint span-60]
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Использование свойства span-60 здесь гарантирует, что диаграмма архитектуры помещается вертикально между текстом заголовка на севере и описываемыми деталями, которые скоро будут добавлены на юге нашего образца слайда.
### Шаг 4. Пошаговое содержание
Этот шаг обновляет наш Markdown серией описательных шагов в южных областях нашего образца слайда:
```
---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)
@snap[north span-40]
### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)
@snapend
@snap[midpoint span-60]
@snapend
@snap[south-west span-30 text-06]
@box[rounded text-white box-graphql](Step 1.#Describe your data.)
@snapend
@snap[south span-30 text-06]
@box[rounded text-white box-graphql](Step 2.#Ask for what you want.)
@snapend
@snap[south-east span-30 text-06]
@box[rounded text-white box-graphql](Step 3.#Get predictable results.)
@snapend
```
Обновленный Markdown в этом фрагменте использует виджет в штучной упаковке. Он также использует встроенные стили размера шрифта текста для настройки размера текста, отображаемого в виджетах в штучной упаковке.
В этом фрагменте также используется пример пользовательского стиля CSS, называемого box-graphql, который позволяет нам активировать пользовательский цвет фона для наших виджетов в штучной упаковке. Этот пример пользовательского стиля CSS определяется следующим образом:
```
.box-graphql { background: rgba(0,212,255,1); }
```
Вы можете таким же образом определить свои собственные стили CSS, которые будут использоваться в качестве свойств в любом виджете Markdown. Этот промежуточный фрагмент Markdown выглядит следующим образом:
### Шаг 4. Пошаговые фрагменты
Этот последний шаг обновляет наш Markdown, чтобы по отдельности раскрывать отдельные детали на слайде. В отличие от раскрытия всех деталей на слайде образца одновременно:
```
---?color=linear-gradient(0deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 35%, rgba(0,212,255,1) 100%)
@snap[north span-40]
### GraphQL
@fa[quote-left quote-graphql text-white](A query language for your API)
@snapend
@snap[midpoint span-60]
@snapend
@snap[south-west span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 1.#Describe your data.)
@snapend
@snap[south span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 2.#Ask for what you want.)
@snapend
@snap[south-east span-30 text-06 fragment]
@box[rounded text-white box-graphql](Step 3.#Get predictable results.)
@snapend
```
Обновленный Markdown в этом фрагменте использует свойство фрагмента в каждой из южных областей привязки.
В этом последнем фрагменте Markdown наш образец слайда выглядит следующим образом:
## SNAP LAYOUTS ПРИМЕР 5
Рассмотрим использование GitPitch Snap Layouts для создания следующего примера слайда:
### Шаг 1. Начальный Markdown
Начальный фрагмент Markdown к западу от нашего образца слайда выглядит следующим образом:
```
@snap[west span-40 -center]
### GraphQL
@fa[quote-left](A query language for your API)
@snapend
```
И идентичный фрагмент Markdown был использован и подробно описан в предыдущем примере Snap Layouts. Фрагмент Markdown выглядит следующим образом:
### Шаг 2. Наклонный разделенный экран
Этот шаг обновляет наш Markdown, чтобы обеспечить эффект разделенного экрана для нашего демонстрационного слайда:
```
---?color=linear-gradient(100deg, white 50%, #567AD2 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Этот эффект достигается путем активации цветового градиента на ограничителе цвета для слайда образца. Степень наклона определяется значением, передаваемым по первому параметру функции линейного градиента.
### Шаг 3. Заголовок текста
Этот шаг обновляет наш Markdown с добавлением текста заголовка на северо-востоке нашего образца слайда:
```
---?color=linear-gradient(100deg, white 50%, #567AD2 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
@snap[north-east span-40 text-center]
#### Deployment as a REST API Gateway
@snapend
```
Этот промежуточный фрагмент Markdown выглядит следующим образом:
Использование свойства span-40 ограничивает перенос текста заголовка в пределах северо-восточной области слайда. Использование свойства text-center устанавливает настраиваемое выравнивание для привязанного содержимого, создавая красивый центрированный заголовок.
### Шаг 4. Созданная PlantUML диаграмма
Этот последний шаг обновляет наш Markdown, чтобы внедрить диаграмму PlantUML, сгенерированную из простого текстового описания, к востоку от нашего образца слайда:
```
---?color=linear-gradient(100deg, white 50%, #567AD2 50%)
@snap[west span-40 text-center]
### GraphQL
@fa[quote-left quote-graphql](A query language for your API)
@snapend
@snap[north-east span-40 text-center]
#### Deployment as a REST API Gateway
@snapend
@snap[south-east span-40]
@uml[bg-white code-shadow](src/uml/graphql.puml)
@snapend
```
Использование свойства span-40 здесь контролирует ширину и высоту SVG-изображения PlantUML, представленного на нашем примере слайда. Это изображение SVG генерируется с помощью виджета UML для диаграмм.
В заключении следует отметить, что свойство code-shadow - это пользовательский стиль CSS, используемый для создания приятного эффекта тени для нашего примера диаграммы UML. Этот пример пользовательского стиля CSS определяется следующим образом:
```
.code-shadow {
box-shadow:0 10px 16px 10px rgba(0,0,0,0.2),
0 6px 20px 10px rgba(0,0,0,0.19) !important;
}
```
Этот последний фрагмент Markdown выглядит следующим образом:
# SNAP LAYOUTS ПЕРЕХОДЫ МЕЖДУ СЛАЙДАМИ
## Рендеринг Snap-Layouts и слайд-переходы
Содержимое слайдов, отображаемое системой snap-layouts, обрабатывается внешним механизмом рендеринга, который работает независимо от автоматически-настроенного макета слайд-шоу.
Одним из следствий этого дизайна является то, что содержимое слайдов, отображаемое системой snap-layouts, не участвует в автоматических переходах слайдов. Поэтому, если ваш слайд имеет смесь регулярного и snap содержания, какая-то часть вашего контента может отображаться не правильно на слайде при визуализации, изображение будет как-будто "прыгающим". И этот эффект прыжка будет некомфортным для восприятия презентации вашей аудиторией.
## Управление переходами при использовании Snap-Layouts, если у вас много слайдов.
Если вы широко используете макеты в виде слайд-шоу, выполните следующие действия:
1. Отключите слайд-переходы глобально в настройках слайд-шоу PITCHME.yaml.
2. (Необязательно) Активируйте переходы для отдельных слайдов, которые не используют макеты snap-layouts.
## Управление переходами при использовании Snap-Layouts на нескольких слайдах.
Если вы используете Snap-Layouts только на небольшом количестве слайдов в презентации слайд-шоу, то следует тключить только переходы на отдельных слайдах, используя Snap-Layouts.
## Отключить переходы глобально для всех слайдов
Вы можете отключить переходы между слайдами глобально для всех слайдов в своей презентации, используя параметр перехода в вашем PITCHME.yaml следующим образом:
```
transition : none
```
## Отключить переходы на отдельных слайдах
Вы можете отключить переходы между слайдами на отдельных слайдах, используя синтаксис @transition следующим образом:
```
---
@transition[none]
## Regular Slide Content
@snap[north-west]
The Fastest Way From Idea To Presentation
@snapend
```
---
# ОСОБЕННОСТИ РАЗМЕТКИ MARKDOWN
## ФРАГМЕНТЫ MARKDOWN
Фрагменты Markdown - отличный способ представить в презентации ключевые понятия для вашей аудитории - по одной идее за раз.
Поддержка фрагментов Markdown - это простая, но мощная функция, которую можно использовать для индивидуального отображения отдельных элементов на слайде. В отличие от раскрытия всех элементов на слайде одновременно.
Эта функция очень полезна для авторов презентаций, так как позволяет сосредоточить внимание аудитории на ключевых концепциях, раскрывая дополнительный контент на слайде, только когда наступит подходящее время.
Например, в первом слайде мы видим это:
Нажимая на пробел, видим новый блок в этом же слайде:
Еще раз нажимаем на пробел и видим еще один блок в этом же слайде:
И наконец, при нажатии пробела появляется последний блок этого слайда:
Только после этого при перелистывании появится следующий слайд.
Круто:)
Поскольку фрагменты слайдов так широко используются для представления содержимого списков, GitPitch поддерживает специальный синтаксис содержимого списков.
Помимо списков, практически любой элемент на слайде можно превратить в фрагмент слайда. Вы можете создавать неограниченное количество фрагментов на отдельном слайде. Порядок, в котором фрагменты отображаются на слайде, соответствует порядку, в котором фрагменты объявлены в вашем PITCHME.md.
## 1. Фрагменты текста
Вы можете использовать синтаксис @css, чтобы превратить любой фрагмент текста на слайде во фрагмент. Например:
```
---
@css[text-blue fragment](Hello, World!)
```
## 2. Фрагментированные текстовые фрагменты
Вы можете использовать синтаксис @box, чтобы превратить любой фрагмент текста в слайде в фрагмент. Например:
```
---
@box[text-orange span-80 fragment](Mars Attacks # Greetings earthlings. We come in peace!)
```
## 3. Фрагменты изображения
Вы можете использовать синтаксис @img, чтобы превратить любое встроенное изображение на слайде во фрагмент. Например:
```
---
@img[fragment](assets/img/pic.png)
```
## 4. Font Awesome Icon Фрагменты
Вы можете использовать синтаксис @fa, чтобы превратить любой значок шрифта Awesome на слайде в фрагмент. Например:
```
---
@fa[smile-o fa-4x fa-spin fragment]
```
## 5. Фрагменты Snap Layouts
Вы можете использовать синтаксис @snap layouts, чтобы сделать любую область привязки на слайде фрагментом. Например:
```
---
@snap[west]
# Hello
@snapend
@snap[east fragment]
# World!
@snapend
```
## 6. Фрагменты таблицы
Если вы не являетесь подписчиком GitPitch, вы все равно можете раскрывать данные таблицы по одной строке, активируя класс фрагмента в каждой строке, используя стандартный синтаксис HTML-разметки. Например:
```
---
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>25</td>
</tr>
<tr class="fragment">
<td>Eve</td>
<td>94</td>
</tr>
<tr class="fragment">
<td>John</td>
<td>43</td>
</tr>
</table>
```
## 7. Части HTML-фрагментов
HTML-фрагменты являются допустимыми для разметки Markdown. И данный фрагмент является обычным классом CSS, он может быть активирован на любом элементе, который принимает свойство класса, включая все фрагменты HTML. Например:
```
---
<h2 class="fragment">Hello, World!</h2>
```
# ФРАГМЕНТЫ СПИСКА MARKDOWN
## 1. Неупорядоченные списки с фрагментами
Пример синтаксиса ярлыка GitPitch:
```
@ul
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@ulend
```
## 2. Неупорядоченные списки с пользовательским классом CSS и элементами фрагмента
Пример синтаксиса ярлыка GitPitch:
```
@ul[squares]
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@ulend
```
Где квадраты соответствуют образцу пользовательского класса CSS, который вы определили в пользовательском CSS для вашей презентации. Вы можете использовать этот синтаксис, чтобы применить любую настройку CSS к макету и отображению списков на ваших слайдах.
## 3. Неупорядоченные списки со специфичными для фрагмента заметками докладчика
Пример синтаксиса ярлыка GitPitch:
```
@ul
- Plain text list item @note[Cool! Fragment specific speaker notes :)]
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item @note[Fragment specific speaker notes are optional.]
@ulend
```
## 4. Упорядоченные списки с фрагментами
Пример синтаксиса ярлыка GitPitch:
```
@ol
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@olend
```
## 5. Упорядоченные списки с пользовательским классом CSS и элементами фрагмента
Пример синтаксиса ярлыка GitPitch:
```
@ol[roman]
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@olend
```
Где roman соответствует образцу пользовательского класса CSS, который вы определили в пользовательском CSS для вашей презентации. Вы можете использовать этот синтаксис, чтобы применить любую настройку CSS к макету и отображению списков на ваших слайдах.
## 6. Упорядоченные списки с примечаниями докладчика для каждого фрагмента
Пример синтаксиса ярлыка GitPitch:
```
@ol
- Plain text list item @note[Cool! Fragment specific speaker notes :)]
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item @note[Fragment specific speaker notes are optional.]
@olend
```
## 7. Статические списки с отключенными фрагментами
Тот же самый синтаксис Markdown для работы с фрагментами списков может также использоваться для создания статических списков. Этот синтаксис позволяет вам указать ноль, один или несколько пользовательских классов CSS для вашего списка, в то время как полный набор элементов списка отображается статически, без фрагментов.
Например, следующий базовый синтаксис может использоваться для визуализации статического списка:
```
@ol[](false)
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@olend
```
Следующий синтаксис можно использовать для визуализации статического списка при применении пользовательского класса CSS для этого списка:
```
@ul[square-bullets](false)
- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item
@ulend
```
# ЯРЛЫКИ MARKDOWN
GitPitch предоставляет ряд уникальных синтаксических ярлыков, поддерживаемых PITCHME.md, которые можно использовать для изменения внешнего вида или поведения содержимого на любом слайде.
## Установить размер шрифта
Чтобы установить собственный размер шрифта для конкретного содержимого слайда, используйте следующий синтаксис в файле Markdown PITCHME.md:
```
---
@size[size-value](your-content)
```
Где значение size-value может принимать любое допустимое значение, разрешенное свойством font-size css.
Например, задайте нестандартный размер для суперразмера текста на слайде:
```
---
# @size[3.5em](OK)
```
Этот фрагмент Markdown выглядит следующим образом:
Основное содержание слайда показано слева. Тот же контент слайдов с примененным синтаксисом размера показан справа.
## Установить цвет шрифта
Чтобы установить собственный цвет шрифта для конкретного содержимого слайда, используйте следующий синтаксис в файле Markdown PITCHME.md:
```
---
@color[color-value](your-content)
```
Где значение color-value может принимать любое допустимое значение, разрешенное свойством color css.
Например, установите пользовательские цвета для полных строк текста или просто фрагментов внутри строки:
```
---
### @color[orange](ACME Corp Clearance Sale)
#### Dynamite Deals - @color[#DC143C](Short Fuses) Included!
```
Этот фрагмент Markdown выглядит следующим образом:
Основное содержание слайда показано слева. Тот же контент слайдов с примененным цветовым синтаксисом показан справа.
Установить пользовательский класс CSS
Чтобы установить собственный класс CSS для определенного содержимого слайда, используйте следующий синтаксис в файле Markdown PITCHME.md:
```
---
@css[class-name](your-content)
```
Где значение class-name - это любое имя класса CSS, которое вы активировали для презентации в режиме слайд-шоу с использованием пользовательской настройки темы.
Например, если ваша презентация определила следующие пользовательские классы CSS:
```
.headline {
color: gold;
text-transform: uppercase;
}
.byline {
color: gray;
font-size: 0.9em;
letter-spacing: 2px;
}
```
Эти пользовательские классы могут затем применяться непосредственно к контенту на ваших слайдах следующим образом:
```
---
### @css[headline](ACME Corp Clearance Sale)
#### @css[byline](Dynamite Deals - Short Fuses Included!)
```
Этот фрагмент Markdown выглядит следующим образом:
Основное содержание слайда показано слева. Тот же контент слайдов с примененным синтаксисом css показан справа.
## Установить пользовательскую метку оглавления для слайда
GitPitch автоматически генерирует оглавление для каждой презентации слайд-шоу. Вы можете получить доступ к оглавлению в меню слайд-шоу в левом нижнем углу любого слайд-шоу.
В содержание таблицы можно использовать для просмотра содержимого презентации. Его также можно использовать как средство быстрой навигации к любому слайду в презентации.
Как автор презентации, если вы обновите содержание презентации в PITCHME.md, GitPitch автоматически обновит для вас оглавление.
## Настройка оглавления
Метка по умолчанию, создаваемая для каждой записи в оглавлении, автоматически выводится на основе содержимого, найденного на каждом слайде. Иногда эта автоматически сгенерированная метка может быть не совсем тем, что вы хотите.
Как автор презентации вы можете переопределить метку с помощью пользовательских меток на любом слайде. Чтобы добавить собственную метку для любого слайда, добавьте следующий синтаксис @title в ваш файл PITCHME.md:
```
---
@title[Some custom label]
## Your slide contents goes here.
```
Вы можете добавить собственные ярлыки для одного, нескольких или всех слайдов в своей презентации. Если пользовательская метка не найдена, GitPitch попытается автоматически сгенерировать подходящую метку. Если такая подходящая метка не может быть сгенерирована, запись в оглавлении просто идентифицирует номер слайда.
## Установить слайд-специфичный переход
Чтобы установить специфичный для слайдов переход для отдельного слайда, используйте следующий синтаксис быстрого доступа сразу после любого разделителя слайдов в файле Markdown PITCHME.md:
```
---
@transition[transition-type]
### Your Slide Content Goes Here
```
Где значение типа перехода может быть любым из поддерживаемых типов перехода слайдов.
Обратите внимание, что этот синтаксис ярлыка может также использоваться, чтобы определить отчетливые вставные и выдвижные переходы для отдельного слайда. Например:
```
---
@transition[zoom-in fade-out]
### Your Slide Content Goes Here
```
Используя этот подход, для слайда может быть указана любая пара поддерживаемых типов переходов между слайдами. Обратите внимание, что при использовании пары слайдов и выдвижных переходах использования в -in постфиксе и -out постфикса на переходных именах не требуется.
# MARKDOWN ВИДЖЕТЫ
GitPitch предоставляет ряд уникальных синтаксических ярлыков, поддерживаемых разметкой PITCHME.md, которые можно использовать для создания крутых визуальных компонентов, а именно - виджетов на любом слайде вашей презентации.
[https://www.youtube.com/watch?v=Nw7Ga0gYM5Q](https://)
## Виджет в штучной упаковке
Штучной Text Widget делает текст в окне, чтобы выделить или подчеркнуть содержимое на слайде. Виджет создается с использованием следующего синтаксиса @box в вашем файле Markdown PITCHME.md:
```
@snap[west span-40]
@box[bg-gold text-white rounded box-padding](What is GitPitch?)
@snapend
@snap[east span-50]
@box[bg-green rounded box-padding](A *modern* PowerPoint uniquely adapted for Developers on Git.)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Визуальный внешний вид текста и самого поля можно настроить по мере необходимости. В вышеприведенном примере несколько встроенных стилей утилит CSS были использованы для настройки цвета фона, цвета текста и стиля визуализации для блока. Кроме того, в примере также использовался собственный стиль CSS, называемый box-padding. Этот пользовательский стиль был определен следующим образом:
```
.box-padding #boxed-text {
padding-top: 2em;
padding-bottom: 2em;
}
```
Класс box-padding использовался для управления вертикальной высотой блока путем переопределения отступов по умолчанию для текста, отображаемого внутри блока. Переопределение заполнения по умолчанию таким способом совершенно необязательно.
## Текст в штучной упаковке с виджетом заголовка
Штучной Text с заголовком-виджетом является простым расширением основного штучного Text Widget. Как и раньше, этот виджет позволяет выделять или подчеркивать текст на слайде. Используя этот виджет, поле также отображает пользовательский заголовок.
Виджет создается с использованием следующего синтаксиса @box в вашем файле Markdown PITCHME.md:
```
---?color=black
@snap[north-west span-35]
@box[bg-green text-white box-padding](1. Plan#Lorem ipsum dolor sit amet eiusmod)
@snapend
@snap[north-east span-35]
@box[bg-orange text-white rounded box-padding](2. Build#Sed do eiusmod tempor labore)
@snapend
@snap[south-east span-35]
@box[bg-pink text-white box-padding](3. Measure#Cupidatat non proident sunt in)
@snapend
@snap[south-west span-35]
@box[bg-blue text-white waved box-padding](4. Repeat#Ut enim ad minim veniam prodient)
@snapend
@snap[midpoint]
@fa[refresh fa-3x]
@snapend
```
Этот фрагмент уценки выглядит следующим образом:
Обратите внимание, что синтаксис поля с заголовком зависит от простого соглашения, в котором разделитель # используется для отделения заголовка от текста в теге @box. Это синтаксическое соглашение обобщается следующим образом:
```
@box[class...](title # text)
```
Из приведенного выше примера разметки также видно, что тег @box поставляется с тремя различными стилями рендеринга блоков: по умолчанию, округленный и неупорядоченный.
Внешний вид текста и самого поля можно дополнительно настраивать по мере необходимости. В вышеприведенном примере несколько встроенных стилей утилит CSS были использованы для настройки цвета фона, цвета текста и стиля отрисовки для блока. Кроме того, в примере также использовался собственный стиль CSS, называемый box-padding. Этот пользовательский стиль был определен следующим образом:
```
.box-padding #boxed-text {
padding-top: 1.8em;
padding-bottom: 2.3em;
}
```
Класс box-padding использовался для управления вертикальной высотой блока путем переопределения отступов по умолчанию для текста, отображаемого внутри блока. Переопределение заполнения по умолчанию таким способом совершенно необязательно.
## Цитата Виджет
Цитата Widget делает красиво стилизованную котировку на слайде. Виджет создается с использованием следующего синтаксиса @quote в вашем файле Markdown PITCHME.md:
```
@snap[north-east span-65]
@quote[Beware of geeks bearing formulas.]
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
## Цитировать с виджетом Attribution
Цитата с атрибуцией Widget является простым расширением основной цитаты Widget. Как и раньше, этот виджет позволяет визуально оформить цитату стиля на слайде. Используя этот виджет, рендеринг включает в себя указание источника для цитаты.
Виджет создается с использованием следующего синтаксиса @quote в вашем файле уценки PITCHME.md:
```
@snap[north-east span-20]
@quote[It's what I do that defines me.](Bruce Wayne)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
## Emoji Widget
@Emoji виджет поддерживает визуализацию сотни различных смайликов в том числе смайликов для людей, мест, символов, объектов, видов деятельности и продуктов питания. Использование этого виджета гарантирует, что ваши виджеты будут правильно отображаться при работе в Интернете, в автономном режиме или при экспорте слайдов в Microsoft PowerPoint или PDF.
## Виджет Font High 5
Виджет Font High 5 отображает пиксельные идеальные значки на слайдах. Получите до 2000 красиво иконки для использования в любых слайд-шоу.
## Image vidget
*Image vidget* делает встроенные изображения с пользовательскими стилями на слайде. Стандартный синтаксис изображения Markdown обеспечивает простой механизм рендеринга встроенного изображения на любом слайде, например:
```
```
Этот фрагмент Markdown выглядит следующим образом:
На этом этапе мы просто заменили стандартный синтаксис новым сокращенным синтаксисом. Но мы еще не воспользовались из стайлинга возможностей нового синтаксиса. Давайте сделаем это сейчас.
Например, мы можем видеть, что в приведенном выше примере фиксированная тема добавила сплошную рамку и рамку вокруг нашего изображения. Давайте определим наше собственное правило стиля CSS для удаления этих украшений:
```
.reveal img.clean-img {
border: none;
box-shadow: none;
background: none;
}
```
Мы можем немедленно активировать наш новый класс clean-img, используя тег @img следующим образом:
```
@img[clean-img span-60](assets/img/cityscape.png)
```
Обратите внимание, мы также использовали встроенный класс span-60, чтобы ограничить ширину изображения на нашем слайде. Этот стиль span является одним из доступных стилей утилит CSS, доступных для всех авторов презентаций GitPitch. Этот фрагмент Markdown выглядит следующим образом:
На данный момент мы активировали два разных правила стиля CSS для нашего изображения, классы clean-img и span-60 соответственно. Нет ограничений на количество правил пользовательских стилей, которые вы можете активировать для своего изображения.
В качестве последнего шага мы можем определить еще одно пользовательское правило стиля CSS, которое позволит нам обрезать изображение следующим образом:
```
.reveal img.clip-img {
clip-path: circle(30% at 50% 50%);
-webkit-clip-path: circle(30% at 50% 50%);
}
```
Обновленный Markdown для нашего слайда выглядит следующим образом:
```
@img[clip-img bg-black clean-img span-80](assets/img/cityscape.png)
```
Обратите внимание, мы также использовали встроенный класс bg-black, чтобы добавить черный фон за прозрачное изображение PNG. Последний слайд выглядит следующим образом:
Хотя тег @img предлагает неограниченную гибкость для стилизации отдельных изображений, имейте в виду, что у вас также есть возможность определить глобальное правило стиля CSS для всех изображений, которые активируются автоматически на каждом слайде. Например, чтобы глобально активировать правило clean-img для презентации в виде слайд-шоу, используйте следующее пользовательское правило CSS:
```
.reveal img {
border: none;
box-shadow: none;
background: none;
}
```
## Git Repo Link Widget
Git Repo Link Widget оказывает прямую ссылку на любой файл внутри вашего хранилища на GitHub, GitLab или Bitbucket в облаке. Виджет создается с использованием следующего синтаксиса @gitlink в вашем файле Markdown PITCHME.md:
```
@gitlink[TEXT](path/to/repo/file.ext)
```
Например, если в той же ветке, что и ваша презентация, находится файл install / README.md, вы можете использовать следующий синтаксис Markdown для ссылки на этот файл:
```
You can find additional documentation @gitlink[here](install/README.md).
```
Эта ссылка на ваш репозиторий в облаке автоматически откроется в той же ветке, что и сама презентация.
# ВИДЖЕТЫ MARKDOWN PRO
[https://www.youtube.com/watch?v=Nw7Ga0gYM5Q](https://)
## Code Widget
@Code Widget поддерживает широкий диапазон мощных расширений за пределами стандартного кода включая Code Step-and-Zoom, Code Revealing, и Code Power Properties.
![][https://gitpitch.com/docs/images/pro-code-step-and-zoom.gif]
Code Widget предоставляет исходный код из любого файла на слайде. Все пути указаны относительно корневого каталога вашего локального рабочего каталога или хранилища. Виджет создается с использованием следующего синтаксиса @code в вашем файле Markdown PITCHME.md:
```
@code[lang-hint ...](path/to/file.ext)
```
lang-hint должна быть указана в качестве первого свойства на этом виджете. Список поддерживаемых языков и допустимых псевдонимов, которые можно использовать в качестве подсказки, можно найти здесь.
**Важно!** Свойство lang-hint имеет два важных применения:
Это обеспечивает отображение кода на слайде с использованием наиболее подходящего стиля подсветки синтаксиса.
Это также гарантирует, что любая разметка в вашем коде должным образом экранируется до того, как будет отображена как содержимое слайда в браузере. Это особенно важно при представлении HTML, XML, PHP, фрагментов React и т.д.
Например, следующий фрагмент Markdown использует виджет @code для визуализации исходного файла Go:
```
@code[golang](src/go/sample.go)
```
Этот фрагмент Markdown выглядит следующим образом:
На первый взгляд может показаться, что этот виджет не дает особых преимуществ по сравнению с использованием встроенных блоков изолированного кода или разделителя кода на слайде. Но виджет @code - это основной механизм, с помощью которого активируются следующие мощные функции кода Pro:
* Pro Code Step-and-Zoom
* Pro-код, представляющий свойства раскрытия
* Pro Code Present с мощными свойствами
Как и ожидалось, виджет @code работает без проблем с традиционным кодом GitPitch, представленным с аннотациями. Например:
```
@code[golang](src/go/sample.go)
@[1](You can step through your code directly within your slide deck.)
@[3](Using the GitPitch live code presenting with annotations feature.)
@[5-7](Which means no need to switch back and forth between your slide deck and IDE.)
```
## GitHub GIST Widget
@Gist виджет поддерживает широкий диапазон мощных расширений за пределами стандартного кода, включая Code Step-and-Zoom, Code Revealing, and Code Power Properties.
GitHub GIST Widget предоставляет исходный код из любого GitHub GIST непосредственно на слайде. Эта функция доступна для всех презентаций, размещенных на GitHub, GitLab или Bitbucket. Виджет создается с использованием следующего синтаксиса @gist в вашем файле Markdown PITCHME.md:
```
@gist[lang-hint ...](username/gist)
```
lang-hint должна быть указана в качестве первого свойства на этом виджете.
**Важно!** Свойство lang-hint имеет два важных применения:
* Это обеспечивает отображение кода на слайде с использованием наиболее подходящего стиля подсветки синтаксиса.
* Это также гарантирует, что любая разметка в вашем коде должным образом экранируется до того, как будет отображена как содержимое слайда в браузере. Это особенно важно при представлении HTML, XML, PHP, фрагментов React и т.д.
Например, следующий фрагмент Markdown использует виджет @gist для рендеринга образца исходного файла Groovy:
```
@gist[groovy](onetapbeyond/8da53731fd54bab9d5c6)
```
Этот фрагмент Markdown выглядит следующим образом:
Как и ожидалось, виджет @gist без проблем работает с традиционным кодом GitPitch, представленным с аннотациями. Например:
```
@gist[groovy](onetapbeyond/8da53731fd54bab9d5c6)
@[1](You can step through your code directly within your slide deck.)
@[3](Using the GitPitch live code presenting with annotations feature.)
@[5-7](Which means no need to switch back and forth between your slide deck and IDE.)
```
# PRO CODE STEP-AND-ZOOM
Эта функция дает вам возможность увеличивать и уменьшать масштаб кода, когда вы шагаете по нему на слайдах.
## Виджет кода с ZOOM
Функция ZOOM позволяет увеличивать или уменьшать масштаб всего блока кода при визуализации исходного кода на слайде с помощью виджета @code. Функция увеличения активируется путем указания одного из встроенных свойств стиля ZOOM-IN в качестве свойства в виджете.
Например, вот фрагмент Markdown, который активирует пользовательское свойство масштабирования для виджета @code, отображающего исходный файл Go:
```
@code[golang zoom-21](src/go/sample.go)
```
Этот фрагмент Markdown выглядит следующим образом:
Обратите внимание на использование свойства zoom-21, установленного в виджете @code выше. Свойства ZOOM-IN делают код больше на слайде. Увеличение масштаба кода обеспечивает красивые слайды кода, которые легко читаются и привлекают любую аудиторию.
Мы также можем уменьшить масштаб, указав одно из встроенных свойств ZOOM-OUT в нашем виджете @code:
```
---
@snap[west span-40]
@code[golang zoom-07](src/go/sample.go)
@snapend
@snap[east span-50]
### Live Code Presenting
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
Обратите внимание выше на использование свойства zoom-07 в виджете @code . В ZOOM-OUT свойство делает код появляется меньше на слайде. Идеально подходит для создания миниатюр вашего кода.
## Виджет кода с Step-and-ZOOM
Функция Step-and-ZOOM позволяет вам увеличивать или уменьшать конкретную строку кода или диапазон кода, когда живой код отображается на любом слайде. Эта функция активируется указанием одного из встроенных стилей ZOOM-IN или ZOOM-OUT в качестве свойства для отдельных маркеров фрагмента кода.
Например, вот фрагмент Markdown, который демонстрирует Step-and-ZOOM, активированный для ряда шагов представления кода:
```
@code[golang zoom-21](src/go/sample.go)
@[1, zoom-25](You can step-and-zoom into selected sections of code directly on your slides.)
@[3, zoom-25](Using GitPitch live code presenting with optional annotations.)
@[5,7, zoom-20](Allowing you to drill-down into your code and focus your audience's attention.)
```
Этот фрагмент Markdown выглядит следующим образом:
## GitHub GIST Виджет с ZOOM
Функция ZOOM позволяет увеличивать или уменьшать масштаб всего блока кода при визуализации исходного кода на слайде с помощью виджета @gist. Функция увеличения активируется путем указания одного из встроенных свойств стиля ZOOM-IN в качестве свойства в виджете.
Например, вот фрагмент Markdown, который активирует пользовательское свойство масштабирования для виджета @gist, отображающего фрагмент кода Groovy:
```
@gist[groovy zoom-15](onetapbeyond/8da53731fd54bab9d5c6)
```
Этот фрагмент Markdown выглядит следующим образом:
Обратите внимание на использование свойства zoom-15, установленного в виджете @gist выше. Свойства ZOOM-IN делают код больше на слайде. Увеличение масштаба кода обеспечивает красивые слайды кода, которые легко читаются и привлекают любую аудиторию.
Мы также можем уменьшить масштаб, указав одно из встроенных свойств ZOOM-OUT в нашем виджете @gist. Идеально подходит для создания миниатюр кода GIST.
## GitHub GIST Виджет с Step-and-ZOOM
Функция Step-and-ZOOM позволяет вам увеличивать или уменьшать конкретную строку кода или диапазон кода, когда живой код отображается на любом слайде. Эта функция активируется указанием одного из встроенных стилей ZOOM-IN или ZOOM-OUT в качестве свойства для отдельных маркеров фрагмента кода.
Например, вот фрагмент Markdown, который демонстрирует Step-and-ZOOM, активированный для ряда шагов представления кода:
```
@gist[groovy zoom-12](onetapbeyond/8da53731fd54bab9d5c6)
@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)
```
Этот фрагмент Markdown выглядит следующим образом:
## ZOOM-IN Стиль Свойства
Следующие стили ZOOM-IN CSS могут быть установлены в качестве свойств виджетов @code и @gist, чтобы исходный код выглядел больше на слайде:
```
.zoom-11 { font-size: 1.1em !important; line-height: 1.2 !important; }
.zoom-12 { font-size: 1.2em !important; line-height: 1.2 !important; }
.zoom-13 { font-size: 1.3em !important; line-height: 1.2 !important; }
.zoom-14 { font-size: 1.4em !important; line-height: 1.2 !important; }
.
.
.
.zoom-18 { font-size: 1.8em !important; line-height: 1.1 !important; }
.zoom-19 { font-size: 1.9em !important; line-height: 1.1 !important; }
.zoom-20 { font-size: 2.0em !important; line-height: 1.1 !important; }
.zoom-21 { font-size: 2.1em !important; line-height: 1.1 !important; }
.
.
.
.zoom-58 { font-size: 5.8em !important; line-height: 1.1 !important; }
.zoom-59 { font-size: 5.9em !important; line-height: 1.1 !important; }
.zoom-60 { font-size: 6.0em !important; line-height: 1.1 !important; }
```
## Свойства стиля ZOOM-OUT
Следующие стили ZOOM-OUT CSS могут быть установлены как свойства для виджетов @code и @gist, чтобы исходный код выглядел меньше на слайде:
```
.zoom-01 { font-size: 0.1em !important; line-height: 1.5 !important; }
.zoom-02 { font-size: 0.2em !important; line-height: 1.5 !important; }
.zoom-03 { font-size: 0.3em !important; line-height: 1.5 !important; }
.zoom-04 { font-size: 0.4em !important; line-height: 1.5 !important; }
.zoom-05 { font-size: 0.5em !important; line-height: 1.5 !important; }
.zoom-06 { font-size: 0.6em !important; line-height: 1.5 !important; }
.zoom-07 { font-size: 0.7em !important; line-height: 1.5 !important; }
.zoom-08 { font-size: 0.8em !important; line-height: 1.5 !important; }
.zoom-09 { font-size: 0.9em !important; line-height: 1.5 !important; }
.zoom-10 { font-size: 1.0em !important; line-height: 1.2 !important; }
```
*Как профессиональный пользователь , вы можете определить новые стили или переопределить существующие стили масштабирования.*
# ВЫЯВЛЕНИЕ КОДА PRO
Подписки GitPitch Pro + Lite активируют мощные ярлыки синтаксиса Pro, поддерживаемые разметкой PITCHME.md, которые можно использовать для создания крутых визуальных компонентов - виджетов на любом слайде.
Код виджета и GitHub GIST Widget поддерживает ряд мощных расширений за пределами стандартного кода. Далее описывается расширение Code Revealing. Эта функция дает вам полный контроль над тем, как и когда фрагменты кода отображаются на ваших слайдах.
## Виджет кода с режимом раскрытия по умолчанию
Режим отображения по умолчанию описывает стандартное поведение представления кода:
1. Полный код сначала отображается на слайде.
2. После отображения полного кода вы можете постепенно фокусировать и масштабировать определенные фрагменты в этом коде.
Например, следующая разметка Markdown активирует стандартное представление кода, что приводит к режиму раскрытия по умолчанию для исходного кода, найденного в файле sample.js:
```
---?color=#1d1f21
@code[js zoom-12](src/node/sample.js)
@snap[south span-100 text-08]
@[1, zoom-17](After displaying the full-code, each code presenting step lets you...)
@[3,4, zoom-16](The ability to focus-and-zoom on specific code snippets directly...)
@[6-10](Giving you a great way to focus the attention of your audience on what matters most...)
@snapend
```
Этот фрагмент Markdown выглядит следующим образом:
## Виджет кода с режимом медленного раскрытия
Режим медленного раскрытия описывает следующее поведение:
Полный код на вашем слайде изначально скрыт.
После этого вы можете перейти от этого пустого слайда к пошаговому фокусированию и масштабированию определенных фрагментов в этом коде.
*Начальный режим медленного показа пустого слайда можно использовать для обеспечения передышки во время живой презентации, особенно при переходе от контента регулярного обсуждения к контенту, специфичному для кода.*
Например, следующая разметка активирует представление живого кода с использованием режима медленного раскрытия исходного кода, найденного в файле sample.js:
```
---?color=#1d1f21
@code[js code-reveal-slow](src/node/sample.js)
@snap[south span-100 text-08]
@[1, zoom-20](Code revealing *slow-mode* lets you start by hiding the code on your slide.)
@[1-4, zoom-20](And then gradually introduce specific code snippets to your audience.)
@[1-10, zoom-12](Again using optional annotations to focus the attention of your audience.)
@snapend
```
Обратите внимание на использование свойства code-reve-slow в виджете @code markdown. Активируя это свойство в виджете, поведение рендеринга автоматически изменяется, чтобы обеспечить семантику режима медленного раскрытия.
Приведенный выше фрагмент Markdown выглядит следующим образом:
## Виджет кода с режимом быстрого выявления
Режим быстрого раскрытия описывает следующее поведение:
Ваш начальный слайд кода полностью обойден.
Поэтому вы переходите непосредственно к пошаговой фокусировке и масштабированию определенных фрагментов кода.
Например, следующая разметка активирует представление живого кода в режиме быстрого раскрытия исходного кода, найденного в файле sample.js:
```
---?color=#1d1f21
@code[js code-reveal-fast](src/node/sample.js)
@snap[south span-100 text-08]
@[3-4, zoom-20](Code revealing *fast-mode* bypasses the intial full code slide.)
@[1-4, zoom-20](This lets you jump straight into sharing specific code snippets...)
@[1-10, zoom-12](Again using optional annotations to focus the attention of your audience.)
@snapend
```
Обратите внимание на использование свойства code-reve-fast в виджете @code markdown. Активируя это свойство в виджете, поведение рендеринга автоматически изменяется, чтобы обеспечить семантику режима быстрого раскрытия.
## GitHub GIST Виджет с режимом раскрытия по умолчанию
Режим отображения по умолчанию описывает стандартное поведение представления кода:
Полный код сначала отображается на слайде.
После отображения полного кода вы можете постепенно фокусировать и масштабировать определенные фрагменты в этом коде.
Например, следующая разметка Markdown активирует стандартное представление кода, что приводит к режиму раскрытия по умолчанию для исходного кода, найденного в образце GITHub GIST:
```
@gist[groovy zoom-15](onetapbeyond/8da53731fd54bab9d5c6)
@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)
```
## GitHub GIST Widget с режимом медленного раскрытия
Режим медленного раскрытия описывает следующее поведение:
Полный код на вашем слайде изначально скрыт.
После этого вы можете перейти от этого пустого слайда к пошаговому фокусированию и масштабированию определенных фрагментов в этом коде.
*Начальный режим медленного показа пустого слайда можно использовать для обеспечения передышки во время живой презентации, особенно при переходе от контента регулярного обсуждения к контенту, специфичному для кода.*
Например, следующая разметка Markdown активирует представление живого кода с использованием режима медленного раскрытия исходного кода, найденного в образце GITHub GIST:
```
@gist[groovy zoom-15 code-reveal-slow](onetapbeyond/8da53731fd54bab9d5c6)
@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)
```
Обратите внимание на использование свойства code-reve -slow в виджете @gist markdown. Активируя это свойство в виджете, поведение рендеринга автоматически изменяется, чтобы обеспечить семантику режима медленного раскрытия.
## GitHub GIST Widget с режимом быстрого выявления
Режим быстрого раскрытия описывает следующее поведение:
Ваш начальный слайд кода полностью обойден.
Поэтому вы переходите непосредственно к пошаговой фокусировке и масштабированию определенных фрагментов кода.
Например, следующая разметка Markdown активирует представление живого кода в режиме быстрого раскрытия исходного кода, найденного в примере GITHub GIST:
```
@gist[groovy zoom-15 code-reveal-fast](onetapbeyond/8da53731fd54bab9d5c6)
@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)
```
*Обратите внимание на использование свойства code-reve -fast в виджете @gist markdown . Активируя это свойство в виджете, поведение рендеринга автоматически изменяется, чтобы обеспечить семантику режима быстрого раскрытия.*
# РАСШИРЕНИЯ СВОЙСТВ КОДА
Эта функция предоставляет вам набор свойств, которые управляют внешним видом и поведением виджетов кода на ваших слайдах.
## Code-Blend Property
Цвет фона для любого кодового блока, отображаемого на слайде GitPitch, определяется стилем подсветки синтаксиса, активированным для презентации. Этот стиль подсветки синтаксиса настраивается с помощью настройки подсветки.
Свойство code-blend можно активировать в любом виджете @code или @gist, чтобы плавно смешать цвет фона блока кода с фоном слайда. Активация этого свойства может привести к более визуально привлекательным слайдам кода.
Например, свойство code-blend активируется в виджете @code следующим образом:
```
@code[golang zoom-21 code-blend](src/go/sample.go)
```
На следующих снимках экрана показан рендеринг этого образца слайда, сначала с рендерингом по умолчанию, а затем с включенным свойством code-blend:
Свойство code-blend активируется в виджете @gist следующим образом:
```
@gist[groovy zoom-13 code-blend](onetapbeyond/8da53731fd54bab9d5c6)
```
На следующих снимках экрана показан рендеринг этого образца слайда, сначала с рендерингом по умолчанию, а затем с включенным свойством code-blend:
Свойство code-blend можно использовать вместе со свойствами Code ZOOM и любыми другими свойствами Power, описанными в этом руководстве.
## Свойство Code-NoBlend
Theme Template представляет собой автоматическую конвенцию, которая активируется для всех слайдов, отображающих коды. Когда слайд отображает код, цвет фона слайда автоматически принимает тот же цвет фона, который используется блоком кода. Вот несколько примеров слайдов кода, представленных с использованием этого соглашения:
Свойство code-noblend можно активировать в любом виджете @code или @gist, чтобы отключить это соглашение о шаблоне темы для отдельных слайдов кода в вашей колоде.
Например, свойство code-noblend можно активировать в виджете @code следующим образом:
```
@code[golang zoom-21 code-noblend](src/go/sample.go)
```
Обратите внимание, что свойство code-noblend позволяет отключить условное обозначение шаблона темы, только если шаблон темы не активирован в файле PITCHME.yaml для вашей презентации, то свойство code-noblend не действует.
## Code-Max Property
Размер отступов и полей, окружающих любой кодовый блок, отображаемый на слайде GitPitch, определяется правилами стиля по умолчанию, определяемыми фиксированной темой, используемой в презентации.
Свойство code-max можно активировать в любом виджете @code или @gist, чтобы минимизировать отступы и поля вокруг любого кодового блока. Активация этого свойства помогает вашему коду наслаждаться максимальным объемом пространства на ваших слайдах, что может привести к более визуально привлекательным слайдам кода.
Например, свойство code-max активируется в виджете @code следующим образом:
```
@code[golang zoom-21 code-blend code-max](src/go/sample.go)
```
Sign in with Wallet
Connect another wallet