Styles for highlighting in online documentation

Sometimes you need to highlight specific content in an online documentation. In addition to the standard options available in all authoring tools, elements with a handwritten look are particularly effective for this purpose. A handwritten look provides a strong contrast to the body text. This creates a particularly striking highlighting effect. At the same time, the strong contrast makes it easy for the human eye to still focus on the content level while reading.

The CSS code for such highlighting is not particularly complex.

Example 1: Box for highlighting any content

A simple “hand-drawn” box can be used to frame and highlight any element.

Hello there.

Looks like I caught your attention. Didn’t I?

Implementation for example 1

At its core, this solution is based on a proposal by Tiffany Rayside: https://codepen.io/tmrDevelops/pen/NPXodB

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


.handbox{
  display: inline-block;
  margin: 10px 0 12px 0; 
  border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
  padding: 1em;
  border: solid 5px red;
}

Step 2: In the text, place the content to be highlighted between the following two HTML snippets:


<div class="handbox">


</div>

Example 2: Vertical line to the left of the text

If the highlighting is to be somewhat more subtle, a single line next to the text can be enough. If the line is outside the text on the left, the layout will not be affected.

Look at the following example, where ChatGPT rants about text highlighting:

“Highlighting text with color is a visually striking way to emphasize important information within a block of text. This technique can be particularly useful when designing documents or web pages, as it can draw attention to key points and help readers quickly find the information they are looking for. However, it is important to use color strategically and sparingly, as too much can be overwhelming and distracting for the reader. When using color to highlight text, it is also important to ensure that the contrast between the text and background is strong enough to make the highlighted text easy to read.”

Implementation for example 2

Essentially, this example uses the same CSS code as example 1, but here you only see the left border. Also, the border has been moved to the left of the text flow.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:


.marker-container {
  display: flex;
  align-items: flex-start; 
  margin-left: -20px;
  padding: 10px 0 12px 0;   
}
.marker-inner{
  display:inline-block;
  border-radius: 2px 15px 225px 15px/15px 225px 15px 255px;
  padding: 0 0 0 15px;
  border-left:solid 5px red;
  text-align: left;
}

Step 2: In the text, place the content to be highlighted between the following two HTML snippets:


<div class="marker-container">
 <div class="marker-inner">


 </div>
</div>

Example 3: Highlighter effect

If you want to highlight individual words or short phrases within a paragraph, a style with the look of a highlighter is a good choice. As with a real highlighter that is not brand new, the shape is not strictly rectangular, and the color gradually fades at the end.

Depending on the CSS code used and on its parameters, the effect can be fairly smooth, as in the example above, or rather intense, as here. This then looks even more like it was drawn manually with a highlighter that has already dried up quite a bit.

Implementation for example 3

The first of the two variants is based on a proposal under https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css. The second of the two variants is based on a proposal under https://codepen.io/monooso/pen/vYVKmwE.

Step 1: Add the following CSS code to the CSS file used by your online documentation or to the head section of your page template:

For variant 1:


span.highlight{
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 3%,
    rgba(255, 225, 0, 0.3)
  );
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;  
}

For variant 2:


span.highlight{
  background: linear-gradient(
      100deg,
      rgba(255, 221, 64, 0) 0.9%,
      rgba(255, 221, 64, 1) 2.4%,
      rgba(255, 221, 64, 0.5) 5.8%,
      rgba(255, 221, 64, 0.1) 93%,
      rgba(255, 221, 64, 0.6) 96%,
      rgba(255, 221, 64, 0) 100%
    ),
    linear-gradient(
      180deg,
      rgba(255, 221, 64, 0) 0%,
      rgba(255, 221, 64, 0.3) 7.9%,
      rgba(255, 221, 64, 0) 15%
    );
  border-radius: 0.125em;
  box-decoration-break: clone;
  padding: 0.125em 0.25em;
}

Step 2: Put the text to be marked as a key into a SPAN element of the highlight class in the HTML code.

Normally, this happens automatically when you create a character style with the same name in your authoring tool and then assign this character style to the text in question. However, some authoring tools rename the styles internally. If it does not work as desired, you need to look at the generated HTML code and, if necessary, adjust the name of the class in the CSS code accordingly.

If the class in the CSS code is called highlight, as in our example, the result in the HTML code generated by the authoring tool after generating the online documentation must finally look like this:


<p>This is the <span class="highlight">highlighted</span> text.</p>