Search code examples
htmlgruntjsmarkdownyeomanassemble

Grunt pre-compile inline markdown


I've been on the hunt for a method of pre-compiling inline markdown with grunt. I chose markdown because, I'm dealing with lots of plain text with simple formatting, but I would not be completely opposed to JSON (or similar).

Here is an example: what I'm looking for:

<body>

    <div id="content">
        <div class="text">
            ## Markdown Headline
            markdown Paragraph 1
        </div>
        <div class="text">
            ## Markdown Headline
            Markdown Paragraph 2
        </div>
    </div>

</body>

Even better would be something like:

<body>

    <div id="content">
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_1}
        </div>
        <div class="text">
            {include: /path/to/markdown_file_1.md:block_2}
        </div>
    </div>

</body>

I'm not looking to create templates from markdown, merely a way of including text, which is then rendered/compiled into html using "grunt build" (or in the case of yeoman, also for "grunt server").

Meaning the above example would compile to something such as...

<body>

    <div id="content">
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Lorem ipsum <b>dolar</b> set <a href="http://amet.com/">amet</a>.
        </div>
        <div class="text">
            <h1>Markdown Headline</h1></p>
            Integer <i>posuere erat a ante</i> venenatis dapibus posuere velit aliquet.
        </div>
    </div>

</body>

Each html page, will be different thus making templates not possible and since I am receiving copy (as markdown files), I thought it would be great if I could "include" markdown in the html and have grunt compile it for me.

I've looked across stackoverflow for a solution and found nothing (perhaps, I'm searching wrong)

I've also looked into the following:


Solution

  • Assemble is awesome for this.

    Write markdown inline with HTML, or just specify any markdown you want in your Grunt config and Assemble will use it. Use the following helpers to convert inline or external markdown to HTML:

    {{md}} helper

    This helper will treat markdown files like includes, and convert the markdown to HTML:

    {{md "path/to/file.md"}}
    

    {{markdown}} block helper

    This is a block helper that enables you to write markdown inline with HTML:

    {{#markdown}}
    # Foo
    > This is markdown
    {{/markdown}}
    

    The beauty of this approach is that you can write both HTML and markdown together, OR just write markdown and it will just work.

    Here is how I'm building my new blog:

    blog: {
      options: {
        layout: 'templates/layouts/default.hbs'
      },
      files: {
        '<%= site.dest %>/': ['content/*.md']
      }
    }
    

    My layout, default.hbs, looks something like this:

    <html lang="en">
      <head>
        {{> head }}
      </head>
      <body>
        {{> nav-main }}
        <div class="container">
        {{#markdown}}
          {{> body }}
        {{/markdown}}
        </div>
        {{> footer }}
      </body>
    </html>