A JavaScript engine to render bussproofs style proof tree in html.
github: sano-jin/bussproofs-html
p
elements are rendered.\RightLabel
can be used for a label for now.\AXC
, \UIC
, \BIC
, \TIC
, and \QuaternaryInfC
are allowed
as a constcutor of the node of a proof tree.\normalsize
, \small
, \footnotesize
, \scriptsize
, and \tiny
are ignored.Send me PRs if you enable others.
You can use this engine by adding a script tag as follows:
<script type="module">
import { renderProofTreesOnLoad } from "https://sano-jin.github.io/bussproofs-html/assets/prooftree.js";
renderProofTreesOnLoad();
</script>
[!NOTE]
CSS class names starting frombussproofs-html__
are reserved.
I forked markdown-preview.nvim and integrated this rendering engine. Here is the forked previewer. If you are using Lazy as a plugin manager, you can use the previewer as follows:
-- Lazy
{
"sano-jin/markdown-preview.nvim",
cmd = { "MarkdownPreviewToggle", "MarkdownPreview", "MarkdownPreviewStop" },
build = "cd app && yarn install",
init = function()
vim.g.mkdp_filetypes = { "markdown" }
end,
ft = { "markdown" },
},
You can use this engine by adding a script tag as follows:
---
marp: true
math: katex
paginate: true
footer: https://github.com/sano-jin/bussproofs-html
---
# Integration with Marp is easy!
Here comes a proof tree:
\begin{prooftree}
\AXC{$1 + 2$}
\AXC{$1 + 2 + 3$}
\BIC{$1 + 2$}
\AXC{$1 + 2 + 3$}
\RightLabel{Label}
\BIC{$1 + 2 + 3 + 4$}
\end{prooftree}
<script type="module">
import { renderProofTreesOnLoad } from "https://sano-jin.github.io/bussproofs-html/assets/prooftree.js";
renderProofTreesOnLoad();
</script>
I’m not familiar with VSCode so I have not yet considered any integration plan. Please send me PR if you made any progress.
You can pass configration options configP
to renderProofTreesOnLoad
and renderProofTrees
.
interface configP {
// the margin between premises (default is 20).
marginPremises?: number;
// the left and right padding of an axiom and conclusion (default is 20).
paddingAxiomConclusion?: number;
// the left margin of a label (default is 10).
marginLabelLeft?: number;
// when to apply styles; after load (on null) or manually set timeout (on number) (default is null).
styleOnLoad?: null | number;
}
For example, if you specify the configration as follows, the margin between premises will be 100px, the left and right padding of an axiom and conclusion will be 0px, the left margin of a label will be 0px, and the style will be applied after 100 milliseconds.
renderProofTreesOnLoad({
marginPremises: 100,
paddingAxiomConclusion: 0,
marginLabelLeft: 0,
styleOnLoad: 100,
});
Develop:
cd proof-tree
yarn dev
# access the displayed url on your browser.
Deploy:
cd proof-tree
yarn build
cd ..
cp proof-tree/dist/index.js docs/assets/prooftree.js
I have a folloing roadmap. Please send me PR if you made any progress.
\LeftLabel
.load
event orload
event,
which is fired after DOM contents are fully rendered
in my understanding,
is a more robust method and it should work.
However, in some cases it seems not to work:
e.g., in the integration with markdown-preview.nvim.
A deeper and more comprehensive understanding is needed.