https://github.com/bestia-dev/markdown_to_html
Render markdown to html client-side in the browser with WASM.
https://github.com/bestia-dev/markdown_to_html
maintained ready-for-use tutorial
Last synced: 9 months ago
JSON representation
Render markdown to html client-side in the browser with WASM.
- Host: GitHub
- URL: https://github.com/bestia-dev/markdown_to_html
- Owner: bestia-dev
- License: mit
- Created: 2023-11-25T16:07:35.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-01T11:45:49.000Z (about 1 year ago)
- Last Synced: 2025-04-09T00:49:17.101Z (12 months ago)
- Topics: maintained, ready-for-use, tutorial
- Language: CSS
- Homepage: https://bestia.dev/markdown_to_html_example
- Size: 93.8 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[//]: # (auto_md_to_doc_comments segment start A)
# markdown_to_html
[//]: # (auto_cargo_toml_to_md start)
**Render markdown to html client-side in the browser with WASM.**
***version: 2023 date: 2023-11-17 author: [bestia.dev](https://bestia.dev) repository: [GitHub](https://github.com/bestia-dev/markdown_to_html)***
[//]: # (auto_cargo_toml_to_md end)
Hashtags: #tutorial #markdown #wasm
My projects on GitHub are more like a tutorial than a finished product: [bestia-dev tutorials](https://github.com/bestia-dev/tutorials_rust_wasm).
## Try it
## Markdown
Markdown is great! It is as easy as plain text but renders in a beautiful style that I could never achieve on my own in some Rich text or HTML.
The syntax is super easy and it is human readable in both plain text and HTML format.
In VSCode and many other editors, I can write Markdown files, and insert images and links. Then there is a Preview panel to watch how it renders.
Usually, the markdown syntax is rendered to HTML. Many libraries do that.
I chose because it can be used inside a browser on the client side.
## Publish to Web
Now I want to publish these markdown files to the Web. I have a small web server. I copy all the files there.
No luck! Web browsers don't recognize and render markdown, just HTML.
I could use a server-side filter for Nginx or write my own Rust web app, but that is overkill.
I find it attractive to use Wasm in the browser to render the .md files on the fly.
I found this library: written in Rust and compiled to wasm.
With some glue files and JavaScript, it is easy to make it work.
## Files on the Web server
For this to work I need a simple Web server that returns files, nothing more. No dynamic web app or anything exotic.
It will not work without a Web server on the local disk, because `wasm` files must be fetched from a Web server because of security.
Let's start with `index.html`. It will just redirect to the HTML file with JavaScript, adding the first_page.md file as a parameter.
```HTML
window.location.replace("mdtohtml.html?first_page.md");
```
The javascript program is all in the `mdtohtml.html`. There is some simple code to accept a URL parameter.
I also regex replaced the links inside the markdown to work with the new indirection.
For simplicity I don't bother with subfolders. All .md files must be in the same folder.
And then we call the `markdown.parse()` method from the wasm module.
Sure we have to add some beautiful CSS that is similar to GitHub markdown.
```HTML
async function fetch_md_convert_to_html() {
let params = window.location.search;
if (params==''){
params = "?first_page.md";
window.location.search=params;
}
let mdFile = params.substring(1);
const response = await fetch(mdFile);
let mdText = await response.text();
mdText = mdText.replaceAll(/(\[.*\]\()(.*\.md\))/g, '$1mdtohtml.html?$2');
document.body.innerHTML=markdown.parse(mdText);
}
.markdown-body {
box-sizing: border-box;
min-width: 200px;
max-width: 980px;
margin: 0 auto;
padding: 45px;
}
@media (max-width: 767px) {
.markdown-body {
padding: 15px;
}
}
fetch_md_convert_to_html();
```
We need to add the magic ingredients to the folder: `markdown.js`, `markdown.wasm`, `github-markdown.css`
and voila! It works.
## Open-source and free as a beer
My open-source projects are free as a beer (MIT license).
I just love programming.
But I need also to drink. If you find my projects and tutorials helpful, please buy me a beer by donating to my [PayPal](https://paypal.me/LucianoBestia).
You know the price of a beer in your local bar ;-)
So I can drink a free beer for your health :-)
[Na zdravje!](https://translate.google.com/?hl=en&sl=sl&tl=en&text=Na%20zdravje&op=translate) [Alla salute!](https://dictionary.cambridge.org/dictionary/italian-english/alla-salute) [Prost!](https://dictionary.cambridge.org/dictionary/german-english/prost) [Nazdravlje!](https://matadornetwork.com/nights/how-to-say-cheers-in-50-languages/) 🍻
[//bestia.dev](https://bestia.dev)
[//github.com/bestia-dev](https://github.com/bestia-dev)
[//bestiadev.substack.com](https://bestiadev.substack.com)
[//youtube.com/@bestia-dev-tutorials](https://youtube.com/@bestia-dev-tutorials)
[//]: # (auto_md_to_doc_comments segment end A)