A lame joke on LaTeX and HTML.
A bit of JS that converts a bunch of tags into something perhaps useful.
A while ago, @scoskey asked @pkra got talking about authoring long form for the web when you have a LaTeX background.
@scoskey suggested that the key may be in the experience of having a text editor open (perhaps with a live preview side-by-side), writing somewhat raw code, having a bit of magic to transform said code into something nice, having the ability to modify existing transformations and adding your own.
@pkra claimed that this is not hard nowadays and @scoskey called him out on it.
This is the result.
Caveat emptor this is the result of a few hours.
Vince Vatter, An Erdős-Hajnal analogue for permutation classes" (source)
Some simple components
- helpers
renameTag
to "rename" elements
- pre-processing
- MathJax-conformant TeX pre-processing
- CommonMarkJS pre-processing
- article header: via json or yaml
- pick up yaml or json metadata
- add a section, heading, and paragraphs with information
- abstract:
<abstract>
- rename to
<section>
and add a class. - theorem-environments via custom tag names (default:
<theorem>, <lemma>, <proposition>, <corollary>, <proof>
, customizable via metadata) - select all suitable elements
- rename to sections and add suitable classes
- keep a counter for auto-numbering
- if no
<name>
, add heading with auto-numbering - if
<blame>
, rename and add it - figures via
<figure>
- if no
<name>
, add heading with auto-numbering
- if no
- generic heading via
<name>
- convert to heading and add class
- cross-references via
<ref target=ID>
- replace with
<a>
tags - look up target's heading to populate
<a>
content with it (but strip<blame>
)
- replace with
- bibliographic citations via
<cite target=ID>
- for each bibitem in the bibliography
- look up
<cite>
elements with target=ID of bibitem - populate
<cite>
with content and wrap link pointing to bibitem
- (foot)notes via
<note>
- create footnote-caller
- add backlink from footnote to footnote-caller
See the issues.
- in-browser preview (e.g., while authoring HTML or laml itself)
- create an HTML file in this folder
- add
<script src="dist/laml-browser.js"></script>
to it - run
npx reload -b -s YOUR.html
- put newly opened browser window and editor with the HTML file side-by-side
- just save the HTML to refresh the browser
- server-side conversion
- Run
$ node bin/mjextract input.html
to generate a mathjax store (repeat whenever equations change) - Run
$ node bin/laml.js input.html output.html
- Open
output.html
- Run
- when developing, it often helps to have automatic rebuilds and a server with live-reload
- e.g.,
$ npm run live ./samples/vatter/vatter.html
combines both of the above
- e.g.,
- you can render to PDF via
$ node bin/renderPDF input.html
Some tools and training tips might help.
Emmet is a fantastic tool built into many text editors these days. Think of it as overpowered code snippets.
We strongly suggest learning it as it makes writing lots of HTML reasonable.