better syntax highlighting

src/docs/tags.md

@@ -8,15 +8,17 @@ In several places you will find a code block that looks like this:
 
 {% raw %}
 
-```html
+```jinja2
 <!-- loop posts -->
-{% set itemList = collections.posts %} {% for item in itemList.slice(0, 4) %}
+{% set itemList = collections.posts %}
+{% for item in itemList.slice(0, 4) %}
 <!-- activate tags -->
 {% set activateTags = true %}
 <!-- set heading context -->
 {% set headingContext = "h3" %}
 <!-- card -->
-{% include 'components/card.njk' %} {% endfor %}
+{% include 'components/card.njk' %}
+{% endfor %}
 ```
 
 {% endraw %}
@@ -26,24 +28,16 @@ With `set activateTags = true` you can switch the display of tags in this card c
 
 The tags are placed in the front matter of the posts, using the syntax
 
-{% raw %}
-
 ```yaml
 tags:
   - image
   - feature
 ```
 
-{% endraw %}
-
 or
 
-{% raw %}
-
 ```md
 tags: ['markdown', 'feature']
 ```
 
-{% endraw %}
-
 If you generally do not want any tags to show, it is probably easiest to not create any at all.

src/posts/2022-08-28-post-with301-redirects.md

@@ -14,8 +14,6 @@ Aleksandr Hovhannisyan came up with an [elegant solution for Eleventy and Netlif
 
 ## Usage
 
-{% raw %}
-
 ```yaml
 Frontmatter:
 ---

src/posts/2022-10-12-post-with-image.md

@@ -18,7 +18,7 @@ In the most basic version it contains the path to the image, alt text (can be an
 
 {% raw %}
 
-```
+```jinja2
 {% eleventyImage "path to image", "alt text", "caption text" %}
 ```
 
@@ -32,7 +32,7 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
 
 {% raw %}
 
-```
+```jinja2
 {% eleventyImage "path to image", "alt text", "caption text", "eager", "class names", "(min-width:30em) 50vw, 100vw", [200, 400] %}
 {% eleventyImage "path to image", "alt text", null, "eager" %}
 ```
@@ -43,7 +43,7 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
 
 {% raw %}
 
-```
+```jinja2
 {% eleventyImage "./src/assets/images/gallery/asturias-2.jpg", "Close-up of a delicate white flower with a yellow center, surrounded by green leaves", "Jasmine nightshades blooming in July" %}
 ```
 
@@ -55,7 +55,7 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
 
 {% raw %}
 
-```
+```jinja2
 {% eleventyImage "./src/assets/images/gallery/asturias-3.jpg", "A traditional Asturian village with it's raised granaries, surrounded by lush green hills and mountains", null, "lazy", "class-that-does-nothing", "(min-width:30em) 50vw, 100vw", [200, 400] %}
 ```
 
@@ -67,8 +67,8 @@ The class names are passed in the outer container, the `<picture>` or `<figure>`
 
 Thanks to the [markdown-it-eleventy-img](https://github.com/solution-loisir/markdown-it-eleventy-img) package markdown also has it own image syntax. `src` is already prepended here, see `config/plugins/markdown.js`.
 
-```
-![alt text](path to image)
+```markdown
+![alt text](/path/to/image)
 ![Close-up with unfocused background of a vibrant large blue butterfly gracefully perched on a delicate flower amidst lush green gras](/assets/images/gallery/asturias-4.jpg)
 ```
 

src/posts/2022-11-02-markdown.md

@@ -13,7 +13,7 @@ As of my personal preference, there are some presets. For example the conversion
 **This is a tiny pitfall!**
 Take care to not prefix your internal links with your domain, or else they will be treated ad external as well. To link internally use this pattern:
 
-```
+```markdown
 An internal link to the [about page](/about/)
 ```
 
@@ -35,7 +35,7 @@ Soufflé topping shortbread lemon.
 
 **The replacement converts this input:**
 
-```
+```markdown
 (c) (C) (r) (R) (tm) (TM) +-
 and so on.. and so on... and so on..... AND SO ON???????.....
 WTF!!!!!! How many exclamation marks are you going to use????????????