Embedding

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

Warning

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.

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.

Notes

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

Getting Started

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 just 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.
  • Visit Guide to learn more about Emanote, or Examples to get inspired first. 2
Footnotes
1.
emanote-template also includes the GitHub Pages workflow for static site deployment.
2.
If you are Haskell developer, see Architecture.

Files

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

Progress

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

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

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]] (note that ![](death-note.mp4) also works).

Audio

The following is the result of using ![[cat.ogg]] (note that ![](cat.ogg) also works).

PDFs

PDFs can be embedded using the same syntax. The following is the result of using ![[git-cheat-sheet-education.pdf]] (note that ![](git-cheat-sheet-education.pdf) also works):

Open pdf

Code files

Source code files can be embedded using the same syntax. The following is the result of using ![[haskell-code.hs]] (note that ![](haskell-code.hs) also works): 

module HaskellCode where

main :: IO ()
main = do
  print "Hello World"

A C file: 

#include <stdio.h>

int main() {
    printf("Hello, World!\n");

    return 0;
}

The following file extensions are currently supported:

  • .hs
  • .sh
  • .py
  • .js
  • .java
  • .cpp
  • .cs
  • .rb
  • .go
  • .swift
  • .kt
  • .rs
  • .ts
  • .php
  • .c

To include a new one please see here.

Firefox users

Please note that the wrong syntax highlighting might be applied if you are on Firefox due to what appears to be a browser bug.

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

    [!tip] 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