thecodechef/nunjucks-extended

A Better Nunjucks Syntax Highlighter for Sublime Text

Nunjucks Extended

A Better Nunjucks Syntax Highlighter for Sublime Text

Table of Contents

• Installation
• Contributing
• Authors
• Examples

Installation

Package Control:

• Open up Sublime Text
• Press shift+ctrl+p and type in Package Controll:
• Then Type in Install Package and Press Enter
• Search for Nunjucks Extended and Press Enter
• Restart Sublime Text And Enjoy!

Manually:

• Change directories into your Packages Directory

  • Windows $env:appdata\Sublime Text 3\Packages\
  • Mac ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
  • Linux cd .config/sublime-text-3/Packages/

• git clone http://github.com/thecodechef/nunjucks-extended.git
• Restart Sublime Text and Enjoy!

Contributing

Adding Features

• First off create a fork of this repo
• then in your terminal type cd git clone http://github.com/[your-username]/nunjucks-extended.git [path-to-place-repo]
• to create a feature branch: git checkout -b my-feature-branch

Authors

• Jeremy Bolding

  • Github
  • Twitter

Examples

Tag Blocks

AsyncAll Tag Example

{% set links = [
  "../css/bootstrap.min.css",
  "../css/font-awesome.min.css",
  "..css/main.min.css"
] %}

{% asyncAll link in links %}
  <link rel="stylesheet" href=link />
{% endasyncAll %}

//=> <link rel"stylesheet" href="../css/bootstrap.min.css"/>
//=> <link rel"stylesheet" href="../css/font-awesome.min.css"/>
//=> <link rel"stylesheet" href="../css/main.min.css"/>

AsyncEach Tag Example

{% set links = [
  "../css/bootstrap.min.css",
  "../css/font-awesome.min.css",
  "..css/main.min.css"
] %}

{% asyncEach link in links %}
  <link rel="stylesheet" href=link />
{% endasyncEach %}

//=> <link rel"stylesheet" href="../css/bootstrap.min.css"/>
//=> <link rel"stylesheet" href="../css/font-awesome.min.css"/>
//=> <link rel"stylesheet" href="../css/main.min.css"/>

Block Tag Example

{% set name = "Jeremy" %}

{% block content %}
  Hello, {{ name }}
{% endblock %}

//=> Hello, Jeremy

Call Tag Example

{% call add(1, 2) -%}
The result is
{%- endcall %}

//=> The result is: 3

Filter Tag Example

{% filter replace("force","forth") %}
may the force be with you
{% endfilter %}

//=> may the forth be with you

For Tag Example

 {% set items = ["Nunjucks is Awesome"] %}

 <h1>Posts</h1>
 <ul>
 {% for item in items %}
   <li>{{ item.title }}</li>
 {% else %}
   <li>Nothing to Show</li>
 {% endfor %}
 </ul>

//=> <h1>Posts</h1>
//=>  <ul>
//=>   <li>Nunjucks is Awesome<li>
//=>  </ul>

If Tag Example

{% set isActive = true %}

{% if isActive %}
  <li class="active">Link</li>
{% elif isActive !== true or false %}
  <li>Undefined</li>
{% else %}
  <li>Link<li>
{% endif %}

//=> <li class="active">Link</>

Macro Tag Example

{% macro add(x,y) %}
<p>{{ caller() }}: {{ x + y }}</p>
{% endmacro %}

Raw Tag Example

{% raw %}
  {{ name }}
{% endraw %}


//=>  {{ name }}

Inline Tags

Extends Tag Example

{% extends "_layouts/default.njk" %}


{% block content %}
{% endblock %}

Import Tag Example

{% import "_macros/navbar.njk" %}

{% import "_macros/navbar.njk" as navbar %}

{% from "_macros/navbar.njk" import navItem %}

{% from "_macros/navbar.njk" import navItem,activeNavItem as activeItem %}

Include Tag Example

{% include "_partials/modal.njk" %}

{% include "_partials/modal.njk" ignore missing %}

Set Tag Example

1 {% set name = "Jeremy Bolding" %}
2 
3 {% set name %}
4     Jeremy Bolding
5 {% endset %}
6 
7 {{ name }}