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—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 +
+  
+    @startuml
+    Alice -> Bob: Hi
+    Bob -> Alice: Hi
+    @enduml
+  
+
+``` + +> [!NOTE] +> The language name must be prefixed with `language-`. + ## Supported Diagrams A table of supported diagrams—each with their available output formats and