Table of Contents

This post is a test of misc org features, and their Html export. Reviewed till ch 6 included. Review progress on Ch 7.

1. Things I had to add or modify, to get org and org html export working

Details are inline, here is a summary from 2021-10-14 - todo

1.1. In export to html, to achieve:

Nice fontification in Babel code blocks
Installed from Melpa, package htmlize
Images and links showing correctly
Created new org mode link types for images and links :
  • img: link type to correctly export links to images to html.
  • file: link type changes to correctly export links to images to html.
  • post-jekyll: link type to correctly export links to other org files (in blog) to html.
ASCIIMath working
customize org-export-with-sub-superscripts to 'do not interpret'. This can also be set per file using option #+OPTIONS: ^:nil.
Mathjax working
in _includes/header.html, added { % include mathjax-stuff-new.html % } which adds script, src-ed to a online MathJax.js, properly configured as TeX-MML-AM_CHTML.
Export showing numbered headers, etc
Modified front matter options generated by org2jekyll-create-draft from H: 2 to 5, num: nil to t. Setting toc: t breaks export - the blog jumps out of Jekyll envelop. Use the following in future blog entries:
  • set # + OPTIONS H:5 num:t tags:nil toc:nil timestamps:t
  • this can be edited in org2jekyll.el source
For my own ORG/{CSS, JS} files to be used by the Jekyll process, 2 steps are needed
Remember Jekyll composes (aka messes up) the final HTML. Any added CSS, JS or other things that go to <header> must be added to _includes/header.html:
  • add # + HTML_HEAD: <link rel="stylesheet" type="text/css" href="my-org-mode.css" /> to the blog org file (this is needed for the css. js to be copied to $BLOG/css)
  • add a link href in _includes/header.html <link href="/css/gongzhitaao-org-mode.css" rel="stylesheet" type="text/css"> (this is needed because org2jekyll discards the <head> section after the html export, before copying result to _posts, to allow Jekyll composition from _includes/header.html).
  • Touch to make CSS, JS etc published - If we want a changed or newly added CSS, JS to be copied to $BLOG/css, touch the file - the Org2jekyll publishing is sort of a make which only picks up changed files.

1.2. To achieve my own formatting, added following files in ORG/{CSS, JS} files

Diobla
see http://diobla.info/doc/rtags
Zhitao Gong
https://github.com/gongzhitaao/orgcss
My Org Theme
my-org-mode.css
Theme from dakrone
http://dakrone.github.io/org2.css

Note they need to be touched, and added to _includes/header.html (see above)

Currently (2017-07-14) I use my own CSS: my-org-mode.css which borrows from some of the above.

1.3. Notes

Properties on top
All properties on top of the org file, except :header-args dir, are front matter, generated by org2jekyll-create-draft
:header-args dir
I added this to test some babel runs: this defines the default home directory for babel source code.

2. TODO Todos

  • [X] use my own css
    • [X] but get better fonts
  • [X] where in org2jekyll is the front matter created? can this be changed? - yes, see org2jekyll.el
  • [ ] figure out how to export functional index - probably export from org and check result, reconcile with jekyll.

3. Basic Babel export to Html

This source:

#+BEGIN_SRC sh :exports both
ls -1
#+END_SRC

Results in this:

ls -1

Both the code content and the result do show because we set :exports both

4. Running org2jekyll-create-draft

Created an empty file with Org front matter like this:

#+STARTUP: showall
#+STARTUP: hidestars
#+OPTIONS: H:2 num:nil tags:nil toc:nil timestamps:t
#+LAYOUT: post
#+AUTHOR: mzimmerm
#+DATE: 2017-04-08 Sat 17:23
#+TITLE: a-test-blog 
#+DESCRIPTION: Testing org2jekyll-create-draft
#+TAGS: org_mode org2jekyll
#+CATEGORIES: categories_required

5. Name of this file

