How can I render markdown with EJS using Express / Node.JS?

Question

I have been using the Express web framework for Node.JS, and have been using the markdown parser chjj/marked in order to parse markdown into HTML. I have also been able to render this markdown using Express. I use EJS templates in my Express projects typically and what I would like to be able to do is use EJS with markdown.

Ideally I would like to be able to use the compile-time includes that are normally used in EJS, an example of which is shown here:

<% include header.html %>

<h3>User List -- Located in users.html</h3>
<ul id="users">
  <% users.forEach(function(user){ %>
    <li><%= user.name %> -- <%= user.email %></li>
  <% }) %>
</ul>

<% include footer.html %>

It would be nice if I could include markdown files as well within my EJS templates with something like the following:

<% include markdown-file.md %>

It would also be nice to be able to use the EJS syntax within markdown or provide some way of accessing the variables within the markdown. Is anything like this possible? If not, what would be the easiest way for me to use markdown for my content in an EJS template?

EDIT 5/19/13: I have really wanted to do something like this for use in my own projects so I had to give it a go at combining markdown with EJS. Take a look at my module on GitHub called markedejs if you are interested in this as well, the README explains what I've done pretty well. This module uses the marked in order to parse markdown into HTML, unescapes it, and passes the HTML template to EJS for final rendering. All the EJS syntax works within the markdown, and including an HTML templates within markdown templates is working as well. You can make markdown templates looking like the following:

<nop><% include header.html %></nop>

<%= site.title %>
=======================

<%= site.description %>

This project was created by <%= author.name %>. My website is
located at the url [<%= author.url %>]().

## <%= header %>

![Markdown Logo](img/mdlogo.png)

Hey <%= user.name %>! This is a test template for the `markedejs` module. We
can use markdown and EJS together for some pretty awesome results.

### The Classic EJS Supplies List
<ul>
<% for (var i = 0; i < supplies.length; i++) { %>
  <li><%= supplies[i] %></li>
<% } %>
</ul>

### Your User Data

I like using markdown lists a whole lot better when I can.

 - **Username:** <%= user.username %>
 - **Name:** <%= user.name %>
 - **Stars:** <%= user.stars %>

We can do some conditionals as well. You will only see the footer below this
paragraph if you pass in `true` for the `showFooter` flag.

<% if (showFooter !== undefined && showFooter === true) { %>
  <%= footer %>
<% } %>

<nop><% include footer.html %></nop>

The <nop> tags are removed by markedejs and are included in the markdown template so that <p> tags are not added around the content of header.html and footer.html.

However, this is not quite doing what I originally wanted yet, I would like to be able to include markdown templates within both other HTML templates and other markdown templates. Currently I can only include HTML templates within my markdown templates. Still hoping anyone might have a better idea about how I can make EJS includes work with markdown files?

hexo does this, I would look there to see how they're doing it. — Kyle Baker
– Kyle Baker, Commented Jun 2, 2020 at 12:47

LongSteve · Accepted Answer · 2014-08-06 15:23:02Z

You'll probably have to modify EJS if you want to get it to handle markdown files in it's

<% include filename.ext %>

directive. They way it handles includes is simple and recursive, but it would need explicit knowledge of markdown files, and call a markdown converter to generate the html before adding it to the template.

I've used marked to create a function that I pass to my EJS templates, which can be called to include a markdown file, and it works pretty well:

app.get ('/docs', function (req, res) {

   // Allow the docs.html template to 'include' markdown files
   var marked = require ('marked');

   var md = function (filename) {
      var path = __dirname +"/views/docs/" + filename;
      var include = fs.readFileSync (path, 'utf8');
      var html = marked (include);

      return html;
   };

   res.render ('docs', {"md": md});
});

In the template, do this:

<%- md("index.md") %>

but it doesn't let me use EJS template functions in the markdown files, the markdown is pure HTML that gets inlined.

user2293998 · Accepted Answer · 2013-06-09 05:48:57Z

3

Please try to change <%= to <%-

answered Jun 9, 2013 at 5:48

user2293998

1491 silver badge5 bronze badges

Comments

siavolt · Accepted Answer · 2015-02-06 11:33:53Z

0

You can use this https://www.npmjs.com/package/express-markdown-browser

Create folder with md files and set express. Good luck.

answered Feb 6, 2015 at 11:33

siavolt

7,0975 gold badges26 silver badges27 bronze badges

Collectives™ on Stack Overflow

How can I render markdown with EJS using Express / Node.JS?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related