Parts of your Markdown may be styled using custom CSS classes provided by TailwindCSS.
The attributes extension provides the ability to set CSS classes on inline or block level elements of Markdown. You can also specify a “class map” in index.yaml, the default value of which provides some builtin-in styles.
Built-in styles
Emanote provides some built-in styles.
sticky-note
Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.
You should expect the above text to appear styled like a yellow sticky note, because the default index.yaml specifies a “sticky-note” class, which rewrites to a list of Tailwind classes, and that class in turn is (re)used in Markdown notes.
highlight-block
A portion of Markdown that is highlighted compared to the rest
Advanced styling
Using fenced_divs with attributes extension, you can wrap parts of your Markdown using a div, and then style it en masse. For example, to embed multiple notes in a “matrix” arrangement 1 you can make use of CSS grids as provided by Tailwind’s classes.
Here is an assorted collection of websites generated by Emanote:
- https://midirus.com/website (view source)
- https://ema.srid.ca (view source)
- https://blog.hemera.systems/ (view source)
- https://fiatjaf.com/ (view source)
- https://srid.ca/ (view source)
- https://coda-coda.github.io/zettels/ (view source)
- https://gil0mendes.io/ (view source)
- https://input-output-hk.github.io/adrestia/ (view source)
- https://inspirativity.zettel.page/ (view source)
- https://themotte.zettel.page/ (view source)
- https://vanceism7.ml (view source)
- https://plutonomicon.github.io/plutonomicon/ (view source)
- https://haskell-game.dev/ (view source)
- https://ners.ch/ (view source)
Wish to add your Emanote website to the above list? Tell us here.
Follow these steps to get started with Emanote.
- Install Emanote
- Use your existing notebook, or create one from emanote-template 1 .
-
Run
emanote run --port=8080(or justemanote) in terminal aftercd’ing to that notebook folder; this will launch the live server.-
Or, if you only want to generate the HTML files (for deployment), run
mkdir /tmp/output; emanote gen /tmp/output.
-
Or, if you only want to generate the HTML files (for deployment), run
- Visit Guide to learn more about Emanote, or Examples to get inspired first. 2
[[..]] style wikilinks can link to not only Markdown files, but also to any other files.
For example,
- Here is a link to some text file: File:Sample.txt
- You can also specify the full, or subset of, the path: File:markdown/Sample.txt
- Of course, a custom link text may also be specified: Some text file
- All of this is equivalent to normal linking.
In the live server, links to static files will open in new browser tab.
If a wikilink refers to a display-able resource like image or video, it will appear embedded in the generated HTML.
Customizing Default Styling and Templates
Emanote allows you to customize the appearance of HTML components without the need for manual styling each time. This can be accomplished by overriding default templates in your notebook.
To start customizing, create a templates directory in your notebook. From there, you can override any templates you wish by copying them from Emanote’s default templates into your notebook’s templates directory. For example, if you want to customize the default pandoc styling, you can copy the pandoc.tpl file from Emanote’s GitHub repository into your templates/components directory and edit it accordingly.
This customization process works through a “union” of the default layer (provided by Emanote) and your notebook’s layer. Essentially, it’s similar to the unionfs concept - both the default layer and your notebook are union-mounted in Haskell using srid/unionmount. This way, you only need to copy and modify the specific files you want to override, without affecting the rest of the default templates.
Several users have successfully implemented this customization approach in their projects. Refer to the following examples for inspiration:
For additional information and discussion on this topic, check out this discussion on GitHub.
{class=".."} syntax, rather than the {.someClass} syntax, only because the former is more lenient in accepting non-standard class names, such as the Tailwind responsive classes (eg. lg:grid-cols-2).