Custom CSS styling

Note: Emanote documentation is a work-in-progress

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.

Examples
Getting Started
  • Install Emanote
  • Use your existing notebook, or create one from emanote-template.
  • Run PORT=8080 emanote in terminal after cd’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.

From here, either visit Guide or Demo.

File WikiLinks

[[..]] style wikilinks can link to not only Markdown files, but also to any other files.

For example,

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.

Footnotes
1.
If you are viewing this page on mobile or smaller screens, the embedded notes will be stacked on top of one another because we use Tailwind’s responsive classes. Incidentally, we use the {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).
Links to this page
  • Extended Markdown ✍️

    You can highlight any inline text by wraping them in == (ie. ==inline text==).* The CSS style for highlighted inlines can be specified in index.yaml. Regular Markdown syntax, including emojis, can be mixed in with highlighted inlines to 🍓 give a distinction on top of it all.

#emanote/syntax/demo