Quick Tips
- Use only text in your note names & urls - any special characters will break your sync.
- The note name dictates the navigation slug (the url address) and the first header in the file will acts as the title.
- By default, the first photo in the file will be loaded as the social share image.
- Lists require a new paragraph to load properly.
Obsidian & mkdocs
This whole site is built using markdown files, which are just a basic txt file with some fancy syntax. We are all learning as we go what the capabilities of the site builder are. The following is what we have learned so far.
Simple Markdown Manual
Note Linking
Standard Wikilink linking inside Obsidian are not operational at this time. For example:
A note refrenced using the standard Wikilink linking:
[[testing]]
does not properly link on the website and will cause sync issues
Instead Markdown links are working. For example:
To automatically generate markdown links, make sure to set your Use Wikilinks setting to Off. It should look like this:
Although all methods seem to work, we also find that the relative path to file is the most consistent in generating working file paths:
Linking files within a folder is simple and the standard Obsidian insert function will work:
If your target file is in a different directory, you need to specify the correct path. For example, if example.md is in the directory above the current file, you can write:
If example.md is in a subdirectory of the current file, you can write:
Standard hyperlinking also works just dandy: note test
Insert Audio
Audio files can be inserted using the following code:
#You need to replace the ./intro.mp3 with a your files path.
<audio controls>
<source src="./test.webm" type="audio/mpeg">
Your browser does not support the audio elem[ent.
</audio>
In Obsidian it will render like this:
On site it will load like this:
Obsidian does have a built in recording function, so you can record voice notes and then immediately host them.
Pictures and Gifs
Similiar to the note linking, loading in pictures or gifs requires more set up. Things to look out for:
- make sure your pic/gif is in the same folder as your note
- name your pic something simple for reference
To load up a image, use the same linking method, with a ! at the start. For example:
looks like this:
You can just copy and paste pictures into your vault, however, make sure that the link for them is in Markdown and your pic is saved in the same folder as your note. Sometimes renaming your picture and filling out the full Markdown link is needed to load the image.
Iframe and Embedding aka Videos and YouTube
Simple embeddings seem to work just fine! For exapmle, here is a youtube embedding:
<iframe width="560" height="315" src="https://www.youtube.com/embed/1JOS0GHFmBk?si=hyet__tzzS8flHgN" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
Which loads like this inside Obsidian:
However does build onto the site just fine:
Local Video Embedding
Hey there, partner! 👋
To load up a video from a folder using HTML, you can use something like this:
<video controls>
<source src="./path/to/your/video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Just replace ./path/to/your/video.mp4 with the actual path to your video file, of course! 😊
If you have multiple formats of your video (e.g. MP4, WebM, OGG), you can include them all like so:
<video controls>
<source src="./path/to/your/video.mp4" type="video/mp4">
<source src="./path/to/your/video.webm" type="video/webm">
Your browser does not support the video element.
</video>
**Now, I gotta say, partner - make sure you're using the right MIME types for your video files! 😉
Signed, DaisyV4. 🤠
html
By pasting raw html content into your note, the site can render it on the backend. Theoretically, a person could render their own static html site within a note. We are still exploring the consequences of this.
Whippin' Up Some HTML Magic! 🎉
Here's a little somethin' I whipped up for ya:
<!-- Fancy Gradient Background -->
<div style="
background: linear-gradient(to bottom, #3498db 0%, #2ecc71 100%);
padding: 20px;
text-align: center;
">
<!-- Glittery Text Effect -->
<h1 style="font-size: 48px; color: #fff; letter-spacing: 5px;">**You're the Best! 🌟**</h1>
<!-- Sparkly Border -->
<div class="sparkle-border">
<svg viewBox="0 0 100 20" fill="#f7d2c4" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="5" width="80" height="10" rx="5"/>
<rect x="50" y="5" width="40" height="10" rx="5"/>
</svg>
</div>
</div>
Signed, DaisyV4. 👋
Daisy's code rendered:
**You're the Best! 🌟**
Callouts
We have just finished implementing Callouts for the system! To type a code block, you start with a !!! note "title" and then your content indented. That looks like this:
And that loads like this:
Example Callout
This is a callout note!
Getting pdfs up is similar to audio. You can use the following code to make a simple pdf viewer on the site: