/ tools / mdshare
Sign in
tools / mdshare
mdshare / README.md
44 lines · 3.4 KBCodeBlameHistory
3A markdown editor whose document lives entirely in the URL. Type markdown on the left, see it rendered on the right, and share the page by copying the link: the text is compressed and encoded into the URL fragment, so there is no server, no account, and nothing is uploaded.
5**Live: <https://concept-collection.github.io/mdshare/>**
7## What it renders
9- LaTeX math, inline (`$...$`) and display (`$$...$$`), via remark-math and KaTeX
10- Fenced code blocks with per-language syntax highlighting (highlight.js) and a copy button
11- GitHub-flavored markdown: tables, task lists, strikethrough, footnotes, autolinks
12- Mermaid diagrams in ` ```mermaid ` fences (the mermaid library is loaded lazily, only when a document uses one)
14Raw HTML in the document is deliberately rendered as text rather than passed through. Since any document can arrive via a shared link, HTML passthrough would let a link author run script in the viewer's browser.
e105fa2Export to PDF via the browser's print pipelineJeremy Magland 16## Export to PDF
18Sharing a link is enough for most readers, but a document sometimes has to become a file: an attachment, a printed handout, something to archive. The **Export PDF** button (or the browser's own Ctrl/Cmd+P) prints the rendered pane through the browser's "Save as PDF" destination, so no rasterizing library and no compile server are involved. Math stays selectable text, diagrams stay vector SVG, and the file is produced entirely on the reader's machine.
20The print stylesheet in `src/print.css` turns the two-pane layout into a single flowing document: the toolbar and the editor are hidden, the fixed heights that make the screen version scroll are lifted, and page breaks are kept out of the middle of equations, diagrams and table rows. A table continued on the next page repeats its header row. Long code blocks and long tables are allowed to break across pages, since forbidding it mostly leaves blank paper. The document's first heading becomes the filename the browser suggests.
22Note that page size, margins beyond the stylesheet's defaults, and whether the page carries the date-and-URL header are controlled by the browser's print dialog rather than by this page. We emphasize that the result is a print of the same HTML shown on screen, so it is not typeset the way LaTeX would typeset it: there is no float placement, no hyphenation and justification pass, and no numbered sections or cross-references.
3e0fff3mdshare: markdown editor with the document stored in the URLJeremy Magland 24## How the URL encoding works
26The document is stored in the hash fragment as
28```
29#base64url( version byte + DEFLATE(utf8 text) )
30```
32The fragment is never sent to any server, and base64url needs no percent-escaping, so links survive copy and paste through chat clients and email. A one-byte version header leaves room to change the encoding later without breaking old links. Editing updates the URL in place (via `replaceState`, debounced) so the address bar always holds a shareable link; the length of the current URL is shown in the top bar.
34A typical page of prose with a few equations compresses to a URL of roughly one to two thousand characters. Browsers handle URLs far longer than that, but some other software truncates very long links, so the length indicator is worth a glance before sharing a large document.
36## Development
38```bash
39npm install
40npm run dev # local dev server
41npm run build # typecheck + production build to dist/
42```
44Deployment to GitHub Pages is automatic on push to `main` via `.github/workflows/deploy.yml`.
↑↓ move↵openescclose