7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Computer Skills
  2. Markdown

Создание презентации со слайдами из записей Markdown

Scroll to top
Read Time: 14 mins

Russian (Pусский) translation by AlexBioJS (you can also view the original English article)

Форматирование текста при помощи Markdown (* упрощенный язык разметки, в котором для форматирования используется чистый текст. Здесь и далее примеч. пер.) коренным образом изменило ведение записей. Он предоставляет способ форматировать текст без его засорения. Наступает момент, когда вам необходимо сделать презентацию на основе ваших записей. Вам нужен эффективный и простой способ создания презентации из ваших записей. В этом руководстве я покажу вам, как создать слайд-шоу, реализуемое при помощи HTML, на основании записей, сделанных при помощи Markdown.

Преобразование Markdown в HTML

Программа-преобразователь – программа, которая принимает текст в формате Markdown и переводит его в другой формат. Лучшая из таких программ, которыми я пользовался, – kramdown. Kramdown – программа, написанная на Ruby, которая принимает текст в одном формате и преобразует его в другой. По умолчанию она выполняет преобразование текста в формате Markdown в HTML-формат.

Поскольку Ruby поставляется вместе со всеми Mac, установить kramdown очень легко. Для того чтобы установить kramdown, откройте консоль и выполните:

sudo gem install kramdown

После установки мы можем пользоваться командой kramdown. В качестве примера поместите следующий текст в формате Markdown в файл под названием test.md:

В командной строке выполните:

kramdown test.md > test.html

В результате будет создан файл test.html со следующим контентом:

Программа kramdown преобразует только предоставленный текст в формате Markdown в корректный HTML-код. Она не пытается создать целый документ с корректно отформатированным кодом HTML, в котором имеются  разделы заголовка и тела. Это важно учитывать при создании слайд-шоу из текста в формате Markdown. Для каждого слайда будет сгенерирован HTML-код, соответствующий предоставленному контенту, и ничего более. Запросто можно обернуть слайды внутри базовой разметки для страницы со слайд-шоу.

Базовая разметка для слайд-шоу, реализуемого при помощи HTML

У страницы со слайд-шоу имеется начальная разметка HTML, HTML-код для слайдов и конечную разметку HTML. Начальный и конечный разделы копируются, а HTML-код слайдов создается при помощи kramdown с некоторыми дополнительными изменениями с нашей стороны.

Создайте файл под названием presbegin.html со следующим кодом:

Это начало страницы со слайд-шоу. Это не полная HTML-страница. В теле документа располагаются три элемента div: div с классом container, div с классом section0 и div с классом slide. div с классом container содержит все слайд-шоу.

Внутри этого контейнера располагается div с классом section0 и его дочерний элемент div с классом slide. Разделы (* например section0) помогают форматировать все содержимое каждого раздела для слайда, а при помощи отдельного слайда (* slide) задается форматирование для этого слайда.

Конец страницы со слайд-шоу будет подобным. Создайте файл под названием presend.html и добавьте туда следующий код:

Тут кода не много! Здесь добавляются закрывающие теги для элементов div последнего слайда и элементов body и html.

Единственное специальное форматирование, которое необходимо добавить для заметок в формате Markdown, – то, которое используется для любых изображений и установления конца каждого слайда. Поскольку в Markdown для добавления изображений используется код, при помощи которого создаются ссылки на другие ресурсы, то он и используется с одним отличием: вместо размещения текстового описания для изображения в определенном месте (* [...]), оно будет использоваться для описания классов, которые необходимо добавить к изображению. Также код Markdown для добавления горизонтальной линии  используется для разделения слайдов.

Таким образом, базовый план для создания слайд-шоу следующий: скопировать presbegin.html, сгенерировать HTML-код из кода в формате Markdown, преобразовать все теги в , поменять все теги для изображения так, чтобы вместо альтернативного текста использовались классы, и скопировать presend.html.

Создайте новый файл под названием pres.rb и добавьте в него следующий код:

При помощи этого кода Ruby выполняются вышеперечисленные действия. Этот файл необходимо преобразовать в исполняемый при помощи выполнения команды:

chmod a+x pres.rb

Программа запускается в командной строке со следующими параметрами:

pres.rb

Согласно этому коду предполагается, что презентация и код программы располагаются в различных папках. Поэтому, где-бы не располагался ваш код, убедитесь, что при выполнении команды вы добавили путь к презентации.

Форматирование при помощи CSS

После преобразования основного количества кода Markdown в HTML-формат следующий этап – отформатировать слайды. Для создания необходимых стилей добавьте следующий код в раздел с заголовком файла presbegin.html:

Первая часть – код для сбрасывания значений стилей, взятый из MeyerWeb Reset. Когда бы вы ни работали с HTML и CSS, должен использоваться код для сбрасывания значений стилей, чтобы нивелировать различия в значениях свойств, имеющиеся в разных браузерах. Это относится к устоявшейся практике при создании дизайна.

Вторая часть – стили, необходимые для вывода слайдов на экран, выравнивания текста по центру, базового упорядочения и форматирования изображений, а также основные стилевые правила для фонового изображения.

