This Website's Markdown Guide
ajisai-ame v2's markdown components and mdx usage guide
Overview
Markdown is great for its intuitive and ease-of-use in note-taking. It doesn’t take long to learn the Markdown syntax and its usage is standardized across most websites–otherwise, any discrepancies are noted inline.
While this is a simple documentation of my base Markdown usage, it’s all just to document how it’s implemented in v2. The styles and components applied on are custom and tailor-made, inspired by Nick Milo and the custom AnuPpuccin theme he used in his guide. Please check Nick’s YouTube channel out!
If you're interested in knowing more about how Obsidian revived my interest in blogging, and how this website to be, please read my blog post!
I’ve taken the standard Markdown syntaxes and Obsidian’s custom elements just for this project and this is the article to document that.
Basic Syntax
Markdown Natives
Headings
Use # before your text. It renders an <h> element corresponding to the heading level used.
# This is a heading 1
## This is a heading 2
### This is a heading 3
#### This is a heading 4
##### This is a heading 5
###### This is a heading 6Paragraphs
Any blank line separated by a line break. It renders a <p> element.
This is a paragraph.
This is a paragraph.
Emphasis
Italic
Use a singular * or _ to italicize text in-between. This renders an <em> element.
This text is *italicized*.
This text is italicized.
Bold
Use dual ** or __ to thicken text in-between. This renders a <strong> element.
This text is **bold**.
This text is bold.
Strikethrough
Use ~~ to create a strikethrough text, characterized by text with a horizontal line through the letters.
~~This is strikethrough text.~~
This is strikethrough text.
Bold and Italic
Use triple asterisks *** to apply both bold and italics into text.
***This is bold and italic***
This is bold and italic
Lists
Hyperlinks
Native Embeds
Blockquotes
Codeblocks
Obsidian Elements
Obsidian has features that provide extra utility that’s unique to the program, including proprietary elements. If you used these syntaxes outside of Obsidian, they simply render as raw text on basic Markdown viewers. Learn more about Obsidian’s markdown syntax here.
These are the elements I’ve imported and recreated for the site.
Obsidian Embeds
Display contents of a file, mostly used for images.
Use ![[filename.filetype]] to directly fetch the content. Optionally, you may add captions by appending |<caption> after the filename.
In this project, it renders a custom PostImage component.
![[banner.jpg|Chin-lan Chang]]
Callouts
Callouts are collapsible, styled information boxes.
Start a callout with > [!<type>], optionally followed by a title on the same line. Write the callout body on the following lines. A blank line ends the callout block. This syntax renders a custom Callout component.
> [!NOTE]Sample
Sample text.
Sample text.
Currently, these are all Callout variants:
Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
Sample text.
Highlights
Highlight inline text by wrapping it in two equal == signs on each side. This renders a custom Highlight component.
This is ==highlighted text==.
This is highlighted text.
Future Implementation
If you’re an adept Obsidian user, you may notice some elements aren’t present in this site. A large part is that either I currently don’t use them myself or aren’t needed in the system. Both can be true, though. Though, a big feature that I’d like to have are Wikilinks for internal bi-directional linking across the project.
Other omitted Obsidian-flavored Markdown include:
[[Link]]- Internal links![[Link#^id]]- Block references^id- Block definition[^id]- Footnotes%%Text%%- Comments- [ ]&- [x]- Checkboxes- Tables
Bluesky comments aren't configured for this article