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. Click for fullscreen.
./img/2015.jpg
2015.jpg
Figure 1: Caption goes here. Click for fullscreen.

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

#+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:

  • if using \begin{...} inside the math environment, use \begin{equation} or another explicit environment to declare the math rather than, e.g., \[ ... \].

References: 

#+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…[1]

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 we may call while writing our document to produce arbitrary HTML during the export.

For example, 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 :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 file as 

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

and the output will be

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

…but sometimes you want footnotes.