9

When I insert C code block inside an org-mode file, the syntax highlight and indentation of the source code are customized as I wanted.

  1. When I export it into a html file, the syntax highlight in the html file is exactly the same as in Emacs. But the syntax highlight works better with the color-theme of my Emacs. For instance, the { symbol is white in my C code block, but my color-theme is dark, if I export it into html, the background of the html file is white too, it means, you cannot see { in the source code block of exported html even thought it is there.

  2. The indentation of the source code is normal in my Emacs (as I customized it), but the indentation of the source code in exported html file will be different, it adds more spaces for indentation.

  3. If I export the same org file in emacs -q, they are normal in the exported html file, but the syntax highlight and indentation of the source code will be the default configuration of Emacs. So it means font-faces configurations in init.el will affect org-export.

So my question is: when I export an org-mode file which contains source code block into html file (or maybe other formats such as PDF as well), is it possible to get rid of all my own configuration of font-faces about the source code and do it as in emacs -q?

Update:

The second problem is solved by setting (setq org-src-preserve-indentation t) either in init file or by running it through M-: (eval-expression).

Update2:

The first problem is solved by Set the background of org-exported <code> blocks according to theme.

The third problem is not important if 1st and 2nd problems are solved.

10

The solution for this spans elisp, org-mode and css customization.

elisp

By default, the fontification information is embedded in the exported html file. We need to disable that and tell org-mode that we are planning to specify the font formatting information using an external css file.

I have chosen to prefix the html class names with org- string.

;; (setq org-html-htmlize-output-type 'inline-css) ;; default
(setq org-html-htmlize-output-type 'css)
;; (setq org-html-htmlize-font-prefix "") ;; default
(setq org-html-htmlize-font-prefix "org-")

org-mode

In the org-file, you then specify which css file to use. This file will contain information on how you want to format each org- class.

# My custom fontification theme
#+HTML_HEAD: <link href="path/to/your/custom/theme.css" rel="stylesheet">

css

Here is my custom theme css file in which I have copied the color codes from the leuven-theme. You can find the latest version of the below css from my git.

/* Set the colors in <pre> blocks from the Leuven theme */
pre                                      {background-color:#FFFFFF;}
pre span.org-builtin                     {color:#006FE0;font-weight:bold;}
pre span.org-string                      {color:#008000;}
pre span.org-keyword                     {color:#0000FF;}
pre span.org-variable-name               {color:#BA36A5;}
pre span.org-function-name               {color:#006699;}
pre span.org-type                        {color:#6434A3;}
pre span.org-preprocessor                {color:#808080;font-weight:bold;}
pre span.org-constant                    {color:#D0372D;}
pre span.org-comment-delimiter           {color:#8D8D84;}
pre span.org-comment                     {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-1            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-2            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-3            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-4            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-5            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-6            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-7            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-8            {color:#8D8D84;font-style:italic}
pre span.org-outshine-level-9            {color:#8D8D84;font-style:italic}
pre span.org-rainbow-delimiters-depth-1  {color:#707183;}
pre span.org-rainbow-delimiters-depth-2  {color:#7388d6;}
pre span.org-rainbow-delimiters-depth-3  {color:#909183;}
pre span.org-rainbow-delimiters-depth-4  {color:#709870;}
pre span.org-rainbow-delimiters-depth-5  {color:#907373;}
pre span.org-rainbow-delimiters-depth-6  {color:#6276ba;}
pre span.org-rainbow-delimiters-depth-7  {color:#858580;}
pre span.org-rainbow-delimiters-depth-8  {color:#80a880;}
pre span.org-rainbow-delimiters-depth-9  {color:#887070;}
pre span.org-sh-quoted-exec              {color:#FF1493;}
  • Can I just use the default emacs -q style instead of the custom/theme.css? – CodyChan Jan 22 '15 at 18:10
  • The default style is to use the current emacs theme. You can manually copy the colors the default theme has to your emacs_default_theme.css – Kaushal Modi Jan 22 '15 at 18:25
  • 1
    I haven't tried this but you can probably redefine org-html-fontify-code such that it sets the default theme before fontification and then restores the earlier theme. – Kaushal Modi Jan 22 '15 at 18:28
  • It would be really useful if org mode accepted a no-theme-inherit argument to #+BEGIN_SRC , e.g. #+BEGIN_SRC haskell no-theme-inherit .. #+END_SRC that just used the emacs default fontification information for the code, in this case Haskell. – Rob Stewart Oct 11 '15 at 14:57
  • I want to point out that the css above has no entry for the regular code text and it just appears black. It would be nice to find that entry. I am able to customize every entry, for example pre span.org-function-name {color:rgb(255,000,255);} but I cannot change the black color of the most of the code. What span.org-??? would that be? – Steve Apr 22 '16 at 16:05
1

I found a simple solution / workaround for the colour issue. Before exporting, type M-x customize-themes and turn on the leuven theme. It's a theme with a light background that seems suitable for printing code on white paper. After exporting, turn the theme off again, and you'll be back with your original colours.

I somehow assumed that I'd have to come up with some complicated way of switching configuration for exporting, so I'm relieved that it was this simple!

If you're doing this often, it might be worth advising the HTML export function to do this automatically:

(defvar my-org-html-export-theme 'tsdh-light)

(defun my-with-theme (orig-fun &rest args)
  (load-theme my-org-html-export-theme)
  (unwind-protect
      (apply orig-fun args)
    (disable-theme my-org-html-export-theme)))

(with-eval-after-load "ox-html"
  (advice-add 'org-export-to-buffer :around 'my-with-theme))
  • Yes, this works. But if you work with a lot of files that you export frequently to HTML you will find it very annoying to switch back and forward between themes. – Christian Herenz Dec 19 '17 at 17:34
  • 1
    Yes, I ended up advising the export function: github.com/legoscia/dotemacs/blob/master/… – legoscia Dec 19 '17 at 17:35
  • OK - also a solution. But, why not follow above route and use a custom CSS based on some light theme? – Christian Herenz Dec 19 '17 at 17:38
  • @legoscia This seems does not work for me. – stardiviner Apr 22 '18 at 6:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.