Search code examples
markdown

How to make multiple overlapping annotations/markings, with different styles, in markdown

I would like to know if there is a way to annotate/mark text in markdown as shown in this figure,

enter image description here

There are two different colored highlights and an underlining style in a third color. The three annotation/markings overlap as well.

Is this possible in markdown? If not, is it possible in any other simple markup language?

Solution

  • Markdown doesn't support anything like this. It's a very simple language.

    HTML is a first-class citizen in Markdown, and it gets you closer. But since HTML doesn't permit misnested tags, to reliably get the result you want you'll have to explicitly start and stop each combination of styles.

    For example:

    document.querySelectorAll(".md").forEach(function(e) {
  e.innerHTML = marked.parse(e.innerHTML);
});
    * {
  font-size: x-large;
  line-height: 1.4em;
}

.bg-yellow {
  background-color: #fef3c0;
}

.bg-orange {
  background-color: #ffe3c5;
}

.u-purple {
  text-decoration: underline #9f56ff;
  text-decoration-thickness: 2px;
}
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div class="md">
  <span class="bg-yellow">If water comes directly from a good,
    </span><span class="bg-yellow u-purple">pretreated source, then no additional purification is needed;
    </span><span class="u-purple"> otherwise, pretreat water before use.
    </span><span class="u-purple bg-orange">Store water in
    sturdy,</span><span class="bg-orange"> leak-proof, breakage-resistant containers.</span>
  Consider using plastic bottles commonly...
</div>

    Note that I made sure to jam each <span> right up against the preceding </span> where appropriate to avoid unstyled whitespace.

    Not very convenient, but certainly possible if you're generating the HTML.