Quartz plugin to support pseudocode rendering at build-time with pseudocode.js. Works transparently with the Obsidian plugin obsidian-pseudocode.
MIT License
Quartz is a fast, batteries-included static-site generator that transforms Markdown content into fully functional websites.
In particular, Quartz supports transforming your Obsidian notes into a static website.
Natively, Quartz does not support pseudocode and algorithm rendering as HTML. This plugin makes it easy to make Quartz work with pseudocode.js and the Obsidian plugin obsidian-pseudocode.
Here is how to install the plugin and make it render pseudocode:
quartz.config.ts
)npm install quartz-pseudocode
quartz.config.ts
in a text editor.import lines
(the order does not matter, you can add this as the last one).import { Pseudocode as CommunityPseudocode } from "quartz-pseudocode"
plugins: {
transformers: [
Plugin.FrontMatter(),
Plugin.CreatedModifiedDate({
priority: ["frontmatter", "filesystem"],
}),
plugins: {
transformers: [
CommunityPseudocode(), // Add this line to enable the plugin
Plugin.FrontMatter(),
Plugin.CreatedModifiedDate({
priority: ["frontmatter", "filesystem"],
}),
After carefully following those steps, your Quartz installation should be able to render pseudocode.
If your pseudocode is still displayed as raw LaTex code, you should take a look at the next section (usage). You might have a slightly different way of writing pseudocode, which requires you to tweak some options for the plugin to detect and render the pseudocode to your liking.
Once the plugin is installed and enabled (see above section), you can use MarkDown code blocks with language pseudo
, to write LaTex that will be rendered to a pseudocode at build-time.
Just like the Quartz documentation, I recommend using Obsidian as an editor for your Quartz content.
Along with Obsidian, I recommend using the Obsidian plugin obsidian-pseudocode. This will have the same effect as quartz-pseudocode
in Obsidian, meaning it will render your algorithms and pseudocode transparently. quartz-pseudocode
is meant to work with content edited using obsidian-pseudocode
out-of-the-box.
For a complete rundown on the supported syntax, please refer to the obsidian-pseudocode
Obsidian plugin documentation.
Writing this in your markdown file:
```pseudo
\begin{algorithm}
\caption{Simple Algorithm}
\begin{algorithmic}
\Comment{This is a simple example}
\Procedure{Simple-Algorithm}{$n$}
\If{$n = 0$}
\Return $n$
\EndIf
\For{$i = 0$ \To $n$}
\State $n \gets n-1$
\EndFor
\Return n
\EndProcedure
\end{algorithmic}
\end{algorithm}
```
Will be rendered like this when you build your Quartz website:
If the plugin does not render correctly yet, you can make it work or customize how it renders pseudocode by tweaking some configuration settings.
To customize parameters, you must pass them as an object to the plugin in quartz.config.ts
. If some or all settings are missing, the default values will apply for those specific settings.
Here is the default configuration. You can tweak individual settings and remove the ones you don't want to change.
CommunityPseudocode({
codeLang: "pseudo",
placeholderCssClass: "pseudocode-placeholder",
removeCaptionCount: false,
renderer: {
identSize: "1.2em",
commentDelimiter: "//",
lineNumberPunc: ":",
lineNumber: false,
noEnd: false,
captionCount: undefined,
titlePrefix: "Algorithm",
mathEngine: undefined,
mathRenderer: undefined
}
})
Below is a list of the options with some documentation for each one.
codeLang
(string
)The language slug that is used in markdown code blocks where pseudocode is written. This corresponds to the name you write after the three backticks.
It defaults to pseudo
, which is used by the Obsidian plugin.
See the example if you are not sure what this setting corresponds to.
placeholderCssClass
(string
)This setting does not need to be modified unless there is a conflict with another feature of Quartz.
Under the hood, this plugin replaces your markdown code block with a placeholder and then replaces the placeholder with the processed HTML markup. This setting defines what CSS class is used to identify the placeholder in the raw HTML.
Defaults to pseudocode-placeholder
.
removeCaptionCount
(boolean
)By default, a number is printed aside of your algorithm title. For example 1
:
If set to true
, this setting ensures that the number is not printed. In the above example, only "Algorithm Simple Algorithm" would be printed.
Defaults to false
.
renderer.identSize
(string
)The indent size of inside a control block, e.g. if, for, etc. The unit must be in em
.
Defaults to 1.2em
.
renderer.commentDelimiter
(string
)The delimiters used to start and end a comment region. Note that only line comments are supported.
Defaults to //
.
renderer.lineNumberPunc
(string
)The punctuation that follows line number.
Defaults to :
.
renderer.lineNumber
(boolean
)Whether line numbers will be displayed on the left of the pseudocode.
Defaults to false
.
renderer.noEnd
(boolean
)If set to true
, block endings (end if
, end for
, end procedures
, ...) will not be displayed.
Defaults to false
(block endings will be displayed by default).
renderer.captionCount
Related to the number displayed in the title of the pseudocode.
If its value is set, the counter will be reset at each rendering, so all rendered pseudocode blocks will have the same number. If the value is 0
, for example, all algorithms will have 1
displayed.
Defaults to undefined
. By default, the counter will start at 0
. The first rendered algorithm will have the number 1
, then the counter will increment and the second algorithm will have the number 2
, and so on.
If you do not want to display any number, see removeCaptionCount
.
renderer.titlePrefix
The prefix displayed in front of the title of an algorithm, before the counter if there is one. Defaults to Algorithm
.
renderer.mathEngine
Which math engine to use. Either katex
or mathjax
.
renderer.mathRenderer
You can use this setting to provide a function that will be used to parse the LaTex string by the pseudocode.js library this plugin uses. For more information, refer to their own documentation.
Credits have been moved to a separate file so they don't appear on the NPM registry forever without their consent.
[!NOTE] This section is not ready yet but contributions are welcome. Feel free to open an issue, a discussion or a pull request.