Skip to content

Commit 6ea6ca9

Browse files
committed
Updates UFM with "alias prefix" info
1 parent 2933e54 commit 6ea6ca9

File tree

1 file changed

+12
-10
lines changed

1 file changed

+12
-10
lines changed

15/umbraco-cms/reference/umbraco-flavored-markdown.md

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,25 @@ UFM is built on top of [GitHub Flavored Markdown](https://github.github.com/gfm/
1212

1313
## Syntax
1414

15-
The essence of the UFM syntax is curly brackets with a marker prefix.
15+
The essence of the UFM syntax is curly brackets with an alias prefix delimited with a colon.
1616

1717
```markdown
18-
{<marker prefix> <contents> }
18+
{<alias prefix>: <contents>}
1919
```
2020

2121
For clarity...
2222

23-
- The opening is `{` U+007B Left Curly Bracket
24-
- The closing is `}` U+007D Right Curly Bracket
25-
- The marker prefix can be any valid Unicode character(s), including emojis
23+
- The opening token is `{` U+007B Left Curly Bracket
24+
- The alias prefix can be any valid Unicode character(s), including emojis
25+
- Followed by `:` U+003A Colon, (not part of the alias prefix itself)
2626
- The contents within the curly brackets can include any Unicode characters, including whitespace
27+
- The closing token is `}` U+007D Right Curly Bracket
2728

28-
An example of this syntax to render a value of a property by its alias is: `{= bodyText }`.
29+
An example of this syntax to render a value of a property by its alias is: `{umbValue: bodyText}`.
2930

30-
The curly brackets indicate that the UFM syntax should be processed. The `=` marker prefix indicates which UFM component should be rendered, and the `bodyText` contents are the parameter that is passed to that UFM component.
31+
The curly brackets indicate that the UFM syntax should be processed. The `umbValue` alias prefix indicates which UFM component should be rendered, and the `bodyText` contents are the parameter that is passed to that UFM component.
3132

32-
With this example, the syntax `{= bodyText }` would be processed and rendered as the following markup:
33+
With this example, the syntax `{umbValue: bodyText}` would be processed and rendered as the following markup:
3334

3435
```js
3536
<ufm-label-value alias="bodyText"></ufm-label-value>
@@ -57,7 +58,7 @@ If you wish to develop your own custom UFM component, you can use the `ufmCompon
5758
name: 'My Custom UFM Component',
5859
api: () => import('./components/my-custom.component.js'),
5960
meta: {
60-
marker: '%',
61+
alias: 'myCustom',
6162
},
6263
}
6364
```
@@ -75,7 +76,8 @@ export class MyCustomUfmComponentApi implements UmbUfmComponentBase {
7576
export { MyCustomUfmComponentApi as api };
7677
```
7778

78-
Using the syntax `{% myCustomText }` would render the markup `<ufm-custom-component text="myCustomText">`. Then inside the `ufm-custom-component` component code, you can perform any logic to render your required markup.
79+
Using the syntax `{myCustom: myCustomText}` would render the markup `<ufm-custom-component text="myCustomText">`. Then inside the `ufm-custom-component` component code, you can perform any logic to render your required markup.
80+
7981

8082
## Post-processing and sanitization
8183

0 commit comments

Comments
 (0)