Use case example — custom inline formatting

[anareaty]

Hi! I played with your plugin a little bit and come up with some ideas I find useful. One of them is custom inline formatting, not supported by default Markdown. For this to work formatted text and the custom class code must be put inside of any Markdown tags, so it is separated from the whole line. Here is some examples:

Additional highliting colors

Css:

mark.hl-orange {
background-color: rgba(208,138,112, 0.2);
}

mark.hl-green {
background-color: rgba(163,190,140, 0.2);
}

Result:

Underline

Css:

.underline {
font-style: normal;
text-decoration: underline;
}

Result:

Superscript

Css:

.super {
font-style: normal;
vertical-align: super;
font-size: var(--font-smallest);
}

Result:

Subscript

Css:

.sub {
font-style: normal;
vertical-align: sub;
font-size: var(--font-smallest);
}

Result:

To make it easier to work with these custom formattings I use the combination of Wrap with shortcuts plugin and Editing Toolbar plugin. The first lets you create commands for wrapping text in any tags (including custom classes code as part of the tag), and the second allows to put these commands on the toolbar, you can even add custom icons. It works great together!

By tha way, I wanted to say that your plugin is great and creates so many possibilities! It's just something I come up with lately, but there are definitely much more possible uses. Thank you for your work! (Sorry if my English is bad).

[LilaRest]

@anareaty Wow this is brilliant ! I've never thought of using Custom Classes blocks for styling inline formatting.

I'll definitely add this in the "Demonstrations" section of the README.md file of this repo.

By the way if the plugin is used for this kind of tiny inline styling, I will add an even more shorthand version that just starts with a dot : .my-class is equivalent to cls: my-class

Thanks again for your contributions ! And glad to hear that this plugin is useful to you :smile: