how to tell org-mode to embed my css file on HTML export?

Question

What's the best way to instruct org-mode to embed all the css from my stylesheet into a single HTML file, rather than including a link to it as it does by default?

Answer 1

I faced this problem recently and none of the suggestions/answers worked for me. I finally found a solution in this link, which is to write your own function as follows and put it in you .emacs or init.el file.

(defun my-org-inline-css-hook (exporter)
  "Insert custom inline css"
  (when (eq exporter 'html)
    (let* ((dir (ignore-errors (file-name-directory (buffer-file-name))))
           (path (concat dir "style.css"))
           (homestyle (or (null dir) (null (file-exists-p path))))
           (final (if homestyle "~/.emacs.d/org-style.css" path))) ;; <- set your own style file path
      (setq org-html-head-include-default-style nil)
      (setq org-html-head (concat
                           "<style type=\"text/css\">\n"
                           "<!--/*--><![CDATA[/*><!--*/\n"
                           (with-temp-buffer
                             (insert-file-contents final)
                             (buffer-string))
                           "/*]]>*/-->\n"
                           "</style>\n")))))

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

Answer 2

There is another solution for that.

In your org file, you can use #+SETUPFILE: file, that enables additional in-buffer settings:

#+SETUPFILE: style.css.org

And in the file style.css.org, you can have:

#+OPTIONS: org-html-head-include-default-style:nil

#+HTML_HEAD: <style type="text/css">
#+HTML_HEAD:   ...your CSS here...
#+HTML_HEAD: </style>

The content of style.css.org is:

• org-html-head-include-default-style:nil tells to not use the default style.
• ...your CSS here... is to be replaced by your CSS code. Every line must be prefixed with #+HTML_HEAD:.

The advantage of this solution is that you can have a style.css.org per file. I personally use the trick to have one style.css.org per directory of org files.

Credit goes to Paul Provost.

Note that single line CSS is much more performance efficient here than multiple lines CSS.