Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Computer Skills
  2. Markdown
Computers

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

by
Difficulty:IntermediateLength:LongLanguages:

Ukrainian (українська мова) 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, перетворити всі теги  <hr/> у  </div> </div> <div id='section1' class='section'> <div class='slide'>, замінити всі теги для зображення так, щоб замість альтернативного тексту використовувалися класи, та скопіювати presend.html.

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

За допомогою цього коду Ruby виконуються вищезазначені дії. Цей файл потрібно перетворити у виконуваний за допомогою виконання команди:

chmod a+x pres.rb

Програма запускається у командному рядку з наступними параметрами:

pres.rb  name of markdown file>  theme name>

Згідно з цим кодом припускається, що презентація та код програми розташовуються у різних папках. Тому, де б не розташовувався ваш код, впевніться, що при виконанні команди ви додали шлях до презентації.

Форматування за допомогою 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 до області скидання (* зона скидання; область робочого простору, до якої може бути відбуксовано об'єкт, що переміщується з використанням операції drag-and-drop) буде створено презентацію у тій самій папці (* у якій розташовується файл у форматі Markdown) .

Dropzone 3 Action
Дія Dropzone 3

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

Markdown 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 Presentation
Демонстрація виконання перетворення коду Markdown у презентацію за допомогою Deckset

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

Завершення

Оскільки часу завжди приділяється особлива увага, то чудово, якщо ви маєте можливість скористатися записами у якості основи для створення презентації. Тепер, коли ви маєте в руках інструменти, вперед, створіть будь-які чудові презентації. За допомогою коду, який створили у цьому посібнику, реалізовано тільки головні можливості, і багато ще можна покращити. Якщо ви можете запропонувати зміни для коду або нові теми, то, будь ласка, поділіться з нами.

Advertisement
Advertisement
Advertisement
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.