Grunt task that generates Shower presentations from Markdown source
Installation
This plugin requires Grunt 0.4.
Install
grunt-shower-markdown:
``
npm install grunt-shower-markdown --save-dev
`
Add somewhere in your Gruntfile.js
:
`
javascript
grunt.loadNpmTasks('grunt-shower-markdown');
`
Add a section named shower
into your Gruntfile.js
file. See Parameters section below for details.
Parameters
$3
Title of presentation (used in <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> tag).
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Path of source Markdown file.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Path of result HTML file.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Language of presentation.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Path where theme of presentation is located.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />List of CSS files specific to your presentation.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />List of JavaScript files specific to your presentation.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Hides progress bar when </code>false<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />Any HTML to put before </code></body><code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">.
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Config Example</h2>
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> javascript
<br />module.exports = function(grunt) {
<br /> grunt.initConfig({
<br /> shower: {
<br /> index: {
<br /> title: 'Test presentation',
<br /> src: 'src/index.md',
<br /> styles: 'src/styles.css'
<br /> scripts: [
<br /> 'libs/highlight.js',
<br /> 'src/scripts.js'
<br /> ]
<br /> }
<br /> },
<br /> watch: {
<br /> shower: {
<br /> files: 'src/*',
<br /> tasks: 'shower'
<br /> }
<br /> }
<br /> });
<br />
<br /> grunt.loadNpmTasks('grunt-shower-markdown');
<br />
<br /> grunt.registerTask('default', 'shower');
<br />};
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Presentation markup</h2>
<br />
<br /> # Presentation Title
<br />
<br /> <a href="http://sapegin.me" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Author</a> and any other content to show above slides.
<br />
<br /> !SLIDE #SlideID class1 class2
<br />
<br /> ## Slide Title
<br />
<br /> !<a href="pictures/pic.png" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Image</a>
<br />
<br /> <p class="note">Some HTML</p>
<br />
<br /> - List item one
<br /> -? Two (delayed)
<br /> -? Three (delayed)
<br />
<br /> !SLIDE #Cover shoot
<br />
<br /> ## Hello world!
<br />
<br /> !SLIDE
<br />
<br /> ## Code example
<br />
<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br /> @@concat@@: {
<br /> main: {
<br /> text: @@@'Hello world'@@@
<br /> }
<br /> }
<br /> </code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Markdown extensions</h2>
<br />
<br />grunt-shower-markdown uses <a href="http://github.github.com/github-flavored-markdown/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">GitHub flavored Markdown</a> with some extenstions.
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />If you want to delay display of list items, put </code>?<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> after list marker:
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />- One
<br />-? Two (delayed)
<br />-? Three (delayed)
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />You can highlight important parts of presentation using </code>@@text@@<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (important) and </code>@@@text@@@<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"> (very important):
<br />
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />@@concat@@: {
<br /> main: {
<br /> text: @@@'Hello world'@@@
<br /> }
<br />}
<br /></code>`<code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">Release History</h2>
<br />
<br /><h3 class="text-lg font-medium mt-4 mb-2">$3</h3>
<br />
<br />* Grunt 0.4 support.
<br />
<br />
<br />---
<br />
<br /><h2 class="text-xl font-semibold mt-5 mb-3">License</h2>
<br />
<br />The MIT License, see the included </code>License.md` file.
<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"23:[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1\",\"children\":[[\"$\",\"$L5\",\"grunt\",{\"href\":\"/package/grunt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.4.0\"}]]}]]}]}]\n"])</script><script>self.__next_f.push([1,"24:[\"$\",\"div\",null,{\"data-slot\":\"card\",\"className\":\"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border shadow-sm py-4 lg:col-span-2\",\"children\":[[\"$\",\"div\",null,{\"data-slot\":\"card-header\",\"className\":\"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 pb-2\",\"children\":[\"$\",\"div\",null,{\"data-slot\":\"card-title\",\"className\":\"font-semibold flex items-center gap-2 text-base\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-wrench h-4 w-4\",\"children\":[[\"$\",\"path\",\"cbrjhi\",{\"d\":\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"}],\"$undefined\"]}],\"Dev Dependencies\",[\"$\",\"span\",null,{\"data-slot\":\"badge\",\"className\":\"inline-flex items-center justify-center rounded-md border px-2 py-0.5 font-medium w-fit whitespace-nowrap shrink-0 [\u0026\u003esvg]:size-3 gap-1 [\u0026\u003esvg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden border-transparent bg-secondary text-secondary-foreground [a\u0026]:hover:bg-secondary/90 ml-auto text-xs\",\"children\":6}]]}]}],[\"$\",\"div\",null,{\"data-slot\":\"card-content\",\"className\":\"px-6\",\"children\":[\"$\",\"div\",null,{\"className\":\"grid gap-1 sm:grid-cols-2 lg:grid-cols-3\",\"children\":[[\"$\",\"$L5\",\"grunt\",{\"href\":\"/package/grunt\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.4.2\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-clean\",{\"href\":\"/package/grunt-contrib-clean\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-contrib-clean\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.5.0\"}]]}],[\"$\",\"$L5\",\"grunt-contrib-jshint\",{\"href\":\"/package/grunt-contrib-jshint\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[\"$L26\",\"$undefined\"]}],\"grunt-contrib-jshint\"]}],\"$L27\"]}],\"$L28\",\"$L29\",\"$L2a\"]}]}]]}]\n"])</script><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.8.0\"}]\n28:[\"$\",\"$L5\",\"grunt-jscs-checker\",{\"href\":\"/package/grunt-jscs-checker\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-jscs-checker\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.3.2\"}]]}]\n29:[\"$\",\"$L5\",\"grunt-mocha-test\",{\"href\":\"/package/grunt-mocha-test\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"grunt-mocha-test\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.8.2\"}]]}]\n2a:[\"$\",\"$L5\",\"matchdep\",{\"href\":\"/package/matchdep\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"matchdep\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"~0.3.0\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>