From 68296eda2e6e68d049bbf3248aa5411ea6bfc12d Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Fri, 8 Nov 2024 06:41:15 -0500
Subject: [PATCH] Improve **Usage** section with better examples

And a more detailed introduction paragraph.
---
 Home.md | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/Home.md b/Home.md
index 6ac6e47..3bf6c37 100644
--- a/Home.md
+++ b/Home.md
@@ -78,8 +78,15 @@ ### Change Default Format
 
 ## Usage
 
-After successful [installation](#installing), code blocks with the appropriate
-language will now be converted to images.
+Code blocks with the appropriate language label will be converted to an image.
+Specifying the language of a code block depends on the template
+engine&mdash;examples are provided in this section. Refer to the
+[supported diagrams](#supported-diagrams) section for a list of diagram
+languages.
+
+### Markdown
+
+For Markdown, specify the diagram language after the starting triple backticks:
 
 ````markdown
 ```plantuml
@@ -90,6 +97,25 @@ ## Usage
 ```
 ````
 
+### HTML-Like Template Engines Such as Vento and JSX
+
+Template engines which have HTML-like syntax can specify the language using the
+`class` or `className` attribute:
+
+```vento
+<pre>
+  <code class="language-plantuml">
+    @startuml
+    Alice -> Bob: Hi
+    Bob -> Alice: Hi
+    @enduml
+  </code>
+</pre>
+```
+
+> [!NOTE]
+> The language name must be prefixed with `language-`.
+
 ## Supported Diagrams
 
 A table of supported diagrams&mdash;each with their available output formats and