You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
It would be nice if you could document some of the technology used. Soon after realizing markdown-it-attrs was used, I discovered curly brackets can add classes to text. For example, some text with red background{.red} could be used to make the background red. This works at the block level but markdown-it-attrs supports inline elements as well. For example, The words **red background**{.red} have a red background. Unfortunately, you can't add an inline element to arbitrary text without the side effect of the attribute used. The "red background" text in the example is bold.
This led me down the road to discover which classes can be used. This is where I discovered the frontend uses Vuetify theming enabling things like This sentence has some **blue text**{.blue--text}, some **red text**{.red--text} and some **yellow text**{.yellow--text} without changing the paragraph color. Additionally, .font-weight-regular can be used to negate the bold effect. **light blue text**{.blue--text .text--lighten-3 .font-weight-regular} produces light blue text with the same weight as the rest of the text.
None of this is documented in GitHub or the documentation yet it provides a rich feature to styling pages and text. I realize the caveat is this may not be supported in the future when theming is enabled. Additionally, adding many classes using the curly brackets syntax goes against the simplicity of markdown. Nonetheless, it's an option for scenarios where styling the text is desired.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
It would be nice if you could document some of the technology used. Soon after realizing markdown-it-attrs was used, I discovered curly brackets can add classes to text. For example,
some text with red background{.red}
could be used to make the background red. This works at the block level but markdown-it-attrs supports inline elements as well. For example,The words **red background**{.red} have a red background
. Unfortunately, you can't add an inline element to arbitrary text without the side effect of the attribute used. The "red background" text in the example is bold.This led me down the road to discover which classes can be used. This is where I discovered the frontend uses Vuetify theming enabling things like
This sentence has some **blue text**{.blue--text}, some **red text**{.red--text} and some **yellow text**{.yellow--text} without changing the paragraph color.
Additionally,.font-weight-regular
can be used to negate the bold effect.**light blue text**{.blue--text .text--lighten-3 .font-weight-regular}
produces light blue text with the same weight as the rest of the text.None of this is documented in GitHub or the documentation yet it provides a rich feature to styling pages and text. I realize the caveat is this may not be supported in the future when theming is enabled. Additionally, adding many classes using the curly brackets syntax goes against the simplicity of markdown. Nonetheless, it's an option for scenarios where styling the text is desired.
OS: openSUSE Leap 15.2
Wiki.js version: 2.5.170
Database engine: PostgreSQL 12.5
Beta Was this translation helpful? Give feedback.
All reactions