Unlocking the Power of Pandoc-Harper WASM
In this blog-post, we explore the power of WebAssembly in enabling cli applications to run directly within the browser. One such application is a document conversion tool that utilizes the Pandoc library to seamlessly transform text formats.
As shown in the video below, you can directly use this application from the following URL:
https://tessarinseve.pythonanywhere.com/pandocwasm/pandocwasm.html
Pandoc, a versatile document converter that excels in transforming text formats, has been integrated into this web application. The application leverages WebAssembly (WASM) to run Pandoc's functionalities directly within the browser, enabling efficient document processing without relying on server-side resources.
This application has been recreated based on the original project found at https://tweag.github.io/pandoc-wasm/. It features a default setting that converts Markdown documents into Typst format.
By offloading the document processing tasks to the client-side, the application can provide a more responsive and seamless user experience, reducing the load on the server infrastructure. Additionally, we've integrated Harper's JavaScript module, a sophisticated grammar checker supported by all modern browsers, to further enhance the text quality.
Simply input your document in the desired format, such as Markdown, and select the target output, like Typst. The application will then leverage the WASM-compiled Pandoc functionalities to process the document client-side.
| |
| Index Card Notebook |
To get you started, the test Markdown document used as an example in the video is available at the following URL:
https://tessarinseve.pythonanywhere.com/nws/2024-04-16.wiki.html
Feel free to copy and paste this content into the application to see the conversion in action.
Harper LS
Harper-ls acts as the frontend for the Language Server Protocol (LSP) specifically designed for Harper. This tool comes with built-in features that allow it to effectively check comments from a variety of programming languages, making it versatile for developers working in different coding environments. Additionally, Harper-ls provides comprehensive support for Markdown files, enhancing its utility for documentation and content creation.
You can easily download Harper-ls from its GitHub release page, where you will find the latest version and installation instructions. In the near future, we plan to publish a blog post that will guide you through the process of integrating Harper-ls into Vim.
WebAssembly.sh
The exact same WASM-compiled Pandoc, employed in the previous web app, can be uploaded to the WebAssembly shell, allowing it to function as a command-line application directly in the browser, showcasing the incredible versatility of this technology.
txt2tags
Txt2tags is a lightweight markup language that allows users to write documents in plain text while enabling the conversion of these documents into various output formats, such as HTML, LaTeX, and more. It is designed for simplicity and ease of use, making it accessible for writers and developers who prefer a straightforward writing style.
A sample file that illustrates the use of txt2tags markup can be obtained from this link.
Using our Pandoc web tool we obtained for the equivalent Typst document the following code:
TXT2TAGS SAMPLE Aurelio Jargas
= Introduction
Welcome to the txt2tags sample file.
Here you have examples and a brief explanation of all marks.
The first 3 lines of the this file are used as headers, on the following
format:
```
line1: document title
line2: author name, email
line3: date, version
```
Lines with balanced equal signs = around are titles.
= Fonts and Beautifiers
We have two sets of fonts:
The NORMAL type that can be improved with beautifiers.
The TYPEWRITER type that uses monospaced font for pre-formatted text.
We will now enter on a subtitle...
== Beautifiers
The text marks for beautifiers are simple, just as you type on a plain
text email message.
We use double \*, /, - and \_ to represent #strong[bold];,
#emph[italic];, #strike[strike] and #underline[underline];.
The #strong[#emph[bold italic];] style is also supported as a
combination.
== Pre-Formatted Text
We can put a code sample or other pre-formatted text:
```
here is pre-formatted
//marks// are **not** ``interpreted``
```
And also, it\'s easy to put a one line pre-formatted text:
```
prompt$ ls /etc
```
Or use `pre-formatted` inside sentences.
== More Cosmetics
Special entities like email (duh\@somewhere.com) and URL
(http:\/\/#link("www.duh.com");) are detected automagically, as well as
horizontal lines:
#horizontalrule
#horizontalrule
You can also specify an #link("http://duh.org")[explicit link] with
label.
...
= Tables
Use pipes to compose table rows and cells. Double pipe at the line
beginning starts a heading row. Natural spaces specify each cell
alignment.
#figure(
align(center)[#table(
columns: 3,
align: (left,left,right,),
table.header([heading 1], [heading 2], [heading 3],),
table.hline(),
[cell 1.1], [cell 1.2], [cell 1.3],
[cell 2.1], [cell 2.2], [cell 2.3],
)]
, kind: table
)
Without the last pipe, no border:
#figure(
align(center)[#table(
columns: 3,
align: (left,left,right,),
table.header([heading 1], [heading 2], [heading 3],),
table.hline(),
[cell 1.1], [cell 1.2], [cell 1.3],
[cell 2.1], [cell 2.2], [cell 2.3],
)]
, kind: table
)
= Special Entities
Because things were too simple.
== Images
The image mark is as simple as it can be: `[filename]`.
#box(image("img/photo.jpg"))
- The filename must end in PNG, JPG, GIF, or similar.
- No spaces inside the brackets!
#horizontalrule
#box(image("img/t2tpowered.png"))