docs-obsidian.md

Obsidian Extensions

Here you can find the technical intricacies of the Obsidian-specific language extension.

Back to the main page.

Globally Unique File Names

Obsidian uses quick-links like so:

# The next line will insert a link to a file.
[[md-file-name-without-extension]]

# The next line will insert an image.
![[image-file-name-with-extension]]

In order to be able to do that, you are not allowed to have two files with the exact same file-name within a vault. Even if they are located in different directories. Same goes for images and other assets. If you have two files, for example, named test, then you'll have to add the complete path in links to any of the two test files.

So plan your file-names carefully. You'll be rewarded with a much faster and smoother editing-experience.

Callouts

Contrary to GitHub or standard MD, Obsidian supports callouts, which are basically colorfully rendered boxes with headings and content (cards, one might say). Those look great, especially when dealing with long text-flow or when interspersing text with info-points or homework-reminders.

Examples:

# A note.
> [!note]
> content

# A Warning with 'BOO!' in the heading, instead of the default 'Warning'.
>[!warning] BOO!
>content

# A collapsable callout
>[!tip]-
>content

# A collapsable callout with 'some long text' as heading.
>[!quote]- some long text
>content

You get the idea. You can see all the variations here.

They all work with one exception:

Image Sizing

The renderer will never touch the image's size, until it won't fit the display. If that occurs, it will just resize it proportionally to fit it.

To display images at a special size, you have the following options. Those work on normal image-links, like the standard DM ones and the shortcut-links Obsidian provides.

# Display in 200x200 pixels (x + 'x' + y)
![some alt-text|200x200](assets/my-img.png)
# And as short-link
![[my-img.png|200x200]]

# Display in 200 pixels widths, sized proportionally
![some alt-text|120](assets/my-img.png)
# And as short-link
![[my-img.png|120]]

Fragments in Reveal.js

You may use fragments when starting a presentation. Fragments are parts of you page that pop up one after another, step by step, when you're pressing the forward-button you normally press to advance to the next vertical page.

Single Fragment Lines

You may mark single lines as Fragments. Those lines are denoted by having a #fragment in the line above them. A single line is defined as from the start of a line to the next newline, so that may as well span more than a single line when line-breaks are inserted by the browser in order to fit that single line on the screen.

Single Fragment Example

This text displays already.
##fragment
Fragmented Text comes in after that.
- ##fragment one
- ##fragment two

Another example that fades in two blocks one after another would look like this:

This text is already on the page.
##fragment
- Then this
- fades in
##fragment
- and then
- these three
- lines

So you may see the ##fragment tag as some kind of a stop here and wait for me to press space tag.

Side-By-Side in Reveal.js

It's possible to make columns that only work when making a presentation in Reveal.js. You may denote a side-by-side number of columns this and every section (column) will then render side by side, from left to right. This enables you to fill a wide-screen with, let's say, an image and a table with an explanation besides it.

Normal text. Will be displayed centered.
##side-by-side-start
This text will be on the left side...
- one
- two
##separator
- three
- four

This will be on the right side
##side-by-side-end

and this will be below the side-by-side element on the bottom.

When watching the document in the normal HTML view those tags have no effect. You can specify more than one separator resulting in more columns.