Table of Contents
- 1. Things I had to add or modify, to get org and org html export working
- 2. TODO Todos
- 3. Basic Babel export to Html
- 4. Running
org2jekyll-create-draft
- 5. Name of this file
- 6. Verbatim vs Code markup: = vs ~
- 7. Inline code blocks - src _ language{ .. } and call _ func(arg1=1, arg2=2). Note: no space before {
- 8. Three types of lists
- 9. Code highlighting
- 10. TODO Properties
- 11. Tags
- 12. TODO Properties and columns
- 13. Startup indent test (using customize)
- 14. Image export and publishing to HTML : issues and solutions
- 15. MathJax configurations
- 16. Math Formulas using Latex
- 17. Math Formulas using ASCIIMath
- 18. Section modified 2024-05-09
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 asTeX-MML-AM_CHTML
. - Export showing numbered headers, etc
- Modified front matter options generated by
org2jekyll-create-draft
fromH: 2
to 5,num: nil
to t. Settingtoc: 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 byorg2jekyll-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
file-1.txt
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.
- text:
- Example 2 - exports both
- text:
src_sh[:exports both]{echo "hello"} plugged in text, inline.
- result:
echo "hello"
hello
plugged in text, inline.
- text:
- 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.
- text:
- 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.
- text:
- 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
- text:
- 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*
- text: The following files are in home dir
- Example 8: Calling add-in-shell:
- text:
call_add-in-shell(arg1=3, arg2=4)
- result:
arg1 plus arg2 = 7
- text:
8. Three types of lists
There are 3 types of lists in org. This is how they convert to html:
- Ordered List = Numbered List: Shopping list
- The Attack of the Clones
- Drones
- Blue
- Red
- Coffee
- Unordered List = Bulleted List: Favourite Movies, no particular order:
- Krakatit.
- The Avatar.
- 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-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) (. .. 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 ".")
(. .. file-3.txt)
11. Tags
Are labels for context (context = category)
12. TODO Properties 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
andorg-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 tests of link types file:, img:, and post-jekyll::
- 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 - . - Test file: (BEST SOLUTION) :
[[file:img/a-test-blog.org_test-image.png]]
after html conversion: expected: a small image just after the dash - . - 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 - . - 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
- 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:
Both img: on image and file: on image generate:
<img src="/img/a-test-blog.org_test-image.png" alt="nil"/>
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:?
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")
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:
Start with \begin .. \end{equation}, surround by empty lines. Example:
\begin{equation} x=\sqrt{b} \end{equation}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 \]
- 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\) - 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
- Sum: `sum_(i=1)^n i^3=((n(n+1))/2)^2`
- Prescripts: `{::}_(\92)^238U` or `{::}_92^238U` ? Both work, so use the second which is simple.
- Separate the < sign with spaces so `x < y` displays nicely
- 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
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)`
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
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)`
- reference: somesection-10
- 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
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 modified 2024-05-09
Just a test of tools on that day.