docs: Syntax highlighting for mkdocs (#984)

* feat:forward context processors variables in context in ISOLATED mode

	provide context_processors_data property to Component to access those variables in Component

* refactor: internalize RequestContext and pass HttpRequest internally

* docs: document HttpRequest and context processors

* docs: use djc_py code blocks for component definitions

---------

Co-authored-by: Lilian Durey <dureylilian@gmail.com>

docs/guides/devguides/dependency_mgmt.md

@@ -7,7 +7,7 @@ associated with components, and how we render them.
 
 1. First of all, when we consider a component, it has two kind of dependencies - the "inlined" JS and CSS, and additional linked JS and CSS via `Media.js/css`:
 
-    ```py
+    ```djc_py
     from django_components import Component, types
 
     class MyTable(Component):

docs/guides/devguides/slots_and_blocks.md

@@ -15,7 +15,7 @@
     ```
 
     And components that make use of `abc.html` via `include` or `extends`:
-    ```py
+    ```djc_py
     from django_components import Component, register
 
     @register("my_comp_extends")
@@ -66,7 +66,7 @@
     ```py
     @register("my_comp")
     class MyComp(Component):
-    	template_file = "abc.html"
+        template_file = "abc.html"
     ```
 
     Then:
@@ -110,37 +110,34 @@
         uses `extends`. In that case, just as you would expect, the `block inner` inside
         `abc.html` will render `OVERRIDEN`:
 
-        ````py
+        ```djc_py
         @register("my_comp")
         class MyComp(Component):
-        template_file = """
-        {% extends "abc.html" %}
-
-            		{% block inner %}
-            			OVERRIDEN
-            		{% endblock %}
-            	"""
-            ```
-
-        ````
+            template = """
+                {% extends "abc.html" %}
+                {% block inner %}
+                  OVERRIDEN
+                {% endblock %}
+            """
+        ```
 
     4.  This is where it gets interesting (but still intuitive). You can insert even
         new `slots` inside these "overriding" blocks:
 
-        ```py
+        ```djc_py
         @register("my_comp")
         class MyComp(Component):
-        	template_file = """
-        		{% extends "abc.html" %}
+            template = """
+              {% extends "abc.html" %}
 
-        		{% load component_tags %}
-        		{% block "inner" %}
-        			OVERRIDEN
-        			{% slot "new_slot" %}
-        				hello
-        			{% endslot %}
-        		{% endblock %}
-        	"""
+              {% load component_tags %}
+              {% block "inner" %}
+                OVERRIDEN
+                {% slot "new_slot" %}
+                  hello
+                {% endslot %}
+              {% endblock %}
+            """
         ```
 
         And you can then pass fill for this `new_slot` when rendering the component:

docs/guides/setup/syntax_highlight.md

@@ -9,7 +9,7 @@ weight: 1
 
 2. Next, in your component, set typings of `Component.template/css/js` to `types.django_html`, `types.css`, and `types.js` respectively. The extension will recognize these and will activate syntax highlighting.
 
-```python title="[project root]/components/calendar.py"
+```djc_py title="[project root]/components/calendar.py"
 # In a file called [project root]/components/calendar.py
 from django_components import Component, register, types
 
@@ -21,12 +21,19 @@ class Calendar(Component):
         }
 
     template: types.django_html = """
-        <div class="calendar-component">Today's date is <span>{{ date }}</span></div>
+        <div class="calendar-component">
+            Today's date is <span>{{ date }}</span>
+        </div>
     """
 
     css: types.css = """
-        .calendar-component { width: 200px; background: pink; }
-        .calendar-component span { font-weight: bold; }
+        .calendar-component {
+            width: 200px;
+            background: pink;
+        }
+        .calendar-component span {
+            font-weight: bold;
+        }
     """
 
     js: types.js = """
@@ -43,7 +50,7 @@ class Calendar(Component):
 With PyCharm (or any other editor from Jetbrains), you don't need to use `types.django_html`, `types.css`, `types.js` since Pycharm uses [language injections](https://www.jetbrains.com/help/pycharm/using-language-injections.html).
 You only need to write the comments `# language=<lang>` above the variables.
 
-```python
+```djc_py
 from django_components import Component, register
 
 @register("calendar")
@@ -55,13 +62,20 @@ class Calendar(Component):
 
     # language=HTML
     template= """
-        <div class="calendar-component">Today's date is <span>{{ date }}</span></div>
+        <div class="calendar-component">
+            Today's date is <span>{{ date }}</span>
+        </div>
     """
 
     # language=CSS
     css = """
-        .calendar-component { width: 200px; background: pink; }
-        .calendar-component span { font-weight: bold; }
+        .calendar-component {
+            width: 200px;
+            background: pink;
+        }
+        .calendar-component span {
+            font-weight: bold;
+        }
     """
 
     # language=JS
@@ -73,3 +87,45 @@ class Calendar(Component):
         })()
     """
 ```
+
+## Pygments
+
+[Pygments](https://pygments.org/) is a syntax highlighting library written in Python. It's also what's used by this documentation site ([mkdocs-material](https://squidfunk.github.io/mkdocs-material/)) to highlight code blocks.
+
+To write code blocks with syntax highlighting, you need to install the [`pygments-djc`](https://pypi.org/project/pygments-djc/) package.
+
+```bash
+pip install pygments-djc
+```
+
+And then initialize it by importing `pygments_djc`:
+
+```python
+import pygments_djc
+```
+
+Now you can write code blocks with syntax highlighting.
+
+```txt
+\```djc_py
+from django_components import Component, register
+
+@register("calendar")
+class Calendar(Component):
+    template= """
+        <div class="calendar-component">
+            Today's date is <span>{{ date }}</span>
+        </div>
+    """
+
+    css = """
+        .calendar-component {
+            width: 200px;
+            background: pink;
+        }
+        .calendar-component span {
+            font-weight: bold;
+        }
+    """
+\```
+```