saswatpadhi / pseudocode.js Goto Github PK
View Code? Open in Web Editor NEWBeautiful pseudocode for the Web
Home Page: https://saswatpadhi.github.io/pseudocode.js
License: MIT License
Beautiful pseudocode for the Web
Home Page: https://saswatpadhi.github.io/pseudocode.js
License: MIT License
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.
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.
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.
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?
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.
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/
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!
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.
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
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(...)
.
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
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.
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>
Would it be possible to publish the pseudocode
package to npm?
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?
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 ?
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
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
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>
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.
Algorithmic's doc has \repeat
, but seems pseudocode.jl not?
http://tug.ctan.org/macros/latex2e/contrib/algorithmicx/algorithmicx.pdf
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
.
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 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>
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).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.