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:
github.com/evilstreak/markdown-js - close, but seems to work "on-the-fly" which for my purposes is unncessary.
github.com/chjj/marked - same as above
github.com/treasonx/grunt-markdown - appears to only compile markdown
files into html
files
assemble.io/docs/Markdown.html - I was really hopeful for assemble, but could not figure out how to implement it
github.com/wycats/handlebars.js - Handlebars are exactly how I would love to be able to include markdown
, but how can I read handlebars
within an HTML file and have it rendered (pre-compiled) with grunt.
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:
This helper will treat markdown files like includes, and convert the markdown to HTML:
{{md "path/to/file.md"}}
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>