pseudocode.js
pseudocode.js copied to clipboard
CLRS 4th style is available
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?
If you want, you can add "procname" to this array.
https://github.com/SaswatPadhi/pseudocode.js/blob/567fa3117b0c811e887cef5c520389c0415b05d5/src/Parser.js#L364
Then, before your pseudocode you can use procname:
\begin{algorithm}
\begin{algorithmic}
\PROCNAME \CALL{Insertion-Sort}{$A, n$}
\FOR {$i = 2$ {\bfseries to} $n$}
\STATE $key = A[i]$
\STATE \COMMENT {Insert $A[i]$ into the sorted subarray $A[1:i-1]$}
\STATE $j = i - 1$
\WHILE {$j \gt 0$ \and $A[j] \gt key$}
\STATE $A[j + 1] = A[j]$
\STATE $j = j - 1$
\ENDWHILE
\STATE $A[j + 1] = key$
\ENDFOR
\end{algorithmic}
\end{algorithm}

From the CLRS book:

Making comments red can be achieved via CSS:
span.ps-comment {
color: rgb(150, 22, 25);
}
You can remove the border lines in CSS like so:
div.ps-algorithm {
border-top: none !important;
border-bottom: none !important;
}
Set background color:
div.ps-root {
background-color: #FEF2D6;
}
insert procname: '\u205f\u200a' (Thick space character) in here:
https://github.com/SaswatPadhi/pseudocode.js/blob/27d1cc7b586e595dece2134e4f8c5ae90910b456/src/Renderer.js#L827-L836
Add some thick spaces to the lineNumberPunc:
for (const pre of [...document.getElementsByTagName("pre")])
pseudocode.renderElement(pre, {
lineNumber: true,
noEnd: true,
lineNumberPunc: '\u205f\u200a\u205f\u200a\u205f\u200a'
});
(alternatively, and perhaps more cleanly, you could use CSS to move things instead of inserting thick space characters)
/* Move the lines that are not in the main code section */
div.ps-root > div.ps-algorithm > div.ps-algorithmic.with-linenum > p.ps-line {
text-indent: -0.3em !important;
padding-left: 1.8em !important;
}

If you want to use Times New Roman, you add a new font family in this table:
https://github.com/SaswatPadhi/pseudocode.js/blob/27d1cc7b586e595dece2134e4f8c5ae90910b456/src/Renderer.js#L49-L83
and then stick whatever you named it in here (font-dclr or font-cmd):
https://github.com/SaswatPadhi/pseudocode.js/blob/567fa3117b0c811e887cef5c520389c0415b05d5/src/Parser.js#L464-L496
I stopped here because I don't need Times New Roman for my purposes, but with a little tweaking you can make your pseudocode look exactly how you want it to!
Thanks for the whole effects ! It's quite useful
Thanks again @Validark for the neat hacks!
Pinning this issue so others may discover it easily, and resolving this.
Of course! I hope everyone got their pseudocode to look how they like it. And thank you for making this library!