() translation by (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:
1 |
# This is a header |
2 |
|
3 |
- Bullet item |
4 |
- Another bullet item |
5 |
|
6 |
Just some text. |
В командной строке выполните:
kramdown test.md > test.html
В результате будет создан файл test.html со следующим контентом:
1 |
<h1 id="this-is-a-header">This is a header</h1> |
2 |
|
3 |
<ul>
|
4 |
<li>Bullet item</li> |
5 |
<li>Another bullet item</li> |
6 |
</ul>
|
7 |
|
8 |
<p>Just some text.</p> |
Программа kramdown преобразует только предоставленный текст в формате Markdown в корректный HTML-код. Она не пытается создать целый документ с корректно отформатированным кодом HTML, в котором имеются разделы заголовка и тела. Это важно учитывать при создании слайд-шоу из текста в формате Markdown. Для каждого слайда будет сгенерирован HTML-код, соответствующий предоставленному контенту, и ничего более. Запросто можно обернуть слайды внутри базовой разметки для страницы со слайд-шоу.
Базовая разметка для слайд-шоу, реализуемого при помощи HTML
У страницы со слайд-шоу имеется начальная разметка HTML, HTML-код для слайдов и конечную разметку HTML. Начальный и конечный разделы копируются, а HTML-код слайдов создается при помощи kramdown с некоторыми дополнительными изменениями с нашей стороны.
Создайте файл под названием presbegin.html со следующим кодом:
1 |
<!DOCTYPE html>
|
2 |
<html>
|
3 |
<head>
|
4 |
<title>Slide Show</title> |
5 |
</head>
|
6 |
<body>
|
7 |
<div id="container"> |
8 |
<div id='section0' class='section'> |
9 |
|
10 |
<div class='slide'> |
Это начало страницы со слайд-шоу. Это не полная HTML-страница. В теле документа располагаются три элемента div: div с классом container, div с классом section0 и div с классом slide. div с классом container содержит все слайд-шоу.
Внутри этого контейнера располагается div с классом section0 и его дочерний элемент div с классом slide. Разделы (* например section0) помогают форматировать все содержимое каждого раздела для слайда, а при помощи отдельного слайда (* slide) задается форматирование для этого слайда.
Конец страницы со слайд-шоу будет подобным. Создайте файл под названием presend.html и добавьте туда следующий код:
1 |
</div>
|
2 |
<div>
|
3 |
</body>
|
4 |
</html>
|
Тут кода не много! Здесь добавляются закрывающие теги для элементов div последнего слайда и элементов body и html.
Единственное специальное форматирование, которое необходимо добавить для заметок в формате Markdown, – то, которое используется для любых изображений и установления конца каждого слайда. Поскольку в Markdown для добавления изображений используется код, при помощи которого создаются ссылки на другие ресурсы, то он и используется с одним отличием: вместо размещения текстового описания для изображения в определенном месте (* [...]), оно будет использоваться для описания классов, которые необходимо добавить к изображению. Также код Markdown для добавления горизонтальной линии используется для разделения слайдов.
Таким образом, базовый план для создания слайд-шоу следующий: скопировать presbegin.html, сгенерировать HTML-код из кода в формате Markdown, преобразовать все теги в , поменять все теги для изображения так, чтобы вместо альтернативного текста использовались классы, и скопировать presend.html.
Создайте новый файл под названием pres.rb и добавьте в него следующий код:
1 |
#!/usr/bin/ruby
|
2 |
#
|
3 |
# Set some variables.
|
4 |
#
|
5 |
require("FileUtils") |
6 |
|
7 |
$presDir = "" |
8 |
pressBaseDir = File.dirname(__FILE__) |
9 |
theme = ARGV[1] |
10 |
|
11 |
#
|
12 |
# Get the slide presentation parts loaded.
|
13 |
#
|
14 |
presBegin = `cat '#{pressBaseDir}/presbegin.html'` |
15 |
presEnd = `cat '#{pressBaseDir}/presend.html'` |
16 |
|
17 |
#
|
18 |
# Get the directory of the presentation.
|
19 |
#
|
20 |
$presDir = File.dirname(ARGV[0]) |
21 |
|
22 |
#
|
23 |
# Convert the Markdown to HTML.
|
24 |
#
|
25 |
presTextHTML = `cat '#{ARGV[0]}' | kramdown` |
26 |
|
27 |
#
|
28 |
# Convert the horizontal rules to the divs we need.
|
29 |
#
|
30 |
$divCount = 1 |
31 |
while presTextHTML.sub!(/\<hr \/\>/, "</div></div><div id='section#{$divCount}' class='section'><div class='slide'>") != nil do |
32 |
$divCount = $divCount + 1 |
33 |
end
|
34 |
$divCount = $divCount -1 |
35 |
|
36 |
|
37 |
#
|
38 |
# Make sure the last div gets closed.
|
39 |
#
|
40 |
presTextHTML += "</div>"; |
41 |
|
42 |
#
|
43 |
# Fix all images to be on it's own after the slide div.
|
44 |
#
|
45 |
m = /\<p\>\<img src\=\"(.*)\" alt\=\"(.*)\" \/\>\<\/p\>/.match(presTextHTML) |
46 |
if m != nil |
47 |
postMatch = "" |
48 |
presTextHTML = "" |
49 |
while m != nil |
50 |
presTextHTML += m.pre_match |
51 |
presTextHTML += "<img src='#{m[1]}' class='#{m[2]}' />" |
52 |
postMatch = m.post_match |
53 |
m = /\<p\>\<img src\=\"(.*)\" alt\=\"(.*)\" \/\>\<\/p\>/.match(m.post_match) |
54 |
end
|
55 |
presTextHTML += postMatch |
56 |
end
|
57 |
presTextHTML += "<script> window.MaxSlideNum = #{$divCount}; </script>" |
58 |
|
59 |
#
|
60 |
# Write the HTML to an index.html file in that directory.
|
61 |
#
|
62 |
target = open("#{$presDir}/index.html", 'w') |
63 |
target.truncate(0) |
64 |
target.write(presBegin + presTextHTML + presEnd) |
65 |
target.close |
66 |
|
67 |
#
|
68 |
# Copy the CSS file to that directory and rename it to theme.css.
|
69 |
#
|
70 |
FileUtils.cp("#{pressBaseDir}/#{theme}.css",$presDir) |
71 |
File.rename("#{$presDir}/#{theme}.css","#{$presDir}/theme.css") |
При помощи этого кода Ruby выполняются вышеперечисленные действия. Этот файл необходимо преобразовать в исполняемый при помощи выполнения команды:
chmod a+x pres.rb
Программа запускается в командной строке со следующими параметрами:
pres.rb
Согласно этому коду предполагается, что презентация и код программы располагаются в различных папках. Поэтому, где-бы не располагался ваш код, убедитесь, что при выполнении команды вы добавили путь к презентации.
Форматирование при помощи CSS
После преобразования основного количества кода Markdown в HTML-формат следующий этап – отформатировать слайды. Для создания необходимых стилей добавьте следующий код в раздел с заголовком файла presbegin.html:
1 |
<style type="text/css"> |
2 |
|
3 |
/* https://meyerweb.com/eric/tools/css/reset/
|
4 |
v2.0 | 20110126
|
5 |
License: none (public domain)
|
6 |
*/
|
7 |
|
8 |
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { |
9 |
margin: 0; |
10 |
padding: 0; |
11 |
border: 0; |
12 |
font-size: 100%; |
13 |
font: inherit; |
14 |
vertical-align: baseline; |
15 |
}
|
16 |
/* HTML5 display-role reset for older browsers */
|
17 |
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { |
18 |
display: block; |
19 |
}
|
20 |
body { |
21 |
line-height: 1; |
22 |
}
|
23 |
ol, ul { |
24 |
list-style: none; |
25 |
}
|
26 |
blockquote, q { |
27 |
quotes: none; |
28 |
}
|
29 |
blockquote:before, blockquote:after, q:before, q:after { |
30 |
content: ''; |
31 |
content: none; |
32 |
}
|
33 |
table { |
34 |
border-collapse: collapse; |
35 |
border-spacing: 0; |
36 |
}
|
37 |
|
38 |
/********************************************************************************
|
39 |
* CSS for the Slide show. Changing these can effect the running of the slideshow.
|
40 |
********************************************************************************/
|
41 |
|
42 |
/*
|
43 |
* These styles are for formatting the slides.
|
44 |
*/
|
45 |
|
46 |
body { |
47 |
width : 1200px; |
48 |
height : 640px; |
49 |
}
|
50 |
|
51 |
.slide { |
52 |
display : flex; |
53 |
vertical-align : middle; |
54 |
text-align : center; |
55 |
flex-direction : column; |
56 |
align-self : center; |
57 |
align-items : center; |
58 |
align-content : center; |
59 |
justify-content : center; |
60 |
position : absolute; |
61 |
top : 0px; |
62 |
left : 0px; |
63 |
height : 640px; |
64 |
width : 1200px; |
65 |
z-index : 100; |
66 |
}
|
67 |
|
68 |
img.background { |
69 |
height : 640px; |
70 |
width : 1200px; |
71 |
position : absolute; |
72 |
top : 0px; |
73 |
left : 0px; |
74 |
z-index : 1; |
75 |
}
|
76 |
|
77 |
img.left { |
78 |
order: -1; |
79 |
margin-right: auto; |
80 |
}
|
81 |
|
82 |
img.right { |
83 |
order: 100; |
84 |
margin-left: auto; |
85 |
}
|
86 |
|
87 |
img.rounded { |
88 |
border-radius: 10px; |
89 |
}
|
90 |
|
91 |
.slide p, .slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6, .slide span { |
92 |
text-align : center; |
93 |
vertical-align : middle; |
94 |
align-self : center; |
95 |
align-items : center; |
96 |
align-content : center; |
97 |
justify-content: center; |
98 |
margin-bottom : 10px; |
99 |
z-index : 100; |
100 |
}
|
101 |
|
102 |
.section { |
103 |
display : none; |
104 |
top : 0px; |
105 |
left : 0px; |
106 |
}
|
107 |
|
108 |
</style>
|
109 |
<link rel="stylesheet" type="text/css" href="theme.css"> |
Первая часть – код для сбрасывания значений стилей, взятый из MeyerWeb Reset. Когда бы вы ни работали с HTML и CSS, должен использоваться код для сбрасывания значений стилей, чтобы нивелировать различия в значениях свойств, имеющиеся в разных браузерах. Это относится к устоявшейся практике при создании дизайна.
Вторая часть – стили, необходимые для вывода слайдов на экран, выравнивания текста по центру, базового упорядочения и форматирования изображений, а также основные стилевые правила для фонового изображения.
В качестве значения размера экрана я установил 1200x640 px, что замечательно подходит для экрана моего Macbook Air 11". Вы можете изменить его на любой другой, который вам лучше всего подходит.
Теперь создаем файл с темой. Создайте файл под названием Basic.css и поместите в него следующий код:
1 |
/* |
2 |
* Will be the CSS file for the Basic Theme |
3 |
*/ |
4 |
|
5 |
body {
|
6 |
background-color: rgba(79, 150, 200, 0.4); |
7 |
} |
8 |
|
9 |
.slide {
|
10 |
color: rgb(221, 239, 252); |
11 |
background-color: rgba(79, 150, 200, 0.4); |
12 |
} |
13 |
|
14 |
.slide h1, .slide h2, .slide h3, .slide h4, .slide h5, .slide h6, .slide p, .slide ol li, .slide ul li {
|
15 |
font-family: Times; |
16 |
} |
17 |
|
18 |
.background {
|
19 |
opacity : .80; |
20 |
} |
21 |
|
22 |
.slide h1 {
|
23 |
font-size: 10em; |
24 |
} |
25 |
|
26 |
.slide h2 {
|
27 |
font-size: 8em; |
28 |
} |
29 |
|
30 |
.slide h3 {
|
31 |
font-size: 6em; |
32 |
} |
33 |
|
34 |
.slide h4 {
|
35 |
font-size: 4em; |
36 |
} |
37 |
|
38 |
.slide h5 {
|
39 |
font-size: 2em; |
40 |
} |
41 |
|
42 |
.slide h6 {
|
43 |
font-size: 1em; |
44 |
} |
45 |
|
46 |
.slide p {
|
47 |
font-size: 2em; |
48 |
} |
49 |
|
50 |
.slide ol {
|
51 |
list-style: decimal-leading-zero; |
52 |
text-align: left; |
53 |
} |
54 |
|
55 |
.slide ol li {
|
56 |
font-size: 2em; |
57 |
} |
58 |
|
59 |
.slide ul {
|
60 |
list-style: disc; |
61 |
text-align: left; |
62 |
} |
63 |
|
64 |
.slide ul li {
|
65 |
font-size: 2em; |
66 |
} |
Это базовая тема, которую вы можете использовать для создания ваших собственных тем. Этот файл темы будет скопирован в папку, где располагается презентация, и переименован на theme.css. Это тот файл, который загружается программой для создания слайд-шоу.
Для добавления дополнительного стилевого оформления к изображениям создайте класс в CSS-файле для темы. Добавьте название этого класса в качестве альтернативного текста для изображения. Таким образом, код для добавления изображения с классом background выглядел бы следующим образом:
1 |
 |
Добавляем JavaScript
Чтобы веб-страница загружалась максимально быстро, файлы JavaScript должны располагаться внизу страницы. Поэтому в presend.html добавьте следующий код прямо перед закрывающим тегом body:
1 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
2 |
<script src="http://cdn.craig.is/js/mousetrap/mousetrap.min.js?9d308"></script> |
3 |
<script> |
4 |
//
|
5 |
// This is the JavaScript for the slide show.
|
6 |
//
|
7 |
var slideNum = 0; |
8 |
var duration = 800; |
9 |
|
10 |
function nextSlide() { |
11 |
//
|
12 |
// Fade out the current slide.
|
13 |
//
|
14 |
jQuery("#section"+slideNum).fadeOut(duration, function() { |
15 |
//
|
16 |
// Increment the slide number.
|
17 |
//
|
18 |
slideNum++; |
19 |
|
20 |
//
|
21 |
// Check to see if we are at a boundary condition.
|
22 |
//
|
23 |
if(slideNum > (window.MaxSlideNum)) |
24 |
slideNum = window.MaxSlideNum; |
25 |
|
26 |
//
|
27 |
// Fade in the next slide.
|
28 |
//
|
29 |
jQuery("#section"+slideNum).fadeIn(duration); |
30 |
});
|
31 |
}
|
32 |
|
33 |
function prevSlide() { |
34 |
//
|
35 |
// Fade out the current slide.
|
36 |
//
|
37 |
jQuery("#section"+slideNum).fadeOut(duration,function() { |
38 |
//
|
39 |
// decrement the slide number.
|
40 |
//
|
41 |
slideNum--; |
42 |
|
43 |
//
|
44 |
// Check to see if we are at a boundary condition.
|
45 |
//
|
46 |
if(slideNum < 0) |
47 |
slideNum = 0; |
48 |
|
49 |
//
|
50 |
// Fade in the next slide.
|
51 |
//
|
52 |
jQuery("#section"+slideNum).fadeIn(duration); |
53 |
});
|
54 |
}
|
55 |
|
56 |
function beginSlide() { |
57 |
//
|
58 |
// Fade out the current slide.
|
59 |
//
|
60 |
jQuery("#section"+slideNum).fadeOut(duration, function() { |
61 |
//
|
62 |
// Set the slide to the first slide.
|
63 |
//
|
64 |
slideNum = 0; |
65 |
|
66 |
//
|
67 |
// Fade in the next slide.
|
68 |
//
|
69 |
jQuery("#section"+slideNum).fadeIn(duration); |
70 |
});
|
71 |
}
|
72 |
|
73 |
$( document ).ready( function(){ |
74 |
//
|
75 |
// first hide all the slides.
|
76 |
//
|
77 |
jQuery(".section").hide(); |
78 |
|
79 |
//
|
80 |
// Make the first slide viewable.
|
81 |
//
|
82 |
jQuery("#section0").show(); |
83 |
|
84 |
//
|
85 |
// Setup the key bindings for transitioning the slides.
|
86 |
//
|
87 |
Mousetrap.bind('right', function(e) { |
88 |
nextSlide(); |
89 |
});
|
90 |
Mousetrap.bind('left', function(e) { |
91 |
prevSlide(); |
92 |
});
|
93 |
Mousetrap.bind('b', function(e) { |
94 |
beginSlide(); |
95 |
});
|
96 |
});
|
97 |
</script> |
В этом коде загружается 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 при помощи следующего кода:
1 |
# Dropzone Action Info
|
2 |
# Name: MD to HTML Presentation Converter
|
3 |
# Description: Takes a markdown file and converts it to an HTML/CSS presentation in the files directory. It assumes you have kramdown installed locally. To install, go to a commandline and type "sudo gem install kramdown".
|
4 |
# Handles: Files
|
5 |
# Creator: Richard Guay
|
6 |
# URL: http://customct.com
|
7 |
# Events: Clicked, Dragged
|
8 |
# KeyModifiers: Command, Option, Control, Shift
|
9 |
# SkipConfig: No
|
10 |
# RunsSandboxed: Yes
|
11 |
# Version: 1.0
|
12 |
# MinDropzoneVersion: 3.0
|
13 |
|
14 |
#
|
15 |
# Function: dragged
|
16 |
#
|
17 |
# Description: This function is called with Dropzone has files dropped on this action.
|
18 |
# It then processed each given file as a markdown presentation.
|
19 |
#
|
20 |
def dragged |
21 |
#
|
22 |
# Set some variables.
|
23 |
#
|
24 |
$presDir = "" |
25 |
pressBaseDir = File.expand_path(".") |
26 |
presNum = $items.count |
27 |
theme = defined?( ENV['theme'] ) ? ENV['theme'] : "Basic" |
28 |
|
29 |
#
|
30 |
# Tell Dropzone we are starting.
|
31 |
#
|
32 |
$dz.begin("Converting #{presNum} Presentations...") |
33 |
$dz.determinate(true) |
34 |
|
35 |
#
|
36 |
# Get the slide presentation parts loaded.
|
37 |
#
|
38 |
presBegin = `cat '#{pressBaseDir}/presbegin.html'` |
39 |
presEnd = `cat '#{pressBaseDir}/presend.html'` |
40 |
|
41 |
#
|
42 |
# Index over all of the given presentations.
|
43 |
#
|
44 |
for index in 0 ... presNum |
45 |
#
|
46 |
# Get the directory of the presentation.
|
47 |
#
|
48 |
$presDir = File.dirname($items[index]) |
49 |
|
50 |
#
|
51 |
# Convert the Markdown to HTML.
|
52 |
#
|
53 |
presTextHTML = `cat '#{$items[index]}' | kramdown` |
54 |
|
55 |
#
|
56 |
# Convert the horizontal rules to the divs we need.
|
57 |
#
|
58 |
$divCount = 1 |
59 |
while presTextHTML.sub!(/\<hr \/\>/, "</div></div><div id='section#{$divCount}' class='section'><div class='slide'>") != nil do |
60 |
$divCount = $divCount + 1 |
61 |
end
|
62 |
$divCount = $divCount -1 |
63 |
|
64 |
#
|
65 |
# Make sure the last div gets closed.
|
66 |
#
|
67 |
presTextHTML += "</div>"; |
68 |
|
69 |
#
|
70 |
# Fix all images to be on it's own after the slide div.
|
71 |
#
|
72 |
m = /\<p\>\<img src\=\"(.*)\" alt\=\"(.*)\" \/\>\<\/p\>/.match(presTextHTML) |
73 |
if m != nil |
74 |
postMatch = "" |
75 |
presTextHTML = "" |
76 |
while m != nil |
77 |
presTextHTML += m.pre_match |
78 |
presTextHTML += "<img src='#{m[1]}' class='#{m[2]}' />" |
79 |
postMatch = m.post_match |
80 |
m = /\<p\>\<img src\=\"(.*)\" alt\=\"(.*)\" \/\>\<\/p\>/.match(m.post_match) |
81 |
end
|
82 |
presTextHTML += postMatch |
83 |
end
|
84 |
presTextHTML += "<script> window.MaxSlideNum = #{$divCount}; </script>" |
85 |
|
86 |
#
|
87 |
# Write the HTML to an index.html file in that directory.
|
88 |
#
|
89 |
target = open("#{$presDir}/index.html", 'w') |
90 |
target.truncate(0) |
91 |
target.write(presBegin + presTextHTML + presEnd) |
92 |
target.close |
93 |
|
94 |
#
|
95 |
# Copy the CSS file to that directory and rename it to theme.css.
|
96 |
#
|
97 |
FileUtils.cp("#{pressBaseDir}/#{theme}.css",$presDir) |
98 |
File.rename("#{$presDir}/#{theme}.css","#{$presDir}/theme.css") |
99 |
|
100 |
#
|
101 |
# Tell Dropzone what percentage is done.
|
102 |
#
|
103 |
$dz.percent((((index + 1)*100)/presNum).to_i) |
104 |
end
|
105 |
|
106 |
#
|
107 |
# Tell Dropzone that we are done.
|
108 |
#
|
109 |
$dz.finish("All Presentations Made.") |
110 |
|
111 |
# You should always call $dz.url or $dz.text last in your script. The below $dz.text line places text on the clipboard.
|
112 |
# If you don't want to place anything on the clipboard you should still call $dz.url(false)
|
113 |
$dz.url("file://#{$presDir}/index.html") |
114 |
end
|
115 |
|
116 |
def clicked |
117 |
#
|
118 |
# Allow the user to select a theme.
|
119 |
#
|
120 |
theme = "Basic" |
121 |
|
122 |
#
|
123 |
# Show a list of themes.
|
124 |
#
|
125 |
qstr = "standard-dropdown --title \"Compress Files: Graphic Format\" --text \"What Theme?\" --items " |
126 |
themlist = [] |
127 |
i = 0 |
128 |
Dir.glob("*.css") { |filename| |
129 |
filename = File.basename(filename,".css") |
130 |
qstr += "\"#{filename}\" " |
131 |
themlist[i] = filename |
132 |
i += 1 |
133 |
}
|
134 |
button2, index =$dz.cocoa_dialog(qstr).split("\n") |
135 |
index = index.to_i |
136 |
theme = themlist[index] |
137 |
|
138 |
#
|
139 |
# Set the selected theme.
|
140 |
#
|
141 |
$dz.save_value("theme", theme) |
142 |
|
143 |
#
|
144 |
# Tell the user what they selected.
|
145 |
#
|
146 |
$dz.finish("You selected '#{theme}' for your theme.") |
147 |
$dz.url(false) |
148 |
end
|
После добавления загрузите действие в Dropzone 3. После перетаскивания файла в формате Markdown в область сброса (* drop zone; область рабочего пространства, в которую может быть отбуксирован объект, перемещаемый с использованием операции drag-and-drop) будет создана презентация в той же самой папке (* в которой располагается файл в формате Markdown).
Поскольку Dropzone 3 отлично подходит для перетаскивания множества элементов в область сброса, то вы можете создать множество презентаций за раз. Просто соберите файлы в Drop Bar. Затем переместите их в область сброса для конвертации. За счет выбора необходимого действия вы сможете выбрать необходимую вам тему. Весь код для действия Dropzone 3 добавлен к прикрепленным файлам.
Созданный нами в этом руководстве скрипт также может быть добавлен в качестве Alfred Workflow (* Alfred – приложение для повышения продуктивности пользователя при работе с Mac; workflow – поток заданий). Весь код для потока заданий добавлен к прикрепленным файлам. При помощи команды mds:theme вы можете выбрать необходимую вам тему. При выполнении команды mds:showtheme в оповещении будет показана установленная в данный момент тема. Вы можете использовать Alfred Browser для просмотра файла в формате Markdown. После нажатия правой клавишей по файлу вы можете выбрать команду Markdown to Slides для создания презентации.
Deckset выполняет все это
Если вам оказалось полезным это руководство, то, возможно, вы захотели бы ознакомиться с Deckset.
Deckset принимает файл в формате Markdown и конвертирует его в слайд-шоу. Это приложение предлагает больше функциональных возможностей, чем мы реализовали в этом руководстве. Также в нем доступно множество замечательных тем.
Заключение
Поскольку времени всегда уделяется особое внимание, то замечательно, если у вас имеется возможность воспользоваться записями в качестве основы для создания презентации. Теперь, когда у вас в руках имеются инструменты, вперед, создайте какие-нибудь замечательные презентации. При помощи кода, который создали в этом руководстве, реализованы только основные возможности, и многое можно улучшить. Если вы можете предложить изменения для кода или новые темы, то, пожалуйста, поделитесь ими.
