How to use custom styles for parts of text

Let's say you want something like this:

At the moment, you can't easily apply styles (other than font size / color / family) to parts of text. However, there's a trick.

You can use one of the built-in markers, e.g. the blue marker. Your text will look like this:

Then override the blue marker's style in the Design -> Customization tab:

To get the "button" effect, add this piece of CSS:

.page .marker-blue {
  background-color: #ffffff;
  border: 1px solid gray;
  font-size: 1em;
  box-shadow: 1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 2px 3px;
  padding: 1px 5px;
  white-space: nowrap;