Thangavel PrasanthTP

Obsidian - The best personal knowledge management (PKM) tool

4 min read

Markdown formatting

Basic formatting Syntax

Paragraphs

If you want to prevent spaces from collapsing or add multiple blank spaces, you can use the &nbsp; (non-breaking space) or <br> (line break) HTML tags.

Footnotes

You can add footnotes1 to your notes using the following syntax:

This is a simple footnote[^1].
 
[^1]: This is the referenced text.
[^2]: Add 2 spaces at the start of each new line.
  This lets you write footnotes that span multiple lines.
[^note]: Named footnotes still appear as numbers, but can make it easier to identify and link references.

You can also inline footnotes in a sentence. Note that the caret goes outside the brackets.

You can also use inline footnotes. ^[This is an inline footnote.]

You can also use inline footnotes. ^[This is an inline footnote.]

Note

Inline footnotes only work in reading view, not in Live Preview.

Comments

You can add comments by wrapping text with % by using it twice. Comments are only visible in Editing view.

Testing out a … (inline comment), which is hidden.

This is an  (inline) comment where the word inline is enclosed with % twice.
 
Below is a block comment, which is hidden in view mode.

Obsidian Flavored Markdown

SyntaxDescriptionExample
[[Link]]Internal links
![[Link]]Embed files
![[Link\#^id]]Block references
^idDefining a blockObsidian

Obsidian

AI-ML-DS-and-SE Glossary
“Comments
~~Text~~Strikethroughs
==Text==Highlights
```Code blocks
- [ ]Incomplete task
- [x]Completed task
> [!note]Callouts
(see link)Tables

Callouts

Supported callout types

  • > [!note]
  • > [!abstract]
    • Aliases: summary, tldr
  • > [!info]
  • > [!todo]
  • > [!tip]
    • Aliases: hint, important
  • > [!success]
    • Aliases: check, done
  • > [!question]
    • Aliases: help, faq
  • > [!warning]
    • Aliases: caution, attention
  • > [!failure]
    • Aliases: fail, missing
  • > [!danger]
    • Aliases: error
  • > [!bug]
  • > [!example]
  • > [!quote]
    • Aliases: cite

Nested callouts

> [!question] Can callouts be nested?
> 
> > [!todo] Yes!, they can.
> > > [!example]  You can even use multiple layers of nesting.

Foldable callouts

 > [!note]- Foldable
 > This is a foldable callout

Plugins

Extending Obsidian

CSS Snippets

table-wrap.css

/* 
	Cribbed from the excellent ITS Theme
	https://github.com/SlRvb/Obsidian--ITS-Theme 
*/
.cm-s-obsidian .HyperMD-table-row.HyperMD-table-row.HyperMD-table-row {
	white-space: pre-wrap;
	min-width: min-content;
	}

frozen-headers.css

/* Freeze table headers in Obsidian */
table {
    border-collapse: collapse;
    width: 100%;
}
 
thead {
    position: sticky;
    top: 0;
    background-color: var(--background-primary);
    z-index: 2; /* Ensure it stays above the content */
}
 
th {
    background-color: var(--background-secondary);
    color: var(--text-normal);
    text-align: left;
    padding: 8px;
}
 
td {
    padding: 8px;
    border: 1px solid var(--background-modifier-border);
}

mermaid-tweak.css

/*
Source(s): 
    - https://stackoverflow.com/questions/78935770/how-to-set-rendered-mermaid-diagrams-width-to-be-based-on-screen-size-in-obsidia
    - https://forum.obsidian.md/t/resize-and-align-mermaid-diagrams/7019
    - https://www.reddit.com/r/ObsidianMD/comments/1crsgop/til_about_mermaid_diagrams/?rdt=50293
Date updated: 2024-02-14 (YYYY-MM-DD)
*/
 
/** Set Mermaid Diagrams to 100% width of screen by default */
 
.mermaid svg {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}
 
/** On hover, make the diagram full width and enable horizontal scrolling */
 
div:has(> .mermaid):hover {
    width: auto !important;
}
 
.mermaid:hover {
    overflow: scroll;
    padding: 0;
    margin: 0;
    text-align: left;
}
 
.mermaid:hover svg {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

customer.scss for Animated GIFs

@use "./base.scss";
 
// put your custom CSS here!
 
/* Animated emoji styles */
.animated-emoji {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  
  img {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 0;
  }
}

Example: Without custom css

  • ✅ Example: With custom css class in quartz styles
  • ✅

Updating the Site

Key commands

  • Building the quartz
    • This will start a local web server to run our Quartz on our computer. We can view it at http://localhost:8080/
npx quartz build --serve
  • Sync the change to Github & Deploy
    • Run tis command every time we want to push updates to our repository.
npx quartz sync
  • Upgrading Quartz
    • To fetch the latest Quartz updates, simply run
npx quartz update

For more details, refer Quartz 4.0 official documentation

Customising the site

ContentMeta.tsx

interface ContentMetaOptions {
  ...
  showAuthor: boolean
}

const defaultOptions: ContentMetaOptions = {
  ...
  showAuthor: true,
}

export default ((opts?: Partial<ContentMetaOptions>) => {
  ...
  
  function ContentMetadata({ cfg, fileData, displayClass }: QuartzComponentProps) {
      ...
      
      // Display author if enabled and available
      if (options.showAuthor && fileData.frontmatter?.author) {
        segments.push(<span>Book by {fileData.frontmatter.author}</span>)
      }

Obsidian References

Site Inspirations

Tutorials & Youtube Videos

Documentations

  • Quartz 4.0
    • The documentation I referred to publish my Obsidian notes for free with Quarts

Non-obsidian Site Inspirations

Footnotes

  1. This is the referenced text. ↩

Graph View

Backlinks