The file name is a-test-blog.org so this is concatenated from title, with no date.

6. Verbatim vs Code markup: = vs ~

  • This is a literal (verbatim) text with link [[a link][http://some.html]] (surrounded by = ) in text.
  • This is a literal code section text with link [[a link][http://some.html]] (surrounded by ~ ) in text.
    • So the above, by default, shows that verbatim and code have same font after conversion to html.

7. Inline code blocks - src _ language{ .. } and call _ func(arg1=1, arg2=2). Note: no space before {

  • Example 1 - exports code:
    • text: src_sh[:exports code]{echo "hello"} plugged in text, inline.
    • result: echo "hello" plugged in text, inline.
  • Example 2 - exports both
    • text: src_sh[:exports both]{echo "hello"} plugged in text, inline.
    • result: echo "hello" hello plugged in text, inline.
  • Example 3: - exports results. This is likely the most common use of inline code blocks
    • text: src_sh[:exports results]{echo "hello"} plugged in text, inline.
    • result: hello plugged in text, inline.
  • Example 4 - exports results. As above, showing exports results is default in src_
    • text: src_sh{echo "hello"} plugged in text, inline
    • result: hello plugged in text, inline.
  • Example 5: This shows the inside literally as code, so does not call the code
    • text: src_sh[:exports code]{ls -l} allsurrounded by ~ in text:
    • result: src_sh[:exports code]{ls -l} - ls -l refuses to work, result with newline is not allowed in inline calls
  • Example 6: Defining function add-in-shell in BEGIN_ SRC
    • text:

      #+name: add-in-shell
      #+BEGIN_SRC sh :var arg1=1 :var arg2=2
      echo arg1 plus arg2 = $(($arg1 + $arg2))
      #+END_SRC
      
    • result: - this displays code, correctly fontified:

      echo arg1 plus arg2 = $(($arg1 + $arg2))
      
  • Example 7:
    • text: The following files are in home dir src_sh{ls -1}
    • result: The following files are in home dir src_sh{ls -1} - ls -l refuses to work, result with newline is not allowed in inline calls. Message: *list results cannot be used*
  • Example 8: Calling add-in-shell:
    • text: call_add-in-shell(arg1=3, arg2=4)
    • result: arg1 plus arg2 = 7

8. Three types of lists

There are 3 types of lists in org. This is how they convert to html:

  1. Ordered List = Numbered List: Shopping list
    1. The Attack of the Clones
    2. Drones
      • Blue
      • Red
    3. Coffee
  2. Unordered List = Bulleted List: Favourite Movies, no particular order:
    • Krakatit.
    • The Avatar.
  3. Description List: No order. Has :: between key and value. Key is highlighted. Does not indent items.
    Karel Capek
    Povetron
    Karel Capek
    Valka s Mloky. The description list also wraps very nicely after the : : .
    Abrakah Dabra
    Is cool.

9. Code highlighting

Needed htmlize to work.

Sh code:

AVAR="something 1"
OTHER="soma else"

echo "Variable AVAR is set to ${AVAR}"
if [ $AVAR = "something" ]; then
    echo "AVAR was as expected"
else
    echo "UNEXPECTED AVAR"
fi

echo "In shell, :results output is default; can add ~raw~ to not use TABLES IN RESULTS"

Python code equivalent:

AVAR   = "something"
OTHER  = "soma else"

print ("Variable AVAR is set to ") + AVAR
if AVAR == "something":
    print( "AVAR was as expected")
else:
    print ("UNEXPECTED AVAR")

return "In python, :results value is default, as python returns"

10. TODO Properties

A property is a key-value pair associated with an entry. Here, "entry" is:

  • the whole document
  • tree started with heading

Properties can be set so they are associated with a single entry, with every entry in a tree, or with every entry in an Org mode file.

Properties are like tags, but with a value.

Where can property be defined:

  • Either anywhere in file (but do it always on top) as

    #+PROPERTY: property-name-string property-value-string
    
  • Or in a drawer just below a heading as

    :PROPERTIES:
    :property-name-string: property-value-string
    :END:
    

Note the syntactic difference on how the key is defined

  • in the PROPERTY section, key is NOT surrounded with :
  • in the :PROPERTIES: drawer, key IS surrounded with :

But the key name is in both cases property-name-string

For someone using org-babel a lot, I have really only encountered use of properties in defining the overwhelmingly complex property called header-args.

For the longest time, I was confused in how properties are used TODO - finish this

10.1. Testing the header-arguments :dir property

10.1.1. Create some dirs

mkdir --parent /home/mzimmermann/tmp/{one,two,three}
echo "" > /home/mzimmermann/tmp/one/file-1.txt
echo "" > /home/mzimmermann/tmp/two/file-2.txt
echo "" > /home/mzimmermann/tmp/three/file-3.txt

There is a standard property with key named dir. This is a path to directory where Babel source blocks are executed.

This experiment shows how the dir property is used.

10.1.2. First result uses global (top) definition of dir = /home/mzimmermann/tmp/one

(directory-files ".")

(. ..) (. .. file-1.txt file-in-directory-one.txt)

10.1.3. Second result uses the BEGIN_ SRC definition of dir = /home/mzimmermann/tmp/two

(directory-files ".")

(. ..) (. .. file-2.txt)

10.1.4. Third result uses overriden property dir

This result uses the PROPERTIES definition of dir = /home/mzimmermann/tmp/three

(directory-files ".")

(. ..)

11. Tags

Are labels for context (context = category)

12. TODO Properies and columns

:COLUMNS: %30ITEM %9Approved(Approved?){X} %Owner %11Status %10Time_Estimate{:} %CLOCKSUM %CLOCKSUM_T :Owner_ALL: John Peter Paul :Status_ALL: "In progress" "Not started yet" "Finished" "" :Approved_ALL: "[ ]" "[X]"

so this is column view?

12.1. Subtree

13. Startup indent test (using customize)

dfadsfadsf adfadsfasdf

13.1. p1

adfafd asdfdsf sdfasdf

13.1.1. p2

sdfadfs asdfadsf adfd

14. Image export and publishing to HTML : issues and solutions

14.1. Image export issue

org-html-publish-to-html (C-c C-e h H) and org-publish-attachment messes up export from file: link type to html by generating

<img src="/img/a-image.png" \>?

which does NOT start at root, and does not work under http servers which can only serve on "path starting at served root". A question: is this behavior of org http export a bug or is there a rationalle?

There is no way to achieve this in "out of the box" org mode*. I tried those in the default org-html-publish-to-html :

Org Works in org? Published as
[/img/a-image.png] NO <img src="fil e:///img/a-image.png" \>
[~/some-dir/img/a-image.png] NO <img src="fil e:///some-dir/img/a-image.png"\>
[fil e:///img/a-image.png] NO <img src="fil e:///img/a-image.png"\>
[./img/a-image.png] OK <img src="./img/a-image.png"\>
[../img/a-image.png] OK <img src="../img/a-image.png"\>
[f ile:img/a-image.png] OK <img src="img/a-image.png"\>

None of them results will work when under a http server, as path to not start at root.

14.2. The image export solution - creating and modifying link types

14.2.1. The image export solution with motivation

I created new org mode link types which are, during org export to html translated to html understood by Jekyll. Those link types are img: and post-jekyll:

*The core of the solution is inspired from http://stackoverflow.com/questions/14684263/how-to-org-mode-image-absolute-path-of-export-html.

  • I created my new org mode link types: img: and post-jekyll:.
  • I also changed the default behavior of export of the file: link type export - see org-custom-link-file-follow and org-custom-link-file-export and attached it to the file: link type.

Note: The file: type changes actually allow NOT NEEDING the img: type at all.

14.2.2. The image export solution - testing

Below are test of file: (changes only) img:, post-jekyll: link types

  1. Test img: : [[img:a-test-blog.org_test-image.png]] after html conversion: expected in html not in org: a small image just after the dash - nil.
  2. Test file: (BEST SOLUTION) : [[file:img/a-test-blog.org_test-image.png]] after html conversion: expected: a small image just after the dash - nil.
  3. Test file: : file:img/a-test-blog.org_test-image.png after html conversion: expected in html not in org: a small image just after the dash - nil.
  4. Test my post-jekyll: : [[post-jekyll:blog-in-org-2-jekyll---1.-motivation.org][a short series about writing in org mode]] after html conversion, expected: a working link just to another post after the dash - a short series about writing in org mode
    • The precondition is the post must be already org2-published
  5. Test non-image file: links : [[file:img/a-test-blog.org-test-file.txt]] after html conversion, expected in html not in org: a working link to text file after the dash - img/a-test-blog.org-test-file.txt

    Notes:

  6. Both img: on image and file: on image generate:

    <img src="/img/a-test-blog.org_test-image.png" alt="nil"/>
    
  7. file: on non-image generates:

    <a href="/img/a-test-page.pdf">/img/a-test-page.pdf</a>
    

14.2.3. Why is the file: org link type solution better than img:?

  1. The img: link type works in Jekyll but does not show in emacs. This line in ob.el shows why the img: will not display in org mode - only file: can be image in org mode

    (when (and (equal (org-element-property :type link) "file")
    
  2. Try this

    (org-open-file "./img/a-test-blog.org_test-image.png")
    

14.3. The image export workaround (NOT needed)

14.3.1. The workaround - motivation

There is a simpler but hack-ier solution to display exported images correctly: We create a directory link from the org/img directory to a img directory above the posts. This works because the generated <img src=/../../some-img.png> tag in, say, 2017/04/a-test-blog.html, reaches ../../img.

This makes images works both in org and html, with the caveat the images are referenced as [../../img/some-image.png].

In more detail, do this:

cd $BLOG # e.g. /whatever/mzimmerm.github.io/
cd ..
ln -s $BLOG/org/img img

If we prepare the above link (ln), we can use a "no link type" link in the org file

14.3.2. The workaround - testing

An inline link to [[../../img/a-test-blog.org_test-image.png]] should display a image. expected: a small image just after the dash - [[../../img/a-test-blog.org_test-image.png]

The link above, generates html like this: <img src="/../../img/a-test-blog.org_test-image.png"> which works when served in an http server, because the generated blog posts are located in root:2017/04/a-test-blog, and two levels up to img exists and is not outside the http server root folder. At the same time it works in emacs org mode, as this workaround created the "faked" link directory "org/../../img", where "org" is the current directory while editing in emacs.

15. MathJax configurations

MathJax can be passed options to configure it to display various formats:

Allows math to be specified in TeX, LaTeX, MathML, or AsciiMath notation, with the AMSmath and AMSsymbols packages included, producing output using MathML if the browser supports it sufficiently, and HTML-with-CSS otherwise.

See http://docs.mathjax.org/en/latest/

The two sections below describe some nuances for displaying Latex and ASCIIMath in Org2Jekyll and Jekyll.

16. Math Formulas using Latex

First, delete the following from the org file if present after org2jekyll-create-draft:

OPTIONS: tex:t HTML_MATHJAX: path:"http://cdn.mathjax.org/mathjax/latest/MathJax.js" HTML_MATHJAX: align: left indent: 5em tagside: left font: Neo-Euler

The Javascript that MathJax will use, must be configured directly in Jekyll, in ./_includes/mathjax-stuff-new.html. Also, see the ./_includes/mathjax-stuff.html which I found somewhere - maybe it's Jekyll default.

There are 3 ways to put Latex in org text:

  1. Start with \begin .. \end{equation}, surround by empty lines. Example:

    \begin{equation} x=\sqrt{b} \end{equation}
  2. Display mode: Start with double dollar on lines above and below Latex: \[..latex here..\] or $$..latex here..$$. Examples:

    \[ x = \sqrt{b} + c^4 \]

    \[ y = \sqrt{c} + d^3 \]

  3. Inline mode: Put \(..latex here..\) or $..latex here..$ around latex. But this may clash on export with dollars etc. This is some latex inline, e.g. \(x = \sqrt{b} + c^4\) or \(y = \sqrt{c} + d^3\) which is nice. Prefer using ~\(etc\)
  4. Try org-preview-latex-fragment (bound to C-c C-x C-l). s C-c C-x C-l here (or C-u C-c C-x C-l to preview everything in the subtree, or C-u C-u C-c C-x C-l to preview everything in the buffer)

17. Math Formulas using ASCIIMath

An important prerequisit to get this working in org export, is to customize org-export-with-sub-superscripts to 'do not interpret'. This can also be set per file using option # + OPTIONS: ^:nil

  1. Sum: `sum_(i=1)^n i^3=((n(n+1))/2)^2`
  2. Prescripts: `{::}_(\92)^238U` or `{::}_92^238U` ? Both work, so use the second which is simple.
  3. Separate the < sign with spaces so `x < y` displays nicely
  4. Integrals: `int_0^oo e^(-x^2) dx = sqrt(pi) / 2`

17.1. Numbering equations in ASCIIMath

Test link references:

After some trying, these are the ways to number equations - no way to do it on the right, and no way to add spacing

  1. This renders nice, so just use the first, e.g. (1).

    (1) `a^2 + b^2 = c^2`

    (2) `ax^2 + bx + c = 0`

    (3) `x = (-b+-sqrt(b^2-4ac))/(2a)`

  2. Below, space before dot prevents interpretation as list item li. So just use the (1,2,3) format above.

    4 . `m = (y_2 - y_1)/(x_2 - x_1) = (Delta y)/(Delta x)`

    5 . `f'(x) = lim_(Delta x->0)(f(x+Delta x)-f(x))/(Delta x)`

    6 . `d/dx [x^n] = nx^(n - 1)`

    `7 . int_a^b f(x) dx = [F(x)]_a^b = F(b) - F(a)`

    `8 . int_a^b f(x) dx = f(c) (b - a)`

    `9 . "average value"=1/(b-a) int_a^b f(x) dx`

    `10 . d/dx[int_a^x f(t) dt] = f(x)`

    `11 . (a + b)^n = ∑_(k=0)^n▒(n¦k) a^k b^(n-k)` This is UnicodeMath

    `12 . (a + b)^n = sum_(k=0)^n ((n), (k)) a^k b^(n-k)` This is AsciiMath

  3. Use org #+name: eqn:somesection-10 then [ [eqn:] [1] ] as reference (does not seem too good)

    (eqn.10) `m = (y_2 - y_1)/(x_2 - x_1) = (Delta y)/(Delta x)`

  4. BEST Use < <1.n> >(1.n) before equation, then [ [1.n] [1.n] ] as reference
    • (section.10) `m = (y_2 - y_1)/(x_2 - x_1) = (Delta y)/(Delta x)`
    • reference: section.10

17.1.1. Numbering equations in ASCIIMath - a full example

So let's say have some chapters, and want to number all equations by chapter. This is how to do it

17.1.1.1. Combinatorics basics

In this chaptes, we introduce some basics The core equation is

`c^2 = a^2 + b^2` (basics.10)

17.1.1.2. Combinatorics advanced

This is more advanced. In the basics section, we introduced basics.10. In this chapter we will prove

`(a + b)^n = sum_(k=0)^n ((n), (k)) a^k b^(n-k)` (advanced.10)

18. Section added 2019-08-03

Just a test of tools.