md2googleslides
0.5
Создавайте слайды Google из уценки и HTML. Запустите из командной строки или встройте в другое приложение.
Этот проект был разработан как пример использования API Slides.
Хотя он еще не создает потрясающе красивых презентаций, вам рекомендуется использовать этот инструмент для быстрого создания прототипов презентаций.
Взносы приветствуются.
Для использования командной строки установите md2gslides глобально:
npm install -g md2gslidesЗатем получите учетные данные идентификатора клиента OAuth:
client_id.json (имя должно совпадать) и сохраните в ~/.md2googleslides .После установки импортируйте слайды, выполнив:
md2gslides slides.md --title " Talk Title " В результате в вашей учетной записи будут созданы новые слайды Google с названием Talk Title .
ПРИМЕЧАНИЕ. При первом запуске команды вам будет предложено авторизоваться. Учетные данные токена OAuth хранятся локально в файле с именем ~/.md2googleslides/credentials.json .
Каждый раз, когда вы запускаете приведенный выше комментарий, будет генерироваться новая колода слайдов. Для того, чтобы работать точно с той же самой колодой, достаточно получить ID уже сгенерированных слайдов. Например, вы можете использовать следующую команду:
# To reuse deck available at: https://docs.google.com/presentation/d/<some id>/edit#
md2gslides slides.md --title "Talk Title" --append <some id> --erase
md2gslides использует подмножество правил CommonMark и Github Flavored Markdown для уценки.
Каждый слайд обычно представлен заголовком, за которым следует ноль или более блочных элементов.
Начните новый слайд с горизонтальной линейки ( --- ). Разделитель может быть опущен для первого слайда.
В следующих примерах показано, как создавать слайды различных макетов:
---
# Это титульный слайд
## Здесь ваше имя
---
# Это заголовок раздела
---
# Название раздела и основной слайд
## Это субтитры
Это тело
---
# Заголовок и основной слайд
Это корпус слайда.
Добавьте {.big} к заголовку, чтобы сделать слайд с одной важной точкой.
---
# Это основная мысль {.big}
Используйте {.big} в заголовке в сочетании с телом.
---
# 100% {.большой}
Это тело
Разделите столбцы с помощью {.column} . Маркер должен располагаться на отдельной строке с пробелом как до, так и после.
---
# Макет в две колонки
Это левый столбец
{.столбец}
Это правый столбец
md2googleslides не редактирует и не контролирует какие-либо параметры, связанные с темой. Просто установите нужную базовую тему непосредственно в Google Slides. Даже если вы будете использовать опцию --append для повторного использования колоды, тема не изменится.
Изображения можно размещать на слайдах с помощью тегов изображений. Можно включить несколько изображений. Несколько изображений в одном абзаце располагаются в столбцах, несколько абзацев — в строках.
Примечание. Изображения в настоящее время масштабируются и центрируются в соответствии с шаблоном слайда.
---
# Слайды могут содержать изображения
Установите фоновое изображение слайда, добавив {.background} в конец URL-адреса изображения.
---
# Слайды могут иметь фоновые изображения.
{.background}
Включите видео YouTube с измененным тегом изображения.
---
# Слайды могут содержать видео
@[youtube](MG8KADiRbOU)
Включите заметки докладчика к слайду, используя комментарии HTML. Текст внутри комментариев может содержать уценку для форматирования, однако разрешено только форматирование текста. Видео, изображения и таблицы в заметках докладчика игнорируются.
---
# Название слайда
{.background}
<!--
Это заметки докладчика.
-->
Допускаются основные правила форматирования, в том числе:
Следующая уценка иллюстрирует несколько распространенных стилей.
Можно использовать **жирный**, *курсив* и ~~зачеркивание~~. Заказанные списки: 1. Пункт 1 1. Пункт 2 1. Пункт 2.1. Неупорядоченные списки: * Пункт 1 * Пункт 2 * Пункт 2.1.
Кроме того, для стилизации поддерживается подмножество встроенных HTML-тегов.
<span><sup><sub><em><i><strong><b> Поддерживаемые стили CSS для использования с элементами <span> :
colorbackground-colorfont-weight: boldfont-style: italictext-decoration: underlinetext-decoration: line-throughfont-familyfont-variant: small-capsfont-size (для единиц измерения необходимо использовать точки) Вы также можете использовать атрибуты {style="..."} после элементов уценки для применения стилей. Это можно использовать для заголовков, встроенных элементов, блоков кода и т. д.
Используйте в своем тексте смайлы в стиле Github, используя :emoji: .
В следующем примере эмодзи вставляются в заголовок и тело слайда.
### Я :heart: коты :heart_eyes_cat:
Поддерживаются как блоки кода с отступом, так и изолированные, с подсветкой синтаксиса.
В следующем примере отображается выделенный код.
### Привет, мир
```Javascript
console.log('Привет, мир');
```
Чтобы изменить тему подсветки синтаксиса, укажите параметр --style <theme> в командной строке. Поддерживаются все темы Highlight.js. Например, чтобы использовать тему GitHub
md2gslides slides.md --style githubВы также можете применить дополнительные изменения стиля ко всему блоку, например изменить размер шрифта:
### Привет, мир
```Javascript
console.log('Привет, мир');
```{style="font-size: 36pt"}
Таблицы поддерживаются через синтаксис GFM.
Примечание. Включение таблиц и других блочных элементов на один слайд может привести к плохим результатам из-за перекрывающихся элементов. Либо избегайте этого, либо вручную настройте макет после создания слайдов.
Следующее создает таблицу 2x5 на слайде.
### Лучшие домашние животные в США Животное | Число -------|-------- Рыба | 142 миллиона Кошки | 88 миллионов Собаки | 75 миллионов Птицы | 16 миллионов
Изображения, ссылающиеся на локальные пути, временно загружены и размещены на file.io. File.io — это временная служба обслуживания файлов, которая генерирует кратковременные случайные URL-адреса для загружаемого файла и удаляет контент вскоре после использования.
Поскольку локальные изображения загружаются третьей стороне, для использования этой функции требуется явное согласие. Включите параметр --use-fileio , чтобы разрешить загрузку изображений. Это относится к изображениям на основе файлов, а также к автоматически растрированному содержимому, например математическим выражениям и файлам SVG.
Слайды также могут включать сгенерированные изображения, используя для данных изолированные блоки $$$ . В настоящее время поддерживаются генерируемые изображения — математические выражения (TeX и MathML), а также SVG. Растрированные изображения обрабатываются так же, как и локальные изображения, и требуют согласия на загрузку изображений в стороннюю службу с помощью параметра --use-fileio .
Использование TeX:
# Как насчет математики? $$$ математика cos (2theta) = cos^2 theta - sin^2 theta $$$
SVG
# Или какой-нибудь SVG?
$$$ СВГ
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 48 48">
<defs>
<path id="a" d="M44.5 20H24v8.5h11.8C34.7 33,9 30,1 37 24 37c-7,2 0-13-5,8-13-13s5.8-13 13-13c3.1 0 5,9 1,1 8,1 2.9l6.4-6.4C34.6 4.1 29.6 2 24 2 11.8 2 2 11.8 2 24s9.8 22 22 22c11 0 21-8 21-22 0-1.3-.2-2.7-.5-4z"/>
</defs>
<clipPath id="b">
<use xlink:href="#a" overflow="visible"/>
</clipPath>
<path clip-path="url(#b)" fill="#EA4335" d="M0 11l17 13 7-6.1L48 14V0H0z"/>
<path clip-path="url(#b)" fill="#34A853" d="M0 37l30-23 7.9 1L48 0v48H0z"/>
<path clip-path="url(#b)" fill="#4285F4" d="M48 48L17 24l-4-3 35-10z"/>
</svg>
$$$
Как и локальные изображения, сгенерированные изображения временно обслуживаются через file.io.
Запросы на включение других генераторов изображений (например, mermaid,chartjs и т. д.) приветствуются!
Вы также можете передать уценку в инструмент, опустив аргумент имени файла.
За исключением /bin/md2gslides.js , TypeScript используется повсюду и компилируется с помощью Babel. Для тестирования используются мокко и чай.
Прежде всего убедитесь, что у вас есть все зависимости:
npm installЧтобы скомпилировать:
npm run compileЧтобы запустить модульные тесты:
npm run testДля проверки/форматирования тестов:
npm run lintДополнительные условия см. в разделе «ВКЛАД».
Эта библиотека распространяется под лицензией Apache 2.0. Полный текст лицензии доступен в разделе ЛИЦЕНЗИЯ.
