saul365/LoveIt
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(style): improve style shortcode to support nesting (#263)

Browse Source
This commit is contained in:
Dillon
2020-04-27 01:19:23 +08:00
committed by GitHub
parent f8b84de3f8
commit fc46fba6aa
19 changed files with 90 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
exampleSite/content/posts/theme-documentation-extended-shortcodes.en.md
View File

@@ -22,26 +22,30 @@ lightgallery: true
## style
{{< version 0.2.0 changed >}}
`style` is a shortcode to insert custom style in your post.
The `style` shortcode has two positional parameters.
The **first** one is the custom style content.
The **first** one is the custom style content,
which supports nesting syntax in [SASS](https://sass-lang.com/documentation/style-rules/declarations#nesting)
and `&` referring to this parent HTML element.
And the **second** one is the HTML tag around the content you want to change style, and whose default value is `div`.
And the **second** one is the tag name of the HTML element wrapping the content you want to change style, and whose default value is `div`.
Example `style` input:
```markdown
{{</* style "text-align: right;" */>}}
This is a right-aligned paragraph.
{{</* style "text-align:right; strong{color:#00b1ff;}" */>}}
This is a **right-aligned** paragraph.
{{</* /style */>}}
```
The rendered output looks like this:
{{< style "text-align: right;" >}}
This is a right-aligned paragraph.
{{< style "text-align:right; strong{color:#00b1ff;}" >}}
This is a **right-aligned** paragraph.
{{< /style >}}
## link