org-file with embedded latex and pseudo code converting to html via MathJax

Question

I would like to use org-mode files with embedded latex code. Some of the latex content is based on packages like

\usepackge{algorithm, algorithmic}

to generate pseudo-code.

These org-files should be converted to HTML via preferably MathJax, without intermediate steps. My trials so far have yielded complete failure.

For instance, if I would like to use ORG --> MATHJAX --> HTML for the following example, what is needed ?

#+begin_src latex :results html replace :exports results :eval t 
\begin{algorithm}
\caption{Calculate $y = x^n$}
\begin{algorithmic}
\REQUIRE $n \geq 0 \vee x \neq 0$
\ENSURE $y = x^n$
\STATE $y \leftarrow 1$
\IF{$n < 0$}
\STATE $X \leftarrow 1 / x$
\STATE $N \leftarrow -n$
\ELSE
\STATE $X \leftarrow x$
\STATE $N \leftarrow n$
\ENDIF
\WHILE{$N \neq 0$}
\IF{$N$ is even}
\STATE $X \leftarrow X \times X$
\STATE $N \leftarrow N / 2$
\ELSE[$N$ is odd]
\STATE $y \leftarrow y \times X$
\STATE $N \leftarrow N - 1$
\ENDIF
\ENDWHILE
\end{algorithmic}
\end{algorithm}
#+end_src

If I evaluate this example via C-c C-c, within the org file, I obtain the same thing with the following

#+RESULTS:
#+begin_export html
 same code as above
#+end_export

(The resulting html side though has that not correctly rendered at all ...)

My preamble looks something like this.

#+HTML_HTML5_FANCY:
#+HTML_INCLUDE_SCRIPTS:
#+HTML_INCLUDE_STYLE:
#+HTML_LINK_HOME:
#+HTML_LINK_UP:
#+HTML_MATHJAX: align: left indent: 5em tagside: left font: Neo-Euler
#+INFOJS_OPT: view:info toc:t
#+LATEX_HEADER: \usepackage{tikz} 
#+LATEX_HEADER: \usepackage{amsmath} 
#+LATEX_HEADER: \usepackage[linesnumbered, ruled]{algorithm2e}
#+LATEX_HEADER: \usepackage{algorithm}
#+LATEX_HEADER: \usepackage{algorithmic}
#+OPTIONS: ':t *:t -:t ::t <:t H:3 \n:nil ^:t arch:headline author:t c:nil
#+OPTIONS: creator:comment d:(not LOGBOOK) date:t e:t email:nil f:t inline:t
#+OPTIONS: num:t p:nil pri:nil stat:t tags:t tasks:t tex:t timestamp:t toc:t
#+OPTIONS: todo:t |:t
#+CREATOR: Deloitte  (version 0.0.1)
#+DESCRIPTION:
#+EXCLUDE_TAGS: noexport
#+KEYWORDS:
#+LANGUAGE: en
#+SELECT_TAGS: export
#+OPTIONS: html-postamble:auto html-preamble:t tex:t
#+HTML_DOCTYPE: HTML5
#+html_head_extra: <link rel="stylesheet" type="text/css" href="code.css"/>

Answer 1

Here is a workaround, which use org-->pseudocode.js-->html, and it also supports latex exporting.

The idea is taking advantage of "special block" of org-mode. In short,

#+BEGIN_algorithm
something
#+end_algorithm

will be export to latex

\begin{algorithm}
something
\end{algorithm}

and to html

<div class="algorithm">
something
</div>

You can configure org-mode according to the instructions of pseudocode.js. And create a "algorithm" class in your css file.

Since stated in its readme

The grammar of pseudocode.js is mostly compatible with algorithmic package with a few improvement to make it even more easier to use.

You can simply replace "something" with LaTex-formatted contents.

So the result is like

I have to mention that pseudocode.js won't "automatically" render all algorithm pieces for you. You may add your own js, this issue provide a nice implementation.

However, this workaround is not that perfect, due to the slight different between html-exporting and latex-exporting:

Imagine that if you want to add a "name" of the algorithm, as in your code

\caption{Calculate $y = x^n$}

You need to use \begin{algorithm} and \end{algorithm} to enclose it together with the pseudo code body. But using pseudocode.js and html-export requires you to add them manually, while latex-export has "accidentally" done this for you.