Menu
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?
558
CSS can be added to HTML documents in 3 ways: Inline - by using the style attribute inside HTML elements. Internal - by using a <style> element in the <head> section. External - by using a <link> element to link to an external CSS file.
You should put CSS in the <head> because that's what the specification says do to. If you have more than one CSS file, they will be loaded in the order you put them in the code. If there is style in the second CSS file, it overwrites the style in the first; That will happen by design. Thus, Cascading Style Sheets.
External CSS Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
To export your org file to a web page, type C-c C-e to start the exporter and then press h to select html and o to select open. A new web page should now open in your browser. Similarly, typing l and o in the exporter will convert the org file to latex and then compile it to produce a pdf and display that.
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)
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.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