В качестве значения размера экрана я установил 1200x640 px, что замечательно подходит для экрана моего Macbook Air 11". Вы можете изменить его на любой другой, который вам лучше всего подходит.

Теперь создаем файл с темой. Создайте файл под названием Basic.css  и поместите в него следующий код:

Это базовая тема, которую вы можете использовать для создания ваших собственных тем. Этот файл темы будет скопирован в папку, где располагается презентация, и переименован на theme.css. Это тот файл, который загружается программой для создания слайд-шоу.

Для добавления дополнительного стилевого оформления к изображениям создайте класс в CSS-файле для темы. Добавьте название этого класса в качестве альтернативного текста для изображения. Таким образом, код для добавления изображения с классом background выглядел бы следующим образом:

Добавляем JavaScript

Чтобы веб-страница загружалась максимально быстро, файлы JavaScript должны располагаться внизу страницы. Поэтому в presend.html добавьте следующий код прямо перед закрывающим тегом body:

В этом коде загружается Mousetrap (* библиотека для облегчения работы с клавишными комбинация быстрого вызова в Javascript) для контролирования слайд-шоу и jQuery для выполнения переходов. Для контролирования слайд-шоу используются две глобальные переменные: slideNum и duration (* длительность). В slideNum хранится номер текущего слайда, а при помощи duration устанавливается значение скорости перехода. Чем меньше длительность, тем быстрее меняются слайды.

Далее определяются три функции: nextSlide(), prevSlide() и beginSlide(). За счет этих функций у пользователя имеется возможность перейти к следующему слайду, предыдущему слайду и к первому слайду соответственно.

После этих функций я воспользовался зацепкой (* место в программе, куда можно подсоединить дополнительный код (обычно для расширения её функциональных возможностей); специальная процедура, отслеживающая появление некоторого события) для функции jQuery ready, при помощи которой код выполняется после того, как все загружено в браузер. Как только все загружено, все слайды скрываются и только первый слайд отображается. Затем клавиша с левой стрелкой привязывается к функции prevSlide(), клавиша с правой стрелкой привязывается к функции nextSlide() и клавиша b привязывается к функции beginSlide().

В коде вы заметите глобальную переменную window.MaxSlideNum. При помощи кода Ruby для создания слайдов задается значение этой переменной в HTML-коде, сгенерированном для презентации слайдов. При помощи нее функции узнают, сколько слайдов находится в этой презентации.

Как еще можно использовать скрипт

Хотя вполне можно использовать программу для командной строки, это неудобно. В руководстве Writing Dropzone 3 Actions объясняется, как запрограммировать Dropzone 3 на выполнение определенных действий. Следуйте инструкциям, данным в том руководстве, чтобы добавить новое действие для Dropzone 3 при помощи следующего кода:

После добавления загрузите действие в Dropzone 3. После перетаскивания файла в формате Markdown в область сброса (* drop zone; область рабочего пространства, в которую может быть отбуксирован объект, перемещаемый с использованием операции drag-and-drop) будет создана презентация в той же самой папке (* в которой располагается файл в формате Markdown).

Dropzone 3 ActionDropzone 3 ActionDropzone 3 Action
Действие Dropzone 3

Поскольку Dropzone 3 отлично подходит для перетаскивания множества элементов в область сброса, то вы можете создать множество презентаций за раз. Просто соберите файлы в Drop Bar. Затем переместите их в область сброса для конвертации. За счет выбора необходимого действия вы сможете выбрать необходимую вам тему. Весь код для действия Dropzone 3 добавлен к прикрепленным файлам.

Markdown to Presentation Alfred WorkflowMarkdown to Presentation Alfred WorkflowMarkdown to Presentation Alfred Workflow
Alfred Workflow для выполнения преобразования кода Markdown в презентацию

Созданный нами в этом руководстве скрипт также может быть добавлен в качестве Alfred Workflow (* Alfred – приложение для повышения продуктивности пользователя при работе с Mac; workflow – поток заданий). Весь код для потока заданий добавлен к прикрепленным файлам. При помощи команды mds:theme вы можете выбрать необходимую вам тему. При выполнении команды mds:showtheme в оповещении будет показана установленная в данный момент тема. Вы можете использовать Alfred Browser для просмотра файла в формате Markdown. После нажатия правой клавишей по файлу вы можете выбрать команду Markdown to Slides для создания презентации.

Deckset выполняет все это

Если вам оказалось полезным это руководство, то, возможно, вы захотели бы ознакомиться с Deckset.

Deckset Markdown to PresentationDeckset Markdown to PresentationDeckset Markdown to Presentation
Демонстрация выполнения преобразования кода Markdown в презентацию при помощи Deckset

Deckset принимает файл в формате Markdown и конвертирует его в слайд-шоу. Это приложение предлагает больше функциональных возможностей, чем мы реализовали в этом руководстве. Также в нем доступно множество замечательных тем.

Заключение

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

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Computer Skills tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.