Home

HTML Demo & Reference

Text Decoration

Words may be bold, italic, underlined, verbatim, monospace, or strike-through. 

Words may be *bold*, /italic/, _underlined_, =verbatim= and ~monospace~, or
+strike-through+.

Images

#+CAPTION: Caption goes here.
#+ATTR_HTML: :width 100%
./img/2015.jpg
2015.jpg
Figure 1: Caption goes here.

Source Code

#+begin_src python
def lazy(f):
    a = f'_lazy_{f.__name__}'
    @property
    def wrapper(self):
        if not hasattr(self, a):
            setattr(self, a, f(self))
        return getattr(self, a)
    return wrapper
#+end_src

Output: 

def lazy(f):
    a = f'_lazy_{f.__name__}'
    @property
    def wrapper(self):
        if not hasattr(self, a):
            setattr(self, a, f(self))
        return getattr(self, a)
    return wrapper

Math

Math is rendered server-side using KaTeX\KaTeX. 

#+LABEL: eqn:euler-lagrange
\begin{equation}
\frac{\partial L}{\partial \phi}
- \sum_\mu \partial_\mu
\bigg( \frac{\partial L}{\partial (\partial_\mu \phi)}}\bigg) = 0
\end{equation}
∂L∂ϕ−∑μ∂μ(∂L∂(∂μϕ))=0\begin{equation} \label{eqn-1}\tag{1} \frac{\partial L}{\partial \phi} - \sum_\mu \partial_\mu \bigg( \frac{\partial L}{\partial (\partial_\mu \phi)}\bigg) = 0 \end{equation}

The standard block-math tags equation, align, \[ ... \], $$ ... $$ and the inline tags $... $, \( ... \) are recognized. Conversion is powered by KaTeX\KaTeX, pre-rendered server-side.

Idiosyncrasies (notes to self):

  • if using \begin{...} inside a math environment, ensure that the math environment was opened with \begin{equation} or another explicit environment rather than, e.g., \[ ... \].
  • katex must be an available command, but will not be called if the input has been memoized (may need to clear ~/.cache/memoize).

References to equations: 

#+LABEL: eqn:euler-lagrange
[​[eqn:euler-lagrange]] is the
[​[h​ttps://en.wikipedia.org/wiki/Euler-Lagrange_equations][Euler-Lagrange]]
equation with respect to scalar field value $\phi$ with space-time
coordinates indexed by \(\mu\).

Eq. (1) is the Euler-Lagrange equation with respect to scalar field value ϕ\phi with space-time coordinates indexed by μ\mu.

Foot​notes

Sometimes you don't need footnotes...[fn:1]

[fn:1] ...but sometimes you do want footnotes!

Sometimes you don’t need footnotes…[1]

Like Wikipedia links, when hovered over, the footnote content will display (on desktop).

When writing, note that the footnote definitions ends at the next footnote definition or headline, or after two consecutive empty lines (org-mode manual).

Block Quotes

#+begin_quote
There was only one catch and that was Catch-22, which specified that a concern
for one's own safety in the face of dangers that were real and immediate was
the process of a rational mind. Orr was crazy and could be grounded. All he
had to do was ask; and as soon as he did, he would no longer be crazy and
would have to fly more missions.

-- Joseph Heller, Catch-22 (1961)
#+end_quote

There was only one catch and that was Catch-22, which specified that a concern for one’s own safety in the face of dangers that were real and immediate was the process of a rational mind. Orr was crazy and could be grounded. All he had to do was ask; and as soon as he did, he would no longer be crazy and would have to fly more missions.

– Joseph Heller, Catch-22 (1961)

Tables

I don’t use org-mode for tables. The feature-set is limited (e.g., cells spanning multiple columns). At the moment, I write tables in Raw HTML or using Inline Lisp.

Raw HTML

Arbitrary can go here. 
#+BEGIN_EXPORT html
Arbitrary <button>HTML</button> can go here.
#+END_EXPORT

Inline is also possible. 

Inline @@html:<button>HTML</button>@@ is also possible.

Scripts, Style, Meta

Individual source files can provide additional material to include in the <head> of the exported HTML document. For example, 

#+HTML_HEAD_EXTRA: <link rel=“canonical” href=“https://reillyraab.com/page" />
#+HTML_HEAD_EXTRA: <meta name="description" content="All about this page" />
#+HTML_HEAD_EXTRA: <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
#+HTML_HEAD_EXTRA: <script defer src="https://pyscript.net/alpha/pyscript.js"></script>

Inline Lisp

We can include blocks of lisp that don’t get rendered to HTML output (as syntax-highlighted source code), but instead define functions that get called by Emacs during export to produce arbitrary HTML.

For example, let us define the function example-func, which renders two <div> elements, one in steelblue and one in darkgoldenrod, where the contents of each div are passed as the arguments a and b: 

#+name: example-func
#+begin_src emacs-lisp :exports none :results html :var a="a" b="b"
(format "
<div style=\"color: steelblue;\">%s</div>
<div style=\"color: darkgoldenrod;\">%s</div>
" a b)
#+end_src

We may call this function from the source (.org) file as 

#+call: example-func(
"This text is steelblue.",
"This text is darkgoldenrod."
)

and the output will be

This text is steelblue.
This text is darkgoldenrod.
[1]

…but sometimes you do want footnotes!