grunt-strapdown

Compile markdown into html using strapdown.js.

grunt-strapdown

grunt task for strapdown.js

This grunt task does a very stupid thing: it takes a set of markdown files and inserts each of them into a html template, where strapdown.js takes care of all the rest (the parsing and the styling).

For example, this markdown file xxx.md:

I Am So Hungry
I am so hungry i can eat an elephant.

will be converted into a xxx.html:

<!DOCTYPE html>
<html>
<title>a</title>
<body>
<xmp theme="cyborg" style="display:none;">
# I Am So Hungry
I am so hungry i can eat an elephant.
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</body>
</html>

(Something looks different about that </xmp> closing tag, see FAQ below.)

Drop this xxx.html into any static web server and open it from the browser, and strapdown.js will parse and style the markdown text for you.

Install this plugin:

npm install --save-dev grunt-markdown

Then enable it in your Gruntfile:

grunt.loadNpmTasks('grunt-strapdown');

Here's an example config in coffeescript:

grunt.initConfig
  strapdown:
    all:
      src: ['src/**/*.md']
      dest: 'htdocs'
      theme: 'cyborg'

You can run this task with grunt strapdown.

Follow the example config above, these are the options that the strapdown task accepts:

  • src: required, pattern(s) to match markdown files.
  • dest: required, the directory where generated html files will be stored in.
  • theme: optional, defaults to 'cyborg'. See here for strapdown's bulitin themes and see bootswatch for more.
  1. So what my markdown file didn't get parsed, it's just inserted right into the middle of a html template?

    Yes.

  2. And then when I open the html from the browser, that <script src="http://strapdownjs.com/v/0.2/strapdown.js"> tag is gonna get downloaded, and it's gonna do the parsing and styling for me?

    Yes.

  3. So i have to download a js file from somewhere else, that sounds weird and slow, why can't i just host that js file on my own server?

    You can, but it's a little bit more complicated, because strapdown.js is not just a js file. In order to parse and style the markdown text, this js file will dynamiclly load some other js/css files from strapdownjs.com. So you can't just host that single js file, you need to host all those other js/css files on your server, e.g. you need to clone this repo github.com/arturadib/strapdown.

    (And also in this version the template path is not yet configurable.)

  4. Oh, what about </xmp> tag in the example? That 'x' looks different.

    It's not the letter 'x', it's the multiplication sign '×'(wiki). Quote from strapdown.js:

    Limitations:

    It's an unlikely scenario, but since Strapdown uses the <xmp> tag to wrap your Markdown (so that users don't have to escape special HTML characters), your text can't contain the string </xmp>.

    That's why the 'x's are replaced by grunt-strapdown before the insertion into html.

  5. What's your favorite number?

MIT license, see LICENSE.