Improve **Usage** section with better examples

And a more detailed introduction paragraph.

Home.md

@@ -78,8 +78,15 @@ ### Change Default Format
 
 ## Usage
 
-After successful [installation](#installing), code blocks with the appropriate
+Code blocks with the appropriate language label will be converted to an image.
-language will now be converted to images.
+Specifying the language of a code block depends on the template
+engine—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