Matching CLRS 4th Edition Styles

[wlbksy]

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?

[Validark]

If you want, you can add "procname" to this array.

pseudocode.js/src/Parser.js

Line 364 in 567fa31

var IO_STATEMENTS = ['ensure', 'require', 'input', 'output'];

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:

pseudocode.js/src/Renderer.js

Lines 827 to 836 in 27d1cc7

	var stmtName = node.value;
	var displayStmtName = {
	'state': '',
	'ensure': 'Ensure: ',
	'require': 'Require: ',
	'input': 'Input: ',
	'output': 'Output: ',
	'print': 'print ',
	'return': 'return ',
	}[stmtName];

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:

pseudocode.js/src/Renderer.js

Lines 49 to 83 in 27d1cc7

	TextStyle.prototype._fontCommandTable = {
	// -------------- declaration --------------
	// font-family
	normalfont: { 'font-family': 'KaTeX_Main'},
	rmfamily: { 'font-family': 'KaTeX_Main'},
	sffamily: { 'font-family': 'KaTeX_SansSerif'},
	ttfamily: { 'font-family': 'KaTeX_Typewriter'},
	// weight
	bfseries: { 'font-weight': 'bold'},
	mdseries: { 'font-weight': 'medium'},
	lfseries: { 'font-weight': 'lighter'},
	// shape
	upshape: { 'font-style': 'normal', 'font-variant': 'normal'},
	itshape: { 'font-style': 'italic', 'font-variant': 'normal'},
	scshape: { 'font-style': 'normal', 'font-variant': 'small-caps'},
	slshape: { 'font-style': 'oblique', 'font-variant': 'normal'},
	// -------------- command --------------
	// font-family
	textnormal: { 'font-family': 'KaTeX_Main'},
	textrm: { 'font-family': 'KaTeX_Main'},
	textsf: { 'font-family': 'KaTeX_SansSerif'},
	texttt: { 'font-family': 'KaTeX_Typewriter'},
	// weight
	textbf: { 'font-weight': 'bold'},
	textmd: { 'font-weight': 'medium'},
	textlf: { 'font-weight': 'lighter'},
	// shape
	textup: { 'font-style': 'normal', 'font-variant': 'normal'},
	textit: { 'font-style': 'italic', 'font-variant': 'normal'},
	textsc: { 'font-style': 'normal', 'font-variant': 'small-caps'},
	textsl: { 'font-style': 'oblique', 'font-variant': 'normal'},
	// case
	uppercase: { 'text-transform': 'uppercase'},
	lowercase: { 'text-transform': 'lowercase'},
	};

and then stick whatever you named it in here (font-dclr or font-cmd):

pseudocode.js/src/Parser.js

Lines 464 to 496 in 567fa31

	var ACCEPTED_TOKEN_BY_ATOM = {
	'ordinary': { tokenType: 'ordinary' },
	'math': { tokenType: 'math' },
	'special': { tokenType: 'special' },
	'cond-symbol': {
	tokenType: 'func',
	tokenValues: ['and', 'or', 'not', 'true', 'false', 'to', 'downto'],
	},
	'quote-symbol': {
	tokenType: 'quote',
	},
	'sizing-dclr': {
	tokenType: 'func',
	tokenValues: ['tiny', 'scriptsize', 'footnotesize', 'small', 'normalsize',
	'large', 'Large', 'LARGE', 'huge', 'Huge'],
	},
	'font-dclr': {
	tokenType: 'func',
	tokenValues: ['normalfont', 'rmfamily', 'sffamily', 'ttfamily',
	'upshape', 'itshape', 'slshape', 'scshape',
	'bfseries', 'mdseries', 'lfseries'],
	},
	'font-cmd': {
	tokenType: 'func',
	tokenValues: ['textnormal', 'textrm', 'textsf', 'texttt', 'textup',
	'textit', 'textsl', 'textsc', 'uppercase', 'lowercase', 'textbf',
	'textmd', 'textlf'],
	},
	'text-symbol': {
	tokenType: 'func',
	tokenValues: ['textbackslash'],
	},
	};

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!

[wlbksy]

Thanks for the whole effects ! It's quite useful

[SaswatPadhi]

Thanks again @Validark for the neat hacks!

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

[Validark]

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