ssg  
Where to Discuss?

Local Group

Preface

Goal: Using shortcode in markdown.

Source Code

This article use tutor-08 theme. We will create it step by step.


5: Shortcode: Simple

We can utilize shortcodes to provide link, or to provide image in eleventy.

Shortcodes

We need to add a few shortcodes in .eleventy.js:

  // Internal Path
  eleventyConfig.addShortcode("pathPrefix", function() {
    return config.pathPrefix;
  });

  // External Path
  eleventyConfig.addShortcode("dotfiles", function() {
    return 'https://gitlab.com/epsi-rns/dotfiles/tree/master';
  });

  eleventyConfig.addShortcode("repo", function() {
    return 'https://gitlab.com/epsi-rns/tutor-11ty-bulma-md/tree/master/';
  });

We can use this later in markdown as nunjucks code as shown below:

[local-whats-next]: {% pathPrefix %}lyrics/soulfly-jump-da-fuck-up/
[link-dotfiles]:    {% dotfiles %}/terminal/vimrc/vimrc.bandithijo

Page Content: Markdown with Shortcut

Again, content for example purpose

---
layout    : post
title     : RATM - Bulls on Parade
date      : 2018-02-15 07:35:05
tags      : ["nu metal", "90s"]
---

[Terminal Dofiles][one-link].

* While arms warehouses fill as quick as the cells

* Rally round tha family, pocket full of shells

![Business Card][one-image]

-- -- --

### Example Dotfiles

ViM RC: [bandithijo][link-dotfiles]

-- -- --

### What's next ?

Our next song would be [Soulfly - Jump Da Fuck Up][local-whats-next]

[//]: <> ( -- -- -- links below -- -- -- )

[local-whats-next]: {% pathPrefix %}lyrics/soulfly-jump-da-fuck-up/
[link-dotfiles]:    {% dotfiles %}/terminal/vimrc/vimrc.bandithijo

[one-image]:    {% pathPrefix %}assets/images/adverts/one-page.png
[one-link]:     {% dotfiles %}/terminal/

11ty Markdown: Image and Link in Markdown using Shortcodes


6: Shortcode: Argument

We can also utilize more advance shortcode, that can be equipped with parameter argument, to provide raw HTML in the middle of content.

Shortcode

We need to add a few shortcodes in .eleventy.js:

  // Multiline Content with Parameter
  eleventyConfig.addShortcode("advert", function(src) {
    return `
  <img alt="advertisement" 
       src="${config.pathPrefix}assets/images/adverts/${src}">
    `;
  });

We can use this advert shortcode later, in markdown as nunjucks code as shown below:

{% advert "oto-spies-01.png" %}

Interpolation

Me too

You might curious what this codes meaning.

  <img alt="advertisement" 
       src="${config.pathPrefix}assets/images/adverts/${src}">

It is all in the official documentation:

Page Content: Markdown with Shortcut

Again, content for example purpose

---
layout    : post
title     : Disturbed - Stupify
date      : 2018-09-13 07:35:05
tags      : ["nu metal", "2000s"]
---

Look in my face, stare in my soul
{% advert "oto-spies-01.png" %}

Why, do you like playing around with\
My, narrow scope of reality\
I, can feel it all start slipping\
I think I'm breaking down

11ty Markdown: Advertisement in Markdown using Shortcode

Now it is your choice, which one is easier for you.


What is Next ?

Consider continue reading [ Eleventy - Syntax Highligting ]. We are going to explore syntax highlighting in markdown content.

Thank you for reading.