OrgCSS - Stylesheet for Org-exported HTML
Table of Contents
Add the following setup to your org file to use the stylesheet.
#+HTML_HEAD: <link rel="stylesheet" type="text/css" href="https://gongzhitaao.org/orgcss/org.css"/>
As the Orgmode is frequently updated, the structure of the exported source code is changed drastically. As a result, I added tags (since Orgmode v9.1.4) to indicate the corresponding Orgmode version.
When exported to HTML, there are three options for code highlighting, controlled
by the variable
(setq org-html-htmlize-output-type 'inline-css)
This is the default setting. It highlights the code according to the current Emacs theme you are using. It directly applies color to the code with inline styles, e.g.,
The problem is that the highlight theme depends on the Emacs theme. If you use a dark theme in your Emacs but a light theme (usually we like light themed web pages) web pages, the exported code are hardly illegible due to the light font color, or vice versa.
(setq org-html-htmlize-output-type nil)
This configuration disables highlighting by
- The problem is that you have to rely on highlight.js support on a certain
language which is occasionally missing, e.g.,
- The problem is that you have to rely on highlight.js support on a certain language which is occasionally missing, e.g.,
(setq org-html-htmlize-output-type 'css)
This is my preferred way. If you use my org.css, then set this option in your init file and you are all set.
This is similar to the first optional, instead of using inline styles, this will assign classes to each component of the code, e.g.,
<span class="org-type">int</span>, and you could create your own stylesheet for
To obtain a list of all supported org classes, run M-x org-html-htmlize-generate-css. This will create a buffer containing all the available org style class names in the current Emacs session (refer to src/css/_htmlize.css for an example).
The CSS classes used by
ox-html are documented here.