self-rendering markdown html documents
Add the below oneliner to an existing markdown document:
<!doctype html><script type=module src=https://esm.sh/dogfen></script><textarea style=display:none>
# Header 1
## Header 2
|col 1 | col 2 |
|---|---|
|cell 1 | cell 2 |or start writing a new one!
See a demo of (some) of the supported syntax.
As shown above to render a document you should prepend it with the following line, taking care to ensure the content is in the <textarea> and open in a browser:
<!doctype html><script type=module src=https://esm.sh/dogfen></script><textarea style=display:none>If you want to modify the content using a different editor but still preview in your browser add the live attribute to the <textarea> (optionally, you can provide a value for the attribute in seconds to set the polling rate, by default it's 2.5s):
<!doctype html><script type=module src=https://esm.sh/dogfen></script><textarea style=display:none live read-only>Use a query parameter to set the content with the raw text data fetched from a url:
Note
This base url (https://dogfen.dayl.in/read-only) loads a lighter bundle (without codemirror), you could also specifying this with a query parameter (?read-only)
It's also possible to generate shareable urls:
Example: https://dogfen.dayl.in?raw#BYUwNmD2AEDukCcwBMg
Note
This has the typical caveats of embedding data in a url, i.e. for big documents host the data at a public link and use ?href=
If you wish to share a code snippet rather than markdown you may use the code={lang} attribute or query parameter to treat the entire document as a code snippet
If you need support for katex rendering append /katex to the src url to get a bundle with katex
If you are using read-only mode and won't need the editor append /read-only (or /katex/read-only) to the src url to get a bundle without codemirror
You could define a shell helper function to quickly convert a markdown doc to a dogfen doc.
dogfen() {
echo '<!doctype html><script type=module src=https://esm.sh/dogfen></script><textarea style=display:none>'
[ -z "$1"] && cat "$1"
}dogfen README.md > README.dogfen.html