Improve syntax highlighting

thibaudcolas · thibaudcolas · commit 692eea4d08df · 2020-10-30T08:37:47.000Z
diff --git a/docs/README.md b/docs/README.md
@@ -1,5 +1,5 @@
 # Documentation
 
-This documentation is built as a website with [MkDocs](https://www.mkdocs.org/): [torchbox.github.io/django-pattern-library/](https://torchbox.github.io/django-pattern-library/).
+This documentation is built as a website with [MkDocs](https://www.mkdocs.org/): [torchbox.github.io/django-pattern-library/](https://torchbox.github.io/django-pattern-library/). The documentation uses non-standard Markdown extensions, and will be best viewed on the website rather than GitHub.
 
 To build locally, view the project’s `CONTRIBUTING.md`.
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -35,7 +35,7 @@ INSTALLED_APPS = [
 
 Also add `pattern_library.loader_tags` to `OPTIONS["builtins"]` into the `TEMPLATES` setting:
 
-```python
+```python hl_lines="13 14 15"
 TEMPLATES = [
     {
         "BACKEND": "django.template.backends.django.DjangoTemplates",
@@ -121,7 +121,7 @@ Now let’s look at adding our first template!
 
 Now we’ve done all of the configuration – let’s create a UI component. We’ll use `quote-block` as an example, and place it at `patterns/components/quote_block/quote_block.html` inside one of our Django apps:
 
-```html
+```jinja2
 <blockquote class="quote-block block--spacing">
     <div class="quote-block__text">
         <p class="quote-block__quote">{{ quote }}</p>
@@ -136,7 +136,7 @@ Now we’ve done all of the configuration – let’s create a UI component. We
 
 We additionally need to customize a base template, so the standalone component can be rendered within a page with CSS. This is what the `PATTERN_BASE_TEMPLATE_NAME` setting is for. As a separate template in `patterns/base.html`:
 
-```html
+```jinja2 hl_lines="11"
 <!DOCTYPE html>
 <html lang="en">
 <head>
diff --git a/docs/guides/customizing-template-rendering.md b/docs/guides/customizing-template-rendering.md
@@ -6,7 +6,7 @@ All patterns that are not pages are rendered within a base page template. The pa
 
 You can for example add a theme wrapper around the components:
 
-```html
+```jinja2
 {% block content %}
     {% if pattern_library_rendered_pattern %}
         <div class="pattern-library bg bg--light">
@@ -18,6 +18,6 @@ You can for example add a theme wrapper around the components:
 
 `pattern_library_rendered_pattern` can also be used to do other modifications on the page for the pattern library only, for example adding an extra class to `<body>`:
 
-```html
+```jinja2
 <body class="{% block body_class %}{% endblock %}{% if pattern_library_rendered_pattern %} pattern-library-template{% endif %}">
 ```
diff --git a/docs/reference/examples.md b/docs/reference/examples.md
@@ -45,7 +45,7 @@ tags:
 
 ## Inclusion tags
 
-```html
+```jinja2
 <div class="footer__action">
     {% footernav %}
 </div>
@@ -60,11 +60,11 @@ tags:
 
 ## Image lazy load
 
-```html
-    {% image slide.image fill-100x71 as imageSmall %}
-    {% image slide.image fill-829x585 as imageLarge %}
+```jinja2
+{% image slide.image fill-100x71 as imageSmall %}
+{% image slide.image fill-829x585 as imageLarge %}
 
-    {% include "patterns/atoms/image/image--lazyload.html" with imageSmall=imageSmall width=829 height=585 imageLarge=imageLarge classList='slide__image' %}
+{% include "patterns/atoms/image/image--lazyload.html" with imageSmall=imageSmall width=829 height=585 imageLarge=imageLarge classList='slide__image' %}
 ```
 
 ```yaml
@@ -84,7 +84,7 @@ tags:
 
 ## Image include
 
-```html
+```jinja2
 <img src="{{ imageSmall.url }}" data-src="{{ imageLarge.url }}" width="{{ width }}" height="{{ height }}" alt="{{ imageLarge.alt }}" class="{{ classList }} lazyload">
 ```
 
