Saturday, November 13, 2021

Org Exporting & CSS

I'm getting closer. Slowly.

Been dinking around with Emacs org-mode exporting and making it look decent with CSS.

Although I was inspired by Sphinx, and will check it out, I decided to start with Emacs' org-mode and see if I could style that adequately. I use Emacs every day, using Org-mode is simpler than switching to reStructuredText, and if I can stay with Emacs, I don't have to learn another tool.

But, although it's easy to write using org-mode, and dead simple to export from it to HTML, the world of styling that HTML with CSS is hellishly crude.

There is nothing wrong with using the rudimentary styling that exporting from org-mode produces, except that it hurts to look at it. Totally functional in the same way that bolting iron plates together is a functional way to make a boat. It works if you do it right, but it's neither pleasant to look at nor easy to live with.

There is a "Projects using Sphinx" page with lots of examples.

"PyEMD" is a good example: clean, uses the default theme, readable, totally fine.

And we do have a couple of Emacs projects that use themes based on this, but they are hard to track down and not exactly easy to figure out. I'm basically documenting what I've found so I don't lose it all somehow.

(1) DISTRO.TUBE This is what I like best

DistroTube.com is a site created by Derek Taylor [DT], creator of the DistroTube [DT] video channel on YouTube and Odysee [LBRY]. I create videos about GNU/Linux, free software, open source software and related interests. This site was created in Emacs and written in Org Mode. I use Org Export to convert the “org” files into HTML, and I based the design on the popular “ReadTheOrg” theme from Org-HTML-Themes

It has two themes, and offers the CSS for both: htmlize and readtheorg

(2) FNIESSON is up next: "How to export Org mode files into awesome HTML in 2 minutes". This was apparently the inspiration for DistroTube

Though you can easily override CSS stylesheets and add your own HTML themes, we can say (or write) that Org mode provides a /basic/ HTML support. Org-HMTL themes is an open source framework for providing you with a list of very nice (cross-browser) themes for all your Org documents. Use them to style your docs, and your colleagues will come up to tell you that you are a genius!

OK, fine, but not quite there is what I think. fniessen

(3) GONGZHITAAO For me this is a relatively minor contribution, though I'm glad it's there. Everything helps. I'm willing to learn from anyone and everyone, and I'm grateful that they've shared.

Start at Living in Emacs.

He has a demo page, with a presence on at GitHub as well, where you can grab the CSS ("Simple and clean CSS for Org-exported HTML").

(4) JESSEKELLY881 CSS here. See it in action at Imagine, with the CSS here. And there is another view at Rethink.

(5) JUAN JOSÉ GARCÍA RIPOLL He has A CSS Stylesheet For Exporting Org-Mode Files. I'm guessing that the page you get to is the result of his CSS, which is directly accessible at this location.

(6) NORANG Org Mode - Organize Your Life In Plain Text! is famous among Emacs users. I can't say that I'm nuts about the theme he (Bernt Hansen) uses, but it's functional and it's there. I did use his HTML as a sort of test bed to help tune what will be my CSS. You can find his CSS here.

(7) ORG-SPEC This is another example. Can't say that I'm ecstatic, but it's better than I could have done at this stage. I'm keeping the links for future reference because no matter what, I always have more to learn. See "Document", the CSS is also directly accessible here.

At GitHub, see thi-ng. See the info on THOMASF, below, where you can get access to "solarized-dark.css" and "solarized-light.css"

(8) MOWEN I don't know of a sample page, but the CSS is available at GitHub.

(9) NEILSEN See Emacs org-mode examples and cookbook. Not wildly lovely according to me, but it's there and I'm once again grateful. CSS is directly accessible here.

(10) SAKURA See sakura demo, and GitHub - oxalorg_sakura. "Sakura: a minimal classless css theme. Just drop it in and watch the websites blossom!"

There is an example website using sakura: ComputableVerse. And the CSS is directly accessible here.

(11) THOMASF See solarized-css. "To provide general solarized light and dark colorshcemes for HTML documents that mostly relies on standard HTML elements."

Examples and more info are at Github - solarized-css. Directly access the CSS (light) and (dark). And see the HTML test page.

 


See tabs at the top for definitions and books.
Have anything worth adding? Then try sosayseff+nosey@nullabigmail.com
Me? Caught picking my nodes again. Embarrassing, as always.