Changing Org Mode underlines to the HTML mark element
| org
Apparently, HTML has a mark element that is useful
for highlighting. ox-html.el in Org Mode doesn't
seem to export that yet. I don't use _ to
underline things because I don't want that
confused with links. Maybe I can override
org-html-text-markup-alist to use it for my own
purposes…
(with-eval-after-load 'org (setf (alist-get 'underline org-html-text-markup-alist) "<mark>%s</mark>"))
Okay, let's try it with:
Let's see _how that works._
Let's see how that works. Oooh, that's promising.
Now, what if I want something fancier, like the way it can be nice to use different-coloured highlighters when marking up notes in order to make certain things jump out easily? A custom link might come in handy.
(defun my-org-highlight-export (link desc format _) (pcase format ((or '11ty 'html) (format "<mark%s>%s</mark>" (if link (format " class=\"%s\"" link) link) desc)))) (with-eval-after-load 'org (org-link-set-parameters "hl" :export 'my-org-highlight-export) )
A green highlight might be good for ideas, while red might be good for warnings. (Idea: I wonder how to font-lock them differently in Emacs…)
I shouldn't rely only on the colours, since people reading through RSS won't get them and also since some people are colour-blind. Still, the highlights could make my blog posts easier to skim on my website.
Of course, now I want to port Prot's excellent colours from the Modus themes over to CSS variables so that I can have colours that make sense in both light mode and dark mode. Here's a snippet that exports the colours from one of the themes:
(format ":root {\n%s\n}\n" (mapconcat (lambda (entry) (format " --modus-%s: %s;" (symbol-name (car entry)) (if (stringp (cadr entry)) (cadr entry) (format "var(--modus-%s)" (symbol-name (cadr entry)))))) modus-operandi-palette "\n"))
So now my style.css has:
/* Based on Modus Operandi by Protesilaous Stavrou */ :root { // ... --modus-bg-red-subtle: #ffcfbf; --modus-bg-green-subtle: #b3fabf; --modus-bg-yellow-subtle: #fff576; // ... } @media (prefers-color-scheme: dark) { /* Based on Modus Vivendi by Protesilaous Stavrou */ :root { // ... --modus-bg-red-subtle: #620f2a; --modus-bg-green-subtle: #00422a; --modus-bg-yellow-subtle: #4a4000; // ... } } mark { background-color: var(--modus-bg-yellow-subtle) } mark.green { background-color: var(--modus-bg-green-subtle) } mark.red { background-color: var(--modus-bg-red-subtle) }
Interesting, interesting…