Hugo using Org-Mode

L. Larrabee Strow and Sergio De-Souza Machado

1 Links in Hugo using Org-Mode

Org-mod does not know about Hugo, and that is reflected in how org-mode handles links. Here we discuss how to handle links in org-mode. It's a little bit of work, but not that much.

Note that this file is called hugo_ormode.org and contains a lot of formatting to show the source code for doing an org file on this web page. For a more normal example org file, see sample_orgmode.org in the /asl content directory. Note: Hugo copies *.org files to the actual web site, so you can always download the source for a page by removing the trailing \ and adding .org to the URL you are viewing.

The Hugo website view of both the "content" and "static" directories are at the Hugo top-level (they are combined). You can put limited figures in the static directory, but I don't want to fill-up the aslhugo git repo with figures. For example, if you want a photo in your home page, put it in /static/hepplewhite/hepplewhite.jpg as an example. To refer to the figure in your markdown you would use /hepplewwhite/hepplewhite.jpg if you are working inside a top-level directory like /asl or /hepplewhite.

Most figures (and data files) should be put on maya in /asl/ftp/pub/username/xxx where username is your location in the ftp pub site, and xxx is whatever you want. Note that the nginx application that serves up our web pages maps /asl/ftp/pub to /pub inside Hugo. However, you cannot take advantage of that in orgmode since there is no way to get orgmode to output /pub/... in html, as far as I know. So, we need to stick to absolute URLs with orgmode.

Your figure URLs will look something like:

https:/asl.umbc.edu/pub/strow/figs/nov2015/ciras/Png/airs_ak_t_image.png.

It is really easy too avoid having to type most of this URLs in org-mode, see the source file, sample_orgmode.org, to see how. Also shown in that file is how to easily switch to LaTeX output using the same source file. After reading that file, you will see that in general you can refer to figures using

[[hpub:nov2015/ciras/Png/temp_dof_all.png]] 

instead of the longer version shown above. hpub is essentially a macro defined at the top of your file.

2 Orgmode Syntax

I will give examples for the most important things you need to know about org-mode here, for a full (and lengthly) view see the Org-Mode on-line docs

Code blocks, examples, prose, etc can be done a number of ways, two ways are shown below, see the source code of this document to see how these are done.

#+BEGIN_SRC text
Here is the rendering of an =in-line code block=.  Is was done by enclosing the code 
block in =, as shown below where we repeat these last two sentences.
#+END_SRC
Here is the rendering of an =in-line code block=.  Is was done by enclosing the code 
block in =, as shown below where we repeat these last two sentences.

Note that the code block rendering will render carriage return, line feeds if they exist.

To render a matlab file (or latex, or html, etc) just use the backticks, and put the language right after the first set of three backticks. I would generally put language of "text" for notes, or if you do not want automatic colorization, etc. I can't figure out how to render a code block inside a code block, so look at the source of this file (/strow/hugo_orgmode.md) to see how this works.

% A matlab code snippet
  for i=1:n
    a(i) = fact(i);
  end

If you want to make this look like the Hugo markdown, there is a slightly more complicated way to do the above, shown below and then rendered.

#+BEGIN_EXPORT HTML
<pre><code class="language-matlab">% A matlab code snippet
      for i=1:n
        a(i) = fact(i);
      end
</code></pre>
#+END_EXPORT
% A matlab code snippet
      for i=1:n
        a(i) = fact(i);
      end

3 Figures

Orgmode has it's own syntax for including figures. However, remember you have to be careful with URL's as discussed above. The figure syntax assuming you have copied /asl/ftp/pub/xxx to your local machine is:

#+CAPTION: Another caption for a figure.
#+ATTR_HTML: :width 400
[[hpub:pub_test.png]]

pub_test.png

Figure 1: Another caption for a figure.

Here is another example, using an absolute URL

#+CAPTION: A caption for a figure.
#+ATTR_HTML: :width 600
[[https://asl.umbc.edu/pub/strow/figs/desert_rtp.png]]

desert_rtp.png

Figure 2: A caption for a figure.

4 Math

To include a mathematical formula in-line using org-mode, just use normal latex syntax. Here is some in-line math $a = α × β.$ For latex equations or displaymath just type them in the file as usual:

\begin{equation}
   \frac{n!}{k!(n-k)!} = \binom{n}{k} 
\end{equation}

which gives,

\begin{equation} \frac{n!}{k!(n-k)!} = \binom{n}{k}. \end{equation}

5 Lists

Lists work out of the box (enumerated or itemize)

1. Just write a Markdown document, and sprinkle your LaTeX code
   snippets in between.
1. Save the document with an `.md` suffix.
1. Run the Pandoc conversion:
  1. Just write a Markdown document, and sprinkle your LaTeX code snippets in between.
  2. Save the document with an .md suffix.
  3. Run the Pandoc conversion:
- Just write a Markdown document, and sprinkle your LaTeX code
   snippets in between.
- Save the document with an `.md` suffix.
  - nested list
-  Run the Pandoc conversion:
  • Just write a Markdown document, and sprinkle your LaTeX code snippets in between.
  • Save the document with an .md suffix.
    • nested list
  • Run the Pandoc conversion:

There is a css formating bug somewhere that puts in the extra space after a nested list.

6 Tables

Hugo is limited to simple tables, org-mode provides much more flexibility. Here is the Hugo (default markdown) table syntax, followed by it's html rendering. The code block is fancier than it's rendering…

Here is a table using org-mode, followed by the code. Unfortunately, there is a bug in org-mode that doesn't put a carriage-return, line-feed after a left-justified table, so avoid those for now.

Table 1: The table caption
Name Age
Bob 27
Alice 23

The code. If you don't center the table, the rendering goes bad.

#+ATTR_html: :align center :width 200
#+CAPTION: the caption
    Name   |  Age
    -------|------
    Bob    |  27
    Alice  |  23

7 Table of Contents

You can get org-mode to produce your table of contents quite easily, you just have to put the following, #+TOC: headlines 2, on the line right after the #END_EXPORT command in your Hugo configuration sections at the top of the file. The "2" refers to how deep you want the table of contents sectioning.

8 Fenced Matlab Code Block

Here is an example of a Matlab fenced code block. Note, you can do ascii tables inside code block if you like. Looks at the source for this file to see how to do this.

% A matlab code snippet
% NAME  
%   rad2bt - translate radiance to brightness temperature
% 
% SYNOPSIS
%   bt = rad2bt(fr, rad);
% 
% INPUTS
%   fr  - n-vector of wavenumbers, cm-1
%   rad - n x k array of radiances, mW/m2 per strad
% 
% OUTPUT
%   bt  - n x k array of brightness temps, K
% 
% AUTHOR
%   H. Motteler
% 

function bt = rad2bt(fr, rad);

% Constants; values from NIST (CODATA98)
c = 2.99792458e+08;  % speed of light      299 792 458 m s-1
h = 6.62606876e-34;  % Planck constant     6.626 068 76 x 10-34 J s
k = 1.3806503e-23;   % Boltzmann constant  1.380 6503 x 10-23 J K-1

% Compute radiation constants c1 and c2
c1 = 2*h*c*c * 1e+11;
c2 = (h*c/k) * 100;

% the scalar calculation, for reference
% bt = c2 * fr / log(1 + c1 * fr^3 / rad)

% LLS cut a bunch out here!

% do the vectorized calculation
bt = c2 * (fr * ones(1,j)) ./ log(1 + c1 * (fr.^3 * ones(1,j)) ./ rad);

% restore rad original shape
bt = reshape(bt, d2);

comments powered by Disqus