👉 Note: 11ty & Nunjucks.

What we want?

• Capture the screen to the clipboard and then paste it into the editor. The captured image is automatically copied to a folder and can be viewed in the editor as well as on GitHub and on the 11ty website (after rendering).
• The same function for online images (copy and paste the URL).

Tools

You will need to install the following tools. Depending on your working style, you can choose one or both of them.

• Typora (what you see is what you get).
• VSCode (with extensions Markdown All in One and Markdown Image).

Setting up your project structure

Below is an example of the folder structure on my website. Read this section to understand why this structure is important for all parts work together.

dinhanhthi.com
|- _built/ # The output folder (11ty renders markdown files to this)
|- .eleventy.js
|- notes/
  |- blog/ # contains all markdown files
     |- 2022-06-25-name-of-post.md
  |- img_post/ # contains all images
     |- 2022-06-25-name-of-post/ # the same name as markdown file
        |- figure-1.png
        |- figure-2.png

Some remarks,

• I put all the Markdown files and images in a folder called "notes", you do not have to do that. In other words, you can put the "blog" and "img_post" folders in the root folder.
• The folder "2022-06-25-name-of-post" inside "img_post" is automatically created by Typora or VScode (that's why I use them). But you can also create it manually if you want.

Setting up .eleventy

You need to make 11ty recognize "blog" and "img_post".

module.exports = function (eleventyConfig) {
  // For images
  eleventyConfig.addPassthroughCopy({ "notes/img_post": "img_post" });

  return {
		// other settings
    dir: {
      input: ".",
      output: "_built",
    },
  };
}

Setting up VSCode

Make sure you have the Markdown All in One and Markdown Image extensions already installed.

Go to Makdown Image settings: