Hi Tate,

Thanks for the project. I am using it in my own blog built with Jekyll and Minimal theme. When I put the following raw html code in the middle of Markdown file

<pre id="ts" style="display:none">
\begin{algorithmic}
\PRINT \texttt{'hello world'}
\end{algorithmic}
</pre>

<script type="text/javascript">
    var testExamples = document.getElementById("ts").textContent;
    pseudocode.render(testExamples, document.body, {
        lineNumber: true,
        noEnd: false
    });
</script>

the output html will put the algorithm in the end of the post like the following:

I will appreciate it a lot if you can provide some helpful suggestions.

Thanks,

Chao

Thanks for writing pseudocode.js. It looks quite amazing.

By default, pseudocode.js does an automatic numbering starting at 1. I am personally trying to use it in a book, so I need a numbering with the chapters, like Algorithm 2.1 or Algorithm A.1.

I wonder if it would be possible to somehow specify the desired chapter prefix (in the example above it would be prefix "2" or "A").

In the worst case, I wonder if it would be possible to fully specify the number by hand rather than automatic. In the example above, I would specify "2.1" or "A.1".

Thanks!

I would like to use this in Markdown, like

```pseudo
some algorithms
```

And this gives the <pre> element a "pseudo" class. So it would be great to support getElementsByClassName.

First of all, thanks a lot for this project. It looks great, and is quite useful.

I was wondering if it would be possible to add support for MathJax, together with KaTex. Although being a bit slower, MathJax would allow to render any equation.

Best,
Séb

CLRS 4th is available now, so as its LaTeX style, in "Reader Resources" -> "CLRS code.sty". https://mitpress.mit.edu/books/introduction-algorithms-fourth-edition

Numbering only starts after procedure declaration.

Is there any work on porting it here?

http://www.tatetian.me/pseudocode.js

Algorithmic's doc has \repeat, but seems pseudocode.jl not?
http://tug.ctan.org/macros/latex2e/contrib/algorithmicx/algorithmicx.pdf

Great package I love it thank you ! is there a way force the Algorithm 1 part of the caption to my own words ?
Algorithm 1 New Quicksort

Regards
Haydar

I had to write some generic javascript in order to use what you wrote to find the blocks of pseudocode, render them, and remove the old ones. Seems to me this can be included as a small helper javascript method that does all that. I have some code that will find any and all blocks in a webside, delete it and replace it with the rendered code in the same place as the original block. You can see the javascript code and incorporate it into this code if you'd like. Here is a link and an explanation to my javascript to solve this.

http://jeffreyfreeman.me/latex-inspired-rendering-of-algorithms-in-html/

Pseudocode currently seems to lowercase all variables in tex code, as can be seen on the project website (note that the first argument, a, in the quicksort algorithm is uppercase in the code, but lowercase in the output).

when I operate accoding to the README, i meet a problem is

pseudocode.renderClass is undefined

and pseudocode.renderElement is ok.

I would like to re-rendering the <pre> in the JS click event. The core logic is to update the content of <pre>, and call pseudocode.renderElement again. But re-rendering fails and it still shows the content before updating.

    const textInput = document.getElementById("input");
    const output = document.getElementById("output");

    const updateButton = document.getElementById("generate");
    updateButton.addEventListener("click", () => {
      const inputValue = textInput.value;
      output.innerHTML = inputValue;
      pseudocode.renderElement(output);
    });

I really like this tool would love to use it with marp https://marp.app/ though, I have managed to use mermaid.js with marp
wondering if would have any guidance on how use this with marp ?

Would it be possible to publish the pseudocode package to npm?

I'm trying to use pseudocode.js in a vue component.

But when I import pseudocode/build/pseudocode.min.css, vue-cli fails to build the app.

I think that maybe it losses some fonts? This is the error log.

ERROR  Failed to compile with 8 errors
These relative modules were not found:

These relative modules were not found:

* ./fonts/KaTeX_SansSerif-Bold.eot in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.ttf in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.woff in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_SansSerif-Bold.woff2 in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.eot in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.ttf in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.woff in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css
* ./fonts/KaTeX_Typewriter-Regular.woff2 in ./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-3-1!./node_modules/postcss-loader/src??ref--6-oneOf-3-2!./node_modules/pseudocode/build/pseudocode.min.css

And This is my component.

<template>
  <pre ref="pre" style="display:hidden;"><slot></slot></pre>
</template>

<script>
import pseudocode from 'pseudocode';
import 'pseudocode/build/pseudocode.min.css';

export default {
  name: 'Pseudocode',
  props: {
    lineNumber: Boolean,
    lineNumberPunc: String
  },
  mounted() {
    this.$nextTick(() => {
      pseudocode.renderElement(this.$refs.pre, {
        lineNumber: this.lineNumber,
        lineNumberPunc: this.lineNumberPunc
      });
    });
  }
}
</script>

I cloned the repository and linked the local /docs/pseudocode.js and /docs/pseudocode.css on my html page. But I am unable to make the Algorithm appear.
Can someone help me with this?

Thanks,
Gunjan

I think scope lines (not sure if it is the ‘formal name’) can be used to clarify algorithms. For instance, the screenshot below illustrates two algorithms with this functionality. Hence, I think it can be useful to enable the library to include this functionality. I implemented the changes and I’m doing a pull request for your consideration. The change basically adds an optional argument named scopeLines (false by default) that render the sidelines.

Sorry for the improper placement, but I found no other way to thank the contributors. I was making svgs of LaTeX-generated pseudocode for the web. This is so much better! Great work.

While displaying the caption of an algorithm, using algorithm environment as a 'float' wrapper with a with black background it's unable to see the lines.

I am trying to use pseudocode.js with MathJax 4.0. I have followed all the four steps listed in the ReadMe file, but cannot seem to get it to work with MathJax 4.0. Here is how I call MathJax 4.0:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/es5/tex-mml-chtml.js"
        integrity="9df6fbc821287c8717485c417ee18bde3f94a30d18d2dec88c29200806c7dabe"
        crossorigin="anonymous" referrerpolicy="no-referrer">
</script>

The "Algorithm" string appearing in caption title is hardcoded in the source.

Could this be made more flexible for other languages?, maybe adding an option to customize the caption prefix. For example in Spanish is "Algoritmo", and in french is "Algorithme".

Good project. Thanks

I'm getting the following error.

I'm using URLSearchParams like that visible in the error, ?TS=T1&DS=, and it seems this might be where the trouble lies. Interestingly, the algorithm still renders properly.

Any ideas?

Hi, and thanks for sharing your code.

I would like to know if I can use this library from the server-side, something like the katex method: katex.renderToString(...).

I'm trying to run the README example -- but I'm running into a JSON.parse error in renderElement:

I'm building a static site through quarto and hugo, and I've confirmed that my HTML output is what I expect -- specifically:

<pre id="hello-world-code" class="pseudocode">
  \begin{algorithmic}
  \PRINT \texttt{'hello world'}
  \end{algorithmic}
</pre>
<script>
    pseudocode.renderElement(document.getElementById("hello-world-code"));
</script>

gets inserted into my generated HTML (as I would expect). I also fetch pseudocode.js from CDN in header.

Any mistake I've made standing out?

Hi @tatetian ,
nice work, I was hoping to use your code to format my pseudo code it looks like there hasn't been any activity for long while. I was wondering if you could build a new version with newer KaTex? I would like to have \mathcal{}, \right & \left working to name a few.

T.I.A.

This is how I setup my MathJax and pseudocode.js

<!-- Support for MatJax -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script>
    MathJax = {
        tex: {
            inlineMath: [['$','$'], ['\\(','\\)']],
            displayMath: [['$$','$$'], ['\\[','\\]']],
            processEscapes: true,
            processEnvironments: true,
        }
    }
</script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

<!-- Support for pseudocode.js -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.css">
<script src="https://cdn.jsdelivr.net/npm/pseudocode@latest/build/pseudocode.min.js"></script>

And I use this script to render all the elements with pseudocode class

<script>
    pseudocode.renderClass("pseudocode");
</script>

However, when I write pseudocode in my markdown file, seems that I can render at most 10 algorithms. And the one not working is from 3 to 4. 3 is working but starting from 4, every pseudocode doesn't work.

3. Print the winner of the election, if there is one (`bool print_winner(void)`)
    <pre id="print_winner-02" class="pseudocode">
        \begin{algorithm}
        \caption{Print Winner}
        \begin{algorithmic}
        \PROCEDURE{PrintWinner}{}
            \STATE Define winning indicator as voter count divides 2
            \FOR{each candidate}
                \IF{candidate's votes > winning indicator}
                    \STATE Print
                    \RETURN true
                \ENDIF
            \ENDFOR
            \RETURN false
        \ENDPROCEDURE
        \end{algorithmic}
        \end{algorithm}
    </pre>

4. Return the minimum number of votes any remaining candidate has (`int find_min(void)`)
    <pre id="find_min" class="pseudocode">
        \begin{algorithm}
        \caption{Find Min}
        \begin{algorithmic}
        \PROCEDURE{FindMin}{}
            \STATE Initialize the variable min to MAX_VOTERS + 1
            \FOR{each candidate}
                \IF{candidate's votes is less than min}
                    \STATE Update min
                \ENDIF
            \ENDFOR
            \RETURN min
        \ENDPROCEDURE
        \end{algorithmic}
        \end{algorithm}
    </pre>

And here is the my website

Thanks for helping!

When noEnd: true is set, the repeat...until loop does not render the until line. Although it seems to be working as intended, the until line contains an important part of the algorithm and should never be omitted. It is a different ending statement than end for, end if, and so on, so it should be treated differently.

I would expect to hide all end if, end for, and so on with noEnd: true, but keep until line regardless.

On a web page with white text and a dark background ("dark mode"), the pseudocode block looks a bit strange.

In particular, the horizontal lines remain black, even though the text and the vertical lines are white.

To fix this, I suggest replacing

border: 2px solid black;

inside of pseudocode.css with:

border-width: 2px;
border-style: solid;

This way you could use pseudocode.js also on a dark website.

Hello,
i use your pseudocode.js lib in my r-bookdown project to generate the nice latex algorithmic output. The include step was stright forward, as it is mentioned in the usage guide in the readme.

1. include mathjax and pseudocode.js in header: I have a header_index.html that lists everything that goes into the header tag. Beause there was already an existing entry of mathjax i tried it first, without the new mathjax-include, but this did not work and i added the include for mathjax3.
2. write code: after that setup and some modifications on the css-file i could add example code in my Rmd-file (R-Markdown) and had the expected output in the browser.

However, I got some errors, existing mathematical expressions were apparently influenced by the change in MathJax. In my book i had both, inline expressions ($somesthing$) and also multiline expressions ($$ centered mathmatical expression $$) and only the latter expressions are affected and are not correctly displayed.

For Example: from following expression:
$$L[k](A) = \prod_{i=1}^N[a_i,k]\cdot h[k]$$
is the folling output generated:

I noticed the following lines in the include of MathJax:

inlineMath: [['$','$'], ['\\(','\\)']],
displayMath: [['$$','$$'], ['\[','\]']],

The second line looks to me what influences multiline expressions and has just one "\" insteed of two "\\" as it is in the top line. I changed it to the following:
displayMath: [['$$','$$'], ['\\[','\\]']],

and voila, that solve my problem.

I`m not very familiar with javascript and related subjects, so I don't really understand what happens in the include statement and if the backslash is really missing or not. As a simple test I created a simple HTML page. There it seems to be no matter if there are 1 or 2 backslashes in the expression.

Just wondering if algorithms can be references as a hyperlinks as, for example, Equations. For example, the below latex equation could be referenced throughout a document, with the number being a hyperlink to the equation.

\begin{align}
x = 1 
\label{eq:equation}
\end{align}

If I try adding something similar to an algorithm environment (whether insider the algorithm or algorithmic environments), the algorithm does not compile, and as a result, does not show up on my webpage. That is, if I remove \label{alg:grad_descent} from the code below, the pseudocode block compiles and shows up.

<pre id="eq:grad_descent" class="pseudocode"  data-line-number=true >
    \begin{algorithm}
    \caption{Gradient Descent}
    \begin{algorithmic}
     \label{alg:grad_descent}
    \REQUIRE{Function for computing loss function, $\ell_{MSE}$ (see Equation $\ref{eq:mse-matrix}$)}
    \INPUT{Initial guess for weights $\mathbf{w}^{(0)}$} 
    \PROCEDURE{gradientDescent}{$K, \epsilon, \tau$}
      \STATE{$k = 0$}
     \WHILE{$k < K$ \AND $\lVert \mathbf{w}^{(k)} - \mathbf{w}^{(k+1)} \rVert^2_2 < \epsilon$} 
     \STATE{$\mathbf{w}^{(k+1)} = \mathbf{w}^{(k)} - \tau \nabla_{\mathbf{w}}\ell_{MSE}(\mathbf{w}^{(k)})$.} 
     \STATE{$k \mathrel{+}= 1$}
      \ENDWHILE
    \ENDPROCEDURE
    \end{algorithmic}
    \end{algorithm}
</pre>

Here is how I call pseudocode.js ( I call is internally, given that I am using MathJax 4.0.0-beta3).

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/tex-chtml.js"
              integrity="sha256-ljPODBK7Jf/VfUrVqec63xzZbysEmwB9Ab20TWRMQRU="
              crossorigin="anonymous">
  </script>


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/build/pseudocode.min.css">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/pseudocode.min.js"></script>
  <script src="{{ "js/pseudocode.js" | relURL }}"></script>