Search code examples
htmlgulpmarkdown

Markdown to html, include a link


It is possible to get files from markdown to html using gulp-markdown.

But still it's not very helpful if the links to a stylesheet can not be automatically included.

Minimal example of what it's meant:

Markdown File example.md

# MD files are simple to write
 * then it could be interesting to use them to write blog-posts with a minimal formatting
 * New bullet

After gulp-markdown example.html

<h1 id="md-files-are-simple-to-write">MD files are simple to write</h1>
<ul>
<li>then it could be interesting to use them to write blog-posts with a minimal formatting</li>
<li>New bullet</li>
</ul>

Expected

<html>
<head>
<link rel='stylesheet' href='path/to/style.css'/>
</head>
    <h1 id="md-files-are-simple-to-write">MD files are simple to write</h1>
    <ul>
    <li>then it could be interesting to use them to write blog-posts with a minimal formatting</li>
    <li>New bullet</li>
    </ul>
</html>

Any ideas where can I look at or how to achieve this?


Solution

  • https://marked.js.org/#/USING_PRO.md#renderer

    You can do a kind of template by adding a custom renderer:

    // myHtml is the HTML you already made
    let myTemplate = new markdown.Renderer()
    myTemplate.html(someHtml) {
      return `<html><head></head><body>${someHtml}</body></html>`
    }
    let fullHtml = marked(myHtml, {renderer: myTemplate}