Embedding

Note: Emanote documentation is a work-in-progress

You can embed files, using ![[..]] - a syntax inspired by Obsidian. The HTML can be fully customized for each embed types.

Note that the embed wiki-link syntax must appear on a paragraph of its own, with no other text added next to it. 1 Recursive embeds are supported.

Notes

Embedding a note will simply inline it. For example, using ![[start]] displays the following:

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.

Files

Embedding of File WikiLinks, as indicated in the aforementioned Obsidian help page, will eventually be supported; for now, certain file types already work.

See https://github.com/srid/emanote/issues/24 for progress.

Images

Embedding image files as, say, ![[disaster-girl.jpg]] is equivalent to ![](path/to/disaster-girl.jpg)) (this example links to this image). See also the tip: Adding Images.

[[disaster-girl.jpg]]

It is also posible to add images inline (example, here’s the site favicon: [[favicon.svg]]) say in the middle of a paragraph.

Videos

The following is the result of using ![[death-note.mp4]].

Your browser doesn't support HTML5 video. Here is a link to the video instead.

Footnotes
1.
This constraint is necessary to ensure that the HTML generated remains valid. Embedded content use block elements, which cannot be embedded inside inline nodes.
Links to this page
  • File WikiLinks

    If a wikilink refers to a display-able resource like image or video, it will appear embedded in the generated HTML.

  • Custom CSS 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* you can make use of CSS grids as provided by Tailwind’s classes.

  • Adding Images

    Note that the extension uses the traditional ![]() syntax to link to the image, but you may switch to using the wiki-link embedding syntax (![[]]) as it has the advantage of not needing to specify the full path to the image (thus allowing you to the move the image around under the notebook without breaking referring links). emanote-template is already configured to do this by default.

#emanote/syntax/demo