Advertisement
  1. Computer Skills
  2. Markdown

मार्कडाउन नोट्स से एक स्लाइड-शो प्रस्तुति (Slideshow Presentation) कैसे बनाएं

Scroll to top
Read Time: 18 min

Hindi (हिंदी) translation by Satyam Sh. (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
![background](image-01.jpg)

जावास्क्रिप्ट (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) फ़ाइल गिरा दी जाती है, तो वह उसी डिरेक्टरी में प्रेज़न्टेशन का निर्माण करेगी।

Dropzone 3 ActionDropzone 3 ActionDropzone 3 Action
ड्रॉपज़ोन 3 एक्शन

चूंकि ड्रॉपजोन 3 (Dropzone 3) कई आइटम छोड़ने के लिए महान है, इसलिए आप एक बार में बहुत से प्रेज़न्टेशन बना सकते हैं। बस ड्रॉप बार (Drop Bar) में फ़ाइलों को इकट्ठा करें।  फिर उन्हें बदलने के लिए ड्रॉपज़ोन पर ले जाएं। ऐक्शन को क्लिक करने से आप किस थीम का उपयोग कर सकेंगे आप यह तय कर सकते हैं।  पूर्ण ड्रॉपज़ोन 3 (Dropzone 3) ऐक्शन डाउनलोड में शामिल है।

Markdown to Presentation Alfred WorkflowMarkdown to Presentation Alfred WorkflowMarkdown to Presentation Alfred Workflow
मार्कडाउन से प्रेज़न्टेशन अल्फ्रेड वर्कफ़्लो 

यह एक अल्फ्रेड वर्कफ़्लो (Alfred Workflow) में भी बनाया जा सकता है।पूरा वर्कफ़्लो डाउनलोड में शामिल है। mds:theme कमांड आपको उपयोग करने के लिए थीम का चयन करने की अनुमति देता है।mds:showtheme एक नोटिफिकेशन में वर्तमान सेट थीम का नाम दिखाएगा।  आप एक मार्कडाउन फ़ाइल देखने के लिए अल्फ्रेड ब्राउज़र (Alfred Browser) का उपयोग कर सकते हैं। जब आप फ़ाइल पर दायां एरो (right arrow) दबाते हैं, तो आप प्रेज़न्टेशन को बनाने के लिए मार्कडाउन से स्लाइड (Markdown to Slides) कमांड का चयन कर सकते हैं।

डेकसेट (Deckset) यह सब करता है 

यदि आप इस प्रोग्राम को उपयोगी पाते हैं, तो आप डेकसेट (Deckset) की भी जांच कर सकते हैं। 

Deckset Markdown to PresentationDeckset Markdown to PresentationDeckset Markdown to Presentation
डेकसेट मार्कडाउन (Deckset Markdown) से प्रेज़न्टेशन

डेकसेट (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.