Text formatting with custom CSS
As you probably already know, Scrapbox uses quite an interesting formatting language.
Formatted text starts with [ and ends with ]
This is the same thing as for links that also defined by simply using [ ]!
Immedietly after [ one of special characters follows:
* makes a text (and images!) bold and when repeated, then bigger, like bold and bigger
/ makes a text cursive, like cursive
- makes a strikethrough effect, like deleted
The genious of Scrapbox is that you can combine any of these (order does not matter):
[*/ => cursive bold
[*- => deleted bold
[/- => deleted cursive
The markdown equivalent of the first option would look like: _**cursive bold**_ . In other words, Markdown requires you to type 6 special characters, while Scrapbox.io only 4, i.e. [*/ cursive bold]. The difference gets higher as we add custom formatting options.
Custom CSS allows us to add other custom characters to this, namelly any of these: !"#%&'()*+,-./{|}<>_~. And we can then use them together with predefined custom characters.
The simplest example is for the red text. Under your profile page or in Settings create code:style.css and put into it the following code:
code:style.css
deco-\! {
color:red;
}
Now when we write [! red text], we will create a red text! And we can combine this with any predefined formatting, like:
super huge red text in cursive
Impressive, if you ask me! And you can define in the similar way, i.e. deco-\ + special character many other formatting types.