pseudocode.js icon indicating copy to clipboard operation
pseudocode.js copied to clipboard

CLRS 4th style is available

Open wlbksy opened this issue 3 years ago • 2 comments

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?

wlbksy avatar Apr 13 '22 10:04 wlbksy

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}

image

From the CLRS book: image

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;
}

image

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!

Validark avatar May 24 '22 05:05 Validark

Thanks for the whole effects ! It's quite useful

wlbksy avatar May 27 '22 04:05 wlbksy

Thanks again @Validark for the neat hacks!

Pinning this issue so others may discover it easily, and resolving this.

SaswatPadhi avatar May 27 '23 02:05 SaswatPadhi

Of course! I hope everyone got their pseudocode to look how they like it. And thank you for making this library!

Validark avatar May 27 '23 02:05 Validark