Skip to content
Simple and clean CSS for Org-exported HTML
CSS JavaScript TeX
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs minor update index.html Jan 1, 2020
src minor update Jan 1, 2020
.gitignore tidy gulp, add makefile highlight Apr 13, 2017
LICENSE update license display Apr 7, 2019
LICENSE.996ICU update license, add 996icu Apr 7, 2019
LICENSE.MIT update license, add 996icu Apr 7, 2019
README.md update license display Apr 7, 2019
gulpfile.js move to docs/ folder for serving Apr 7, 2019
package-lock.json update package Jan 1, 2020
package.json update package Jan 1, 2020

README.md

OrgCSS - Stylesheet for Org-exported HTML

License: MIT LICENSE 996.icu

Table of Contents

Usage

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"/>

Caveats

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.

Code Highlight

When exported to HTML, there are three options for code highlighting, controlled by the variable org-html-htmlize-output-type.

  1. (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., int.

    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.

  2. (setq org-html-htmlize-output-type nil)

    This configuration disables highlighting by htmlize. You may use a third-party Javascript highlight library. I recommend highlight.js if I need code highlight. There are two problems:

    1. The problem is that you have to rely on highlight.js support on a certain language which is occasionally missing, e.g., emacs-lisp, org, etc.
    2. highlight.js by default does not recognized the tags and classes exported by org mode. You need some extra Javascript code in your Org file.
  3. (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 .org-type.

    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).

Related

The CSS classes used by ox-html are documented here.

  1. fniessen/org-html-themes
  2. mowen/gist326524
  3. Web Pages Made with Org-Mode
  4. thomasf/solarized-css
  5. org-spec
  6. Organize Your Life In Plain Text!
You can’t perform that action at this time.