Syntax highligting

maximebf · maximebf · commit fe2971ee6769 · 2025-09-25T09:46:06.000+02:00
diff --git a/docs/components/forms.md b/docs/components/forms.md
@@ -2,7 +2,7 @@
 
 Use the `Form` component with a form object to write the form tag. Use `HxForm` instead of `Form` for an HTMX powered form instead.
 
-```
+```jinja
 <{Form form action="..."}>
     
 </{Form}>
@@ -13,7 +13,7 @@ Use the `Form` component with a form object to write the form tag. Use `HxForm`
 
 Use `FormField` components to style fields properly:
 
-```
+```jinja
 <{Form form}>
     <{FieldsetLegend}>Login</{}>
 
@@ -30,7 +30,7 @@ Use the `form-w-full` call on the form tag for full width forms.
 
 Follow the DaisyUI pattern:
 
-```
+```jinja
 <{Fieldset}>
     <{FieldsetLegend}>Login</{}>
 
diff --git a/docs/components/icons.md b/docs/components/icons.md
@@ -4,6 +4,6 @@ Icons are provided by [Bootstrap Icons](https://icons.getbootstrap.com).
 
 Use the `Icon` component and provide the icon name:
 
-```
+```jinja
 <{Icon "cart" }/>
 ```
diff --git a/docs/components/layout.md b/docs/components/layout.md
@@ -6,7 +6,7 @@ Hyperflask includes a few utilties to help you design your app quickly.
 
 Use the following snippet to kick start a very common application UI with a sidebar:
 
-```
+```jinja
 <{AppUI}>
     <{Viewport}>
 
diff --git a/docs/components/modals.md b/docs/components/modals.md
@@ -2,7 +2,7 @@
 
 Use the `Modal` component to create an [HTML dialog element](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog).
 
-```
+```jinja
 <{Button onclick="modal1.showModal()" }>Say hello</{Button}>
 <{Modal id="modal1"}>
     <{ModalTitle}>Hello!</{ModalTitle}>
@@ -21,7 +21,7 @@ Create a backend-driven modal that auto opens when called. Uses the built-in hf-
 
 Example *components/SignupModal.jpy*:
 
-```
+```jpy
 ---
 from hyperflask import htmx_redirect
 
@@ -52,6 +52,6 @@ Using `<{ModalForm}>` ensures that the modal closes on successfull submit. When
 
 In a page:
 
-```
+```jinja
 <{Button hf_modal=url_for('SignupModal')}>Signup</{}>
 ```
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -81,7 +81,7 @@ In your project folder, you will find the following files and folders:
 
 First, let's create a basic chat window with some messages. Replace the content of `app/pages/index.jpy` with the following:
 
-```
+```jinja
 {% use_layout %}
 <div id="messages">
     <{ChatBubble}>First message!</{ChatBubble}>
@@ -104,7 +104,7 @@ Now that we have the basic layout of our app, let's extract the chat bubble as a
 
 We are going to create a `ChatMessage` component to render one message. In `app/components/ChatMessage.jpy`:
 
-```
+```jpy
 ---
 from hyperflask import request
 
@@ -124,7 +124,7 @@ The function then returns the properties that will be used to render the compone
 
 Let's add a form to our chat interface. Replace `app/pages/index.jpy` with the following:
 
-```
+```jinja
 {% use_layout %}
 <div id="messages">
     {# messages will display here #}
@@ -158,7 +158,7 @@ class Message(db.Model):
 
 Modify our component to save messages:
 
-```
+```jpy
 ---
 from hyperflask import request
 from app.models import db, Message
@@ -175,7 +175,7 @@ def post():
 
 And finally the page:
 
-```
+```jpy
 ---
 from app.models import Message
 
@@ -201,7 +201,7 @@ Rather than sending back a message partial when posting a new message, we will u
 
 Modify the `ChatMessage` component back to its simpler state:
 
-```
+```jinja
 <{ChatBubble}>
     {{props.message.message|markdown}}
 </{ChatBubble}>
@@ -211,7 +211,7 @@ Now let's create a new component `PostMessageForm` in `app/components/PostMessag
 
 We will also use the a [form](/guides/forms) in this component to easily validate data.
 
-```
+```jpy
 ---
 from hyperflask import page, current_app
 from app.models import db, Message
@@ -232,7 +232,7 @@ def post():
 
 Let's modify `app/pages/index.jpy` to use our new component and connect to the SSE stream:
 
-```
+```jpy
 ---
 from app.models import Message
 
@@ -277,7 +277,7 @@ class Message(UserRelatedMixin, db.Model):
 
 Modify the component `ChatMessage` to display the author:
 
-```
+```jinja
 <{ChatBubble header=props.message.user.email}>
     {{props.message.message|markdown}}
 </{ChatBubble}>
diff --git a/docs/guides/components.md b/docs/guides/components.md
@@ -14,7 +14,7 @@ Components can recieve parameters named *props*.
 
 For example, to create a dropdown component, let's create the file *app/components/Dropdown.html*:
 
-```html
+```jinja
 <div class="dropdown">
     <button>{{props.label}}</button>
     <ul class="dropmenu">
@@ -42,7 +42,7 @@ Back to our example:
 
 Now, let's rework our component to use another component for the dropdown items.
 
-```html
+```jinja
 <div class="dropdown">
     <button>{{props.label}}</button>
     <ul class="dropmenu">
@@ -53,15 +53,15 @@ Now, let's rework our component to use another component for the dropdown items.
 
 Now create *app/components/DropdownItem.html*:
 
-```html
+```jinja
 <li>
     <a href="{{prop.url}}">{{children()}}</a>
 </li>
 ```
 
 And finally, let's create a dropdown:
 
-```
+```jinja
 <{Dropdown label="Countries"}>
     <{DropdownItem url=url_for('countries', code="fr")}>France</{DropdownItem}>
     <{DropdownItem url=url_for('countries', code="hk")}>Hong Kong</{DropdownItem}>
@@ -80,7 +80,7 @@ HTML components can have their own custom backend logic. Read on to the [next gu
 
 Example using the previous *app/components/Dropdown.html*:
 
-```html
+```jinja
 <div class="dropdown" x-data="{ open: false }">
     <button @click="open = true">{{props.label}}</button>
     <ul class="dropmenu" x-show="open">
@@ -156,7 +156,7 @@ Use a jinjapy file instead of html file (.jpy extension) and implement the rende
 
 The render function will be provided the props as arguments.
 
-```
+```jpy
 ---
 def render(prop1, prop2):
     # custom logic
diff --git a/docs/guides/emails.md b/docs/guides/emails.md
@@ -11,7 +11,7 @@ Email templates are located in the *app/emails* folder. The recommended format i
 
 Template files can contain a YAML frontmatter with extra metadata like subject. The frontmatter values are templated as well.
 
-```
+```jinja
 ---
 subject: "Welcome {{name}} to example.com!"
 ---
diff --git a/docs/guides/files.md b/docs/guides/files.md
@@ -18,7 +18,7 @@ class MyModel(db.Model):
 
 In a page using a form:
 
-```
+```jpy
 ---
 form = page.form()
 def post():
@@ -42,7 +42,7 @@ When accessing the model property, the value is a [file object](https://github.c
 
 To generate a url for the file:
 
-```
+```jpy
 ---
 page.obj = MyModel.get(1)
 ---
@@ -72,7 +72,7 @@ files_base_path: bucket_name
 
 Use `save_file()` to store a file and get a [file object](https://github.com/hyperflask/flask-files#file-object). File objects are serializable as string or JSON.
 
-```
+```jpy
 ---
 from hyperflask import save_file
 
diff --git a/docs/guides/flash.md b/docs/guides/flash.md
@@ -4,7 +4,7 @@ Flask [provides a mechanism](https://flask.palletsprojects.com/en/stable/pattern
 
 Use `flash()` or `page.flash()` as described by Flask documentation.
 
-```
+```jpy
 ---
 page.flash("Welcome to my page!", "success")
 ---
diff --git a/docs/guides/forms.md b/docs/guides/forms.md
@@ -9,7 +9,7 @@ Easily define forms that can be validated on the frontend and the backend.
 
 Create forms in templates by calling fields on a `form` object as if they would be already declared. The syntax for calling fields is slightly different compared to raw wtforms as it also includes the field type.
 
-```
+```jinja
 {# signup.html #}
 <{Form form}>
     <{FormField form.firstname.text("First name") }/>
@@ -37,7 +37,7 @@ To make things easier, when using pages, forms declared inside pages are availab
 
 Example page:
 
-```
+```jpy
 ---
 form = page.form()
 def post():
diff --git a/docs/guides/i18n.md b/docs/guides/i18n.md
@@ -9,13 +9,13 @@ Use [gettext functions](https://docs.python.org/3/library/gettext.html#module-ge
 
 In templates:
 
-```
+```jinja
 {{_("this string will be translated")}}
 ```
 
 In python:
 
-```
+```py
 from hyperflask import _
 
 _("this string will be translated")
diff --git a/docs/guides/interactive-apps.md b/docs/guides/interactive-apps.md
@@ -21,7 +21,7 @@ Let's create a todo app:
 
 *app/pages/index.jpy*:
 
-```
+```jpy
 ---
 from app.models import Todo
 page.todos = Todo.find_all()
@@ -36,7 +36,7 @@ page.todos = Todo.find_all()
 
 *app/components/TodoItem.jpy*:
 
-```
+```jpy
 ---
 from app.models import db, Todo
 
@@ -61,7 +61,7 @@ def delete():
 
 *app/components/TodoItemForm.jpy*:
 
-```
+```jpy
 ---
 from hyperflask import request, current_app
 from app.models import db, Todo
diff --git a/docs/guides/models.md b/docs/guides/models.md
@@ -125,14 +125,14 @@ In `app/components/Task.html`:
 
 Once defined, you can "print" your objects and result sets directly in your templates:
 
-```
+```jpy
 ---
 page.tasks = Task.find_all()
 ---
 {{tasks}}
 ```
 
-```
+```jpy
 ---
 page.task = Task.get(1)
 ---
diff --git a/docs/guides/pages.md b/docs/guides/pages.md
@@ -66,7 +66,7 @@ For a page to use a layout, include the `{% use_layout %}` at the top of the tem
 
 Example template:
 
-```html
+```jinja
 {% use_layout %}
 
 {% block page_title %}New title!{% endblock %}
diff --git a/docs/guides/push.md b/docs/guides/push.md
@@ -23,7 +23,7 @@ current_app.sse.publish("messages", current_app.components.ChatMessage(msg="hell
 
 Hyperflask provides some components to leverage the htmx [sse extension](https://htmx.org/extensions/sse/). 
 
-```
+```jinja
 <{MercureStream topic="messages"}>
     {# default content #}
 </{MercureStream}>
@@ -85,7 +85,7 @@ current_app.sse.publish("topic2", "data", type=True) # same effect without repea
 
 Connect to multiple topics at once and distinguish messages using their type:
 
-```
+```jinja
 <{MercureStreamContext topics=["topic1", "topic2"]}>
     <{MercureStream type="topic1"}>
 
diff --git a/docs/guides/suspense.md b/docs/guides/suspense.md
@@ -11,7 +11,7 @@ Suspense uses response streaming to delay the rendering of parts of the template
 
 Let's create a component to render a big data table, in `components/DataTable.jpy`:
 
-```
+```jpy
 ---
 def render():
     return {"data": MyModel.find_all()}
@@ -54,7 +54,7 @@ Using component endpoints, you can fetch a component on page load.
 
 Let's make the component from the previous section accessible via GET:
 
-```
+```jpy
 ---
 def get():
     pass
diff --git a/docs/guides/users.md b/docs/guides/users.md
@@ -24,7 +24,7 @@ class User(UserMixin, db.Model):
 Use `page.login_required()` at the start of any page code block to prevent access for unauthentified users.
 You can also decorate endpoints and method functions using the `hyperflask_users.login_required` decorator.
 
-```
+```jpy
 ---
 page.login_required()
 ---
diff --git a/docs/recipes/monitoring.md b/docs/recipes/monitoring.md
@@ -26,7 +26,7 @@ flask_extensions:
 
 To track frontend errors, override the default layout in *app/layouts/default.html*:
 
-```html
+```jinja
 {% extends "layouts/base.html %}
 
 {% block head_assets %}
diff --git a/requirements.txt b/requirements.txt
@@ -1,3 +1,4 @@
 mkdocs-material
 mkdocs-callouts
-mkdocs-redirects
+mkdocs-redirects
+jinjapy
