Skip to content

iby/twig-js-markdown

Repository files navigation

Twig.js Markdown

{% markdown %} tag support for Twig templates using twig.js and marked compiler. Compatible with gulp-twig.

<div class="content">
    <div>
        {% markdown %}
            # Embed markdown directly in your template…
        {% endmarkdown %}
    </div>
    <div>
        {% markdown '../or/embed/external/file.md' %}{% endmarkdown %}
    </div>
    <div>
        {% apply markdown_to_html %}
            # Title
        {% endapply %}
    </div>
    <div>
        {% set content = '# Title' %}
        {{ content|markdown_to_html }}
    </div>
</div>

Install

npm install twig-markdown --save

Use

In TypeScript:

import * as twig from 'twig';
import twigMarkdown from 'twig-markdown';
twig.extend(twigMarkdown);
const template = twig.twig({ data: "{% markdown %}# Foo{% endmarkdown %}" });
template.render();

In JavaScript:

const twigMarkdown = require('twig-markdown');
const twig = require('twig');
twig.extend(twigMarkdown);
const template = twig.twig({ data: "{% markdown %}# Foo{% endmarkdown %}" });
template.render();

In javascript with gulp-twig plugin:

const twigMarkdown = require('twig-markdown');
const twigFoo = require('twig-foo');
const twig = require('gulp-twig');

// With only markdown extension.
twig({data: {}, extend: twigMarkdown});

// With multiple extensions.
twig({data: {}, extend: function(Twig){
    twigMarkdown(Twig);
    twigFoo(Twig);
}});

Contribute

Install npm dependencies and you're good to go, assuming you also have globally typescript:

npm install

Test with mocha:

npm test

Run build in watch mode:

npm start