CODEWITHSUNDEEP
htmlgruntjsmarkdownyeomanassemble
frederickk
frederickk

Reputation: 73

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:

Upvotes: 3

Views: 1465

Answers (2)

jonschlinkert
jonschlinkert

Reputation: 11007

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>

Upvotes: 2

Ben
Ben

Reputation: 10156

Use a combination of grunt-markdown (as per Simon's comment) to render the Markdown and grunt-import to inject it into your build. An example configuration (untested, so you might have to play around with this a little):

module.exports = function(grunt) {
    grunt.initConfig({
        markdown: {
            build: {
                files: [{
                    expand: true,
                    src: 'path/to/markdown/**/*.md',
                    dest: 'path/to/build/',
                    ext: '.html'
                }]
            }
        },
        import: {
            build: {
                src: 'path/to/build/**/*.html',
                dest: 'path/to/build/'
            }
        }
    });
    grunt.registerTask('build', ['markdown', 'import']);
}

The import task takes a string such as @import "path/to/another/file"; in your source file and injects the contents of that file to the destination file.

Upvotes: 1

Related Questions