Guide: Customizing Inline Formatting

This is a wiki post. If you have something to share, please add it.
There are some TODO placeholders left that I’ll add when I have time.


Customizing RemNote’s Inline Formatting

RemNote has a set of inline formatting options:

  • 6 highlight colors
  • bold
  • italic
  • underline
  • quote/code

Each of those 5 options can be applied independently (only 1 highlight can be active at all times) creating theoretically 7 * 2 * 2 * 2 * 2 = 112 distinct inline styles per rem. And you technically can customize each one of them to your liking!

You can of course use a styling tag and have 112 totally different formats on the next rem.
And we also have not counted sequences of formatting, e.g. italics followed by bold!


Important Note

Please be sensible with the styling you change. At all times the meaning (semantics) of your formatting should be equivalent to that of the original formatting. If you import other peoples notes their formatting will be displayed with your formatting and vice versa!

:white_check_mark: Change the red highlight to red text instead. This is fine since it preserves the intention: Highlight this piece of text with a color.
:red_circle: Change the red highlight to small grey text to represent a comment. Now if you view or import a shared document from your friend (or the official documentation) you are wondering why this really important piece if information you had almost missed has such small grey text.

Also be aware that additional formatting options (e.g. builtin text colors) might be implemented in the future. Think about what this means for you and how you want to handle this in your knowledge base especially before committing to any of the more hacky ones.


Formatting Tags

If a formatting should be applied to the whole rem use a styling tag instead! They are generate backlinks and are easier to manage once a native solution comes available.

You can also limit your styling changes to a tagged rem or a subtree by prefixing with [data-rem-tags~="your-tag"] or [data-rem-container-tags~="your-tag"] respectively.

More info here:


Targeting inline style

Highlights

.rem-text .highlight-color--red {}
.rem-text .highlight-color--orange {}
.rem-text .highlight-color--yellow {}
.rem-text .highlight-color--green {}
.rem-text .highlight-color--blue {}
.rem-text .highlight-color--purple {}

Bold, Italics, Underline

TODO

Quote

.quote {}

Targeting Combinations

TODO (Here the difficulty is that the classes above are probably on different levels of the DOM so you have to remember that for the ordering)

Targeting Sequences

TODO

Can/should be combined with (tagged) references.

Example:
image

Useful CSS Rules

  • color
  • background color
  • font-size
  • font-weight
  • font-style
  • text-decoration
  • border
  • border-radius

Examples

WIP: I will fill in examples when I have time.

Quote as inline code by @marcothesis

Note: This changes the semantics from quote (something another person wrote, not your own thought) to code (a piece of a programming language), but ` is code in markdown as well so this seems fine.

image

CSS

.quote {
font-family: Menlo, Monaco, monospace;
font-size: 14px;
color: #e64400;
border: 1px solid #dfdfdf;
background-color: #f6f6f6;
}

Alternative set of highlight colors

TODO

Highlights to text colors globally

TODO

Highlights to text colors for tagged rem

CSS
[data-rem-tags~="fg-color"] .rem-text .highlight-color--red {
  background-color: unset;
  color: rgb(234, 67, 53); }
[data-rem-tags~="fg-color"] .rem-text .highlight-color--orange {
  background-color: unset;
  color: rgb(194, 111, 27); }
[data-rem-tags~="fg-color"] .rem-text .highlight-color--yellow {
  background-color: unset;
  color: rgb(234, 183, 0); }
[data-rem-tags~="fg-color"] .rem-text .highlight-color--green {
  background-color: unset;
  color: rgb(52, 168, 83); }
[data-rem-tags~="fg-color"] .rem-text .highlight-color--blue {
  background-color: unset;
  color: rgb(66, 133, 244); }
[data-rem-tags~="fg-color"] .rem-text .highlight-color--purple {
  background-color: unset;
  color: rgb(161, 66, 244); }

Danger area

These things are possible, but you should not do them.

These things change the semantics of the formatting and will mess up your notes when you share them and the notes you import from other people.

Strike

TODO

Comments

TODO

5 Likes