How do I change Org's HTML code background?

Question

Modifying Minted background is easy if my output from Org is LaTeX.

\definecolor{LightGray}{gray}{0.9}

\begin{minted}
[
frame=lines,
framesep=2mm,
baselinestretch=1.2,
bgcolor=LightGray,
fontsize=\footnotesize,
linenos
]
{python}
(code)
\end{minted}

Also, for Minted I understand that I "have to set the background color [myself]. This is not the default because it is really printer unfriendly." That's just fine, as I need no printouts. But IIUC HTML export does not go through LaTeX. Org exports directly to HTML (is that right?).

As it is, the syntax highlighting is close to unreadable.

If I use the .emacs

(set-foreground-color "white")
(set-background-color "black")

(defun my-org-inline-css-hook (exporter)
  "Insert custom inline css"
  (when (eq exporter 'html)
    (let ((my-pre-bg (face-background 'default)))
      (setq org-html-head-include-default-style nil)
      (setq org-html-head
            (format "<style type=\"text/css\">\n pre.src { background-color: %s;}</style>\n" my-pre-bg)))))

(add-hook 'org-export-before-processing-hook 'my-org-inline-css-hook)

the HTML code output does get a dark background, but other colors vanish. Do you see what is happening?

The other colors probably get the default. You might try setting your css to `pre.src { background-color: %s; color: purple; }` to see if the other text turns purple. If it does, you could change those to white, or to `(face-foreground 'default)` — amitp, Apr 24 '23 at 22:31
Well, for a lot of elements the foreground is black, so they disappear into the black background. You'll have to either change them or change the background to something other than black - a somewhat darker grey (#626262 seems to work OK) will set off the black foreground elements and also the lighter grey elements (like `print` and `range`) and make the rest pop. — NickD, Apr 25 '23 at 00:31
Don't change your .emacs for this: adding `#+HTML_HEAD_EXTRA: ` seems to work in the sense that code blocks are readable withouth anything hiding away in the background. See [CSS Support](https://orgmode.org/manual/CSS-support.html) in the manual. — NickD, Apr 25 '23 at 00:42

Sam · Accepted Answer · 2023-04-25T09:11:54.143

1

Summarizing amitp's and NickD's comments:

Do not modify your .emacs file. It's sufficient to add

#+HTML_HEAD_EXTRA: <style> pre.src { background-color: black; color: white; }</style>

in your .org file.

edited Apr 25 '23 at 09:11

answered Apr 25 '23 at 04:15

Sam

317
1
11

score 0 · Answer 2 · answered Apr 26 '23 at 01:22

I would go with custom css instead to have more control of the html output look'n'feel, including source code blocks.

This is relevant configuration of org:

  (setq org-html-head-include-default-style nil
        org-html-htmlize-output-type 'css)
  (setq org-html-style 
        (concat "<style type=\"text/css\">\n"
                (with-temp-buffer
                  (insert-file-contents (concat user-emacs-directory "org/org.css"))
                  (buffer-string))
                "</style>\n"))

Where default org css is not included and htmlize output would be pure css you can style yourself.

Then with org-html-style you can include your own css, here I include (as in read from file) ~/.config/emacs/org/org.css.

The org.css contents should cover everything you care about, including the relevant htmlize css class names:

.org-src-container {
    border: 1px solid #ccc;
    background-color: #f7f7f3;
    border-radius: 3px;
    line-height: 1.3;
    font-family: monospace;
    margin: 1em auto;
    padding: .1em .5em;
    position: relative
}
/* highglighting */
.org-function-name {
    color: #af00af
}
.org-keyword {
    color: #005faf
}
.org-builtin {
    color: #870087
}
.org-string, .org-doc {
    color: #008700
}
.org-comment,
.org-comment-delimiter {
    color: #8a8a8a;
    font-style: italic;
}
.org-preprocessor {
    color: #008787
}
.org-type {
    color: #af5f00
}
.org-variable-name {
    color: #870087
}
.org-constant {
    color: #af0000
}
.org-warning {
    color: #ff8c00;
    font-weight: 700
}
.org-error {
    color: red;
    font-weight: 700
}
.org-escape-glyph {
    color: #8700ff
}

Result might look like:

Neat idea to use this level of granularity! But whenever I attempted to adjust individual colors the result was an eye sore. A way to hook back on a palette of colors designed by someone who is actually capable of making them cohesive, or even not clash, is a lot easier. — Sam, Apr 26 '23 at 13:06

How do I change Org's HTML code background?

2 Answers2