/

Annotations

On this page
  • Highlight
  • Underline
  • Box
  • Circle
  • StrikeThrough
  • CrossedOff

Note annotations are made possible using a React port of Rough Notation. Annotations can be added by wrapping your text with one of the components provided in your notes.

Annotation defaults have been defined, but you can ovverride them if you want. See all the options here.

mdx
I want to <Highlight color="green">highlight</Highlight> some text

Highlight

Himenaeos in a ante pretium cubilia ut nisl dictumst ultrices massa, elementum iaculis varius ad cursus vehicula torquent eros penatibus, rhoncus porttitor senectus est consequat vitae tempus mollis mus. Posuere sociis morbi suspendisse aliquam arcu convallis ac montes himenaeos, quisque iaculis eget lobortis auctor tempus feugiat fames integer, platea lacinia dignissim egestas nunc orci ad ipsum.

mdx
I want to <Highlight>highlight</Highlight> some text

Underline

Habitant ipsum lorem penatibus condimentum orci curabitur ligula tempus aenean dignissim adipiscing interdum mi, quis sapien convallis nisl vel dolor lacus pharetra montes taciti, nibh venenatis consectetur dictumst maecenas cum morbi senectus curae imperdiet massa platea.

mdx
I want to <Underline>underline</Underline> some text

Box

Eros scelerisque erat mauris euismod tincidunt euismod sit cubilia ornare fringilla, congue risus mauris nostra lobortis consequat torquent suscipit, montes in non himenaeos adipiscing aliquam.

mdx
I want to <Box>put a box around</Box> some text

Circle

Ante et dis platea fusce sapien faucibus nullam, eget dictum dui mus nunc purus integer facilisis, facilisi pellentesque cubilia iaculis augue arcu.

mdx
I want to <Circle>put a circle around</Circle> some text

StrikeThrough

Netus dolor aliquam mauris sociis imperdiet commodo taciti, odio nullam vitae vulputate ullamcorper phasellus cubilia fringilla, adipiscing in pharetra per tincidunt consectetur.

mdx
I want to <StrikeThrough>strike-through</StrikeThrough> some text

CrossedOff

Habitant ligula pharetra elementum pellentesque lacus ante id ipsum imperdiet, fermentum rhoncus integer erat egestas blandit risus odio dictum, dui mattis nullam nisl arcu ridiculus a penatibus.

mdx
I want to <CrossedOff>cross-off</CrossedOff> some text
Edit this page
Want to make your own site like this?
Try gatsby-theme-code-notes by Zander Martineau.
logo
A Gatsby theme for storing your code-related notes