Change text color for individual blocks or even words

Customization
13

For changing in the middle of the block, look above.
For changing the whole block, could combine a macro with some custom code:

  • In file custom.js, add this code:
const coloredBlockObserver = new MutationObserver(() => {
    document.querySelectorAll("span.colored-block").forEach(
        (span)=>{ span.closest(".block-content").style.color = span.style.color }
    );
});

coloredBlockObserver.observe(document.getElementById("main-content-container"), {
    attributes: true,
    subtree: true,
    attributeFilter: ["class"],
});
  • In file config.edn, inside :macros {}, add a line like the ones below:
    • :colored-block "<span class='colored-block' style='color: $1' />"
    • :light-yellow-block "<span class='colored-block' style='color: #d9d898' />"
  • Then inside a block, type respectively:
    • {{colored-block <color>}}<text>
      • e.g. {{colored-block #d9d898}}this is a test text, which should be colored
    • {{light-yellow-block}}<text>
      • e.g. {{light-yellow-block}}this is a test text, which should be colored
1 Like