() translation by (you can also view the original English article)
मार्कडाउन (Markdown) टेक्स्ट स्वरूपण (फ़ॉर्मेटिंग) ने नोट लेने में क्रांतिकारी परिवर्तन किया है। यह लिखी गई बातों को बिना कूड़ाई के स्वरूपित करने का एक तरीका देता है। अब वह पल आ गया जब आपको अपने नोट्स के आधार पर प्रस्तुति बनाने की जरूरत है। अपने नोट्स से अपनी प्रस्तुति (प्रेज़न्टेशन) बनाने के लिए आपको एक प्रभावी और आसान तरीका चाहिए। इस ट्यूटोरियल में, मैं आपको दिखाता हूँ कि कैसे मार्कडाउन नोट्स से एक HTML स्लाइड शो बनाये।
मार्कडाउन से HTML
एक रेंडरिंग प्रोग्राम एक प्रोग्राम है जो मार्कडाउन (markdown) लेता है और इसे किसी दूसरे प्रारूप (फॉर्मैट) में अनुवादित करता है। मैंने सबसे अच्छा रेंडरर का इस्तेमाल किया है, क्रैमडाउन (Kramdown)। क्रैमडाउन (Kramdown) एक रूबी (Ruby) प्रोग्राम है जो टेक्स्ट को एक प्रारूप (फॉर्मैट) में लेता है और इसे दूसरे में अनुवाद करता है। यह मार्क्डाउन से एचटीएमएल (HTML) पर डिफ़ॉल्ट है।
चूंकि रूबी (Ruby) सभी मैक पर पहले से स्थापित है, इसलिए क्रैमडॉन स्थापित करना आसान है। क्रैमडॉन (Kramdown) को स्थापित करने के लिए, एक टर्मिनल (Terminal) खोलें और टाइप करें:
sudo gem install kramdown
एक बार स्थापित होने पर, क्रामडाउन (kramdown) कमांड उपयोग करने योग्य है। एक उदाहरण के रूप में, 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) प्रोग्राम केवल मान्य HTML को दिए गए मार्कडाउन का अनुवाद करता है। यह हेडर (header) और शरीर (body) अनुभागों के साथ ठीक तरह से स्वरूपित (फॉर्मैट) एचटीएमएल (HTML) का पूरा पृष्ठ बनाने की कोशिश नहीं करता है। मार्कडाउन से एक स्लाइड शो बनाने के लिए यह महत्वपूर्ण है। प्रत्येक स्लाइड के लिए, दी गई सामग्री के HTML जेनरेट किया जाए और कुछ अतिरिक्त नहीं जेनरेट होगा। स्लाइड शो पेज के लिए स्लाइडों को मुख्य 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 पृष्ठ नहीं है। HTML के शरीर (बाडी) में तीन divs हैं: container div, section0 div, और एक slide div। container div में पूरे स्लाइड शो होते हैं।
कंटेनर (container) के अंदर section0 div है और इसकी slide div है।प्रत्येक स्लाइड अनुभाग में सभी वर्गों को प्रारूपित (फॉर्मैट) करने में मदद करते हैं, जबकि व्यक्तिगत स्लाइड उस स्लाइड के लिए स्वरूपण (फॉर्मैटिंग) रखता है।
समापन समान होगा। presend.html नामक फ़ाइल बनाएं और निम्न कोड डालें:
1 |
</div>
|
2 |
<div>
|
3 |
</body>
|
4 |
</html>
|
बहुत ज्यादा नहीं! यह अंतिम स्लाइड के divs और body और HTML (एचटीएमएल) टैग्स को बंद कर देता है।
मार्कडाउन नोट्स में आवश्यक केवल विशेष स्वरूपण किसी भी चित्र के लिए है और प्रत्येक स्लाइड के अंत के विवरण के लिए है। चूंकि मार्कडाउन में चित्रों के लिए एक ऐंगकर प्रकार है, इसलिए उस टैग को एक अंतर के साथ प्रयोग किया जाता है: चित्र के लिए एक पाठ विवरण देने के बजाय, उस क्षेत्र में चित्र को संलग्न (अटैच) करने के लिए क्लैस (classes) का वर्णन होगा। साथ ही, क्षैतिज (हॉरिज़ान्टल) नियमों के लिए मार्कडाउन कोड का इस्तेमाल स्लाइड्स को अलग करने के लिए किया जाता है।
इसलिए, स्लाइड शो बनाने का मूल सूत्र है: presbegin.html की प्रतिलिपि (कापी) बनाएँ, मार्कडाउन से HTML उत्पन्न करें, सभी <hr /> टैग का अनुवाद </div></div><div id='section1' class='section'><div class='slide'></code> जैसा करें, सभी चित्र टैग के क्लास के रूप में subtext का उपयोग करने के लिए उन्हें ठीक करें, और 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) कोड बताए चीज़ें अनुसार क्रिया करता है। प्रोग्रैम फ़ाइल को इसके साथ निष्पादन (executable) योग्य बनाना होगा:
chmod a+x pres.rb
प्रोग्राम को निम्न कमांड लाइन के साथ प्रयोग किया जाता है:
pres.rb <name of markdown file>< theme name>
यह कोड मान रहा है कि प्रस्तुतिकरण (प्रेज़न्टेशन) कोड के समान (वही) डिरेक्टरी में नहीं है। इसलिए, जहां भी आपके पास कोड है, सुनिश्चित करें कि आप इसे अपने पाथ (path) में जोड़ दें।
सीएसएस (CSS) के साथ प्रारूपण (फॉर्मैटिंग)
एचटीएमएल (HTML) के लिए मार्कडाउन फ़ाइल के थोक अनुवाद के साथ, अगले चरण में स्लाइडों को प्रारूपित करना है। आवश्यक शैलियों को बनाने के लिए, इस कोड को presbegin.html फ़ाइल के शीर्ष लेख के अनुभाग में जोड़ें:
1 |
<style type="text/css"> |
2 |
|
3 |
/* http://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) का पहला भाग रीसेट स्क्रिप्ट है I जब भी एचटीएमएल (HTML) और सीएसएस (CSS) के साथ काम करते हैं, तो एक रीसेट स्क्रिप्ट का उपयोग प्रत्येक ब्राउज़र को एक ही एक ही स्थिति पर रखने के लिए किया जाना चाहिए। यह अच्छा डिजाइन अभ्यास हैI
दूसरे भाग में वह शैलिया (स्टाइल) हैं जो स्लाइड्स को स्क्रीन पर आने के लिए आवश्यक है, टेक्स्ट को केंद्र संरेखित (centered) करने के लिए, चित्रों के लिए बुनियादी क्रम और स्वरूपण (फॉर्मैटिंग), और एक पृष्ठभूमि चित्र (बैक्ग्राउन्ड इमिज) के लिए बुनियादी सेटअप।
मैंने स्क्रीन साइज़ को 1200x640 पिक्सेल पर सेट किया है जो मेरी मैकबुक एयर 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 |
} |
यह एक बुनियादी विषय है जिसका उपयोग आप अपनी खुद की थीम बनाने के लिए कर सकते हैं। यह थीम फ़ाइल प्रेज़न्टेशन डिरेक्टरी (presentation directory) में प्रतिलिपि (कापी) बनाई जाएगी और इसका नाम बदलकर theme.css किया जाएगा। यह स्लाइड शो द्वारा लोड की गई फ़ाइल है।
चित्रों को अतिरिक्त स्टाइल जोड़ने के लिए, थीम की सीएसएस फ़ाइल में क्लास टैग बनाएं। चित्र के लिए उस क्लास टैग को टेक्स्ट से जोड़ें। इसलिए, एक पृष्ठभूमि (बैक्ग्राउन्ड) चित्र वाला टैग ऐसा दिखेगा:
1 |
 |
जावास्क्रिप्ट (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) में यह कोड लोड होता है और ट्रैन्ज़िशन करने के लिए जेक्वेरी (jQuery)। स्लाइड शो को नियंत्रित करने के लिए दो वैश्विक (ग्लोबल) चर (वेरीअबल) का उपयोग किया जाता है: slideNum और duration। slideNum वर्तमान स्लाइड की संख्या है, और duration परिवर्तन की गति को परिभाषित करती है। जितने कम अवधि (duration), उतना ही तेज स्लाइडस बदलते हैं।
अगले तीन फ़ंक्शंस को परिभाषित किया जाता है: nextSlide(), prevSlide(), और beginSlide()। ये फ़ंक्शंस उपयोगकर्ता को अगले स्लाइड, पिछली स्लाइड, और क्रमशः पहली स्लाइड पर जाने की अनुमति देती है।
फ़ंक्शन के बाद, मैंने jQuery ready (रेडी) फ़ंक्शन के लिए एक हुक का उपयोग किया था जो कि सभी चीजों को ब्राउजर में लोड होने के बाद कोड को प्रोसेस करता है। सब कुछ लोड होने पर, सभी स्लाइड्स छिपाई जाती हैं और केवल पहली स्लाइड दिखाई देती है। फिर बायां ऐरो की (left arrow key) prevSlide() फ़ंक्शन के लिए बाध्य है, दाहिनी ऐरो की (right arrow key) nextSlide () फ़ंक्शन के लिए बाध्य है, और बी की (b key) startSlide () फ़ंक्शन के लिए बाध्य है।
कोड में, आप window.MaxSlideNum ग्लोबल वैरिएबल देखेंगे। स्लाइड्स बनाने के लिए रूबी (ruby) कोड स्लाइड प्रेज़न्टेशन (प्रस्तुति) के लिए जेनरेट किए गए HTML के अंदर इस वैरिएबल को सेट करता है। यह कन्ट्रोलिंग फंगक्शन को बताता है की इस प्रेज़न्टेशन में कितने स्लाइड्स हैं।
स्क्रिप्ट का उपयोग करने के अन्य तरीके
कमांड लाइन प्रोग्राम का उपयोग करना संभव है, यह सुविधाजनक नहीं है। ट्यूटोरियल, ड्रॉपज़ोन 3 का ऐक्शन लेखन (Writing Dropzone 3 Actions), दिखाता है कि कैसे एक ड्रॉपज़ोन 3 ऐक्शन बनाए। निम्न कोड के साथ एक नया ड्रॉपज़ोन 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
|
एक बार बनाने के बाद, ऐक्शन को ड्रॉपजोन 3 (Dropzone 3) में लोड करें। जब ज़ोन पर एक मार्कडाउन (markdown) फ़ाइल गिरा दी जाती है, तो वह उसी डिरेक्टरी में प्रेज़न्टेशन का निर्माण करेगी।
चूंकि ड्रॉपजोन 3 (Dropzone 3) कई आइटम छोड़ने के लिए महान है, इसलिए आप एक बार में बहुत से प्रेज़न्टेशन बना सकते हैं। बस ड्रॉप बार (Drop Bar) में फ़ाइलों को इकट्ठा करें। फिर उन्हें बदलने के लिए ड्रॉपज़ोन पर ले जाएं। ऐक्शन को क्लिक करने से आप किस थीम का उपयोग कर सकेंगे आप यह तय कर सकते हैं। पूर्ण ड्रॉपज़ोन 3 (Dropzone 3) ऐक्शन डाउनलोड में शामिल है।
यह एक अल्फ्रेड वर्कफ़्लो (Alfred Workflow) में भी बनाया जा सकता है।पूरा वर्कफ़्लो डाउनलोड में शामिल है। mds:theme कमांड आपको उपयोग करने के लिए थीम का चयन करने की अनुमति देता है।mds:showtheme एक नोटिफिकेशन में वर्तमान सेट थीम का नाम दिखाएगा। आप एक मार्कडाउन फ़ाइल देखने के लिए अल्फ्रेड ब्राउज़र (Alfred Browser) का उपयोग कर सकते हैं। जब आप फ़ाइल पर दायां एरो (right arrow) दबाते हैं, तो आप प्रेज़न्टेशन को बनाने के लिए मार्कडाउन से स्लाइड (Markdown to Slides) कमांड का चयन कर सकते हैं।
डेकसेट (Deckset) यह सब करता है
यदि आप इस प्रोग्राम को उपयोगी पाते हैं, तो आप डेकसेट (Deckset) की भी जांच कर सकते हैं।
डेकसेट (Deckset) एक मार्कडाउन (markdown) फ़ाइल लेता है और इसे एक स्लाइड शो में परिवर्तित करता है। इस ट्यूटोरियल में प्रस्तुत की गयी चीजों की तुलना में इसकी अधिक कार्यक्षमता है। इसमें उपयोग करने के लिए कई महान थीम भी हैं।
निष्कर्ष
समय हमेशा एक प्रीमियम पर होता है, प्रेज़न्टेशन के आधार के रूप में नोट्स का उपयोग करना महान है। अब जब आपके पास उपकरण हैं, तो जाएं और कुछ महान प्रेज़न्टेशन बनाए। यह कोड बहुत ही मूल है और सुधार के लिए बहुत सारे जगह हैं। यदि आपके पास इस कोड के लिए परिवर्तन या नए थीम हैं, तो कृपया उन्हें आगे पास करें।
