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/
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
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.