markdown reference
This WFD was imported from old blog posts scattered across my files. It may still be relevant or it may not. Kept for the record.
reference for markdown features and custom syntax available for blog posts.
text formatting
bold **bold**
italic *italic*
bold and italic ***bold and italic***
strikethrough ~~strikethrough~~
inline code `code`
link
[text](url)
headings
## heading 2
### heading 3
#### heading 4- first item
- second item
- nested item
- third item1. first step
2. second step
3. third step- [ ] uncompleted task
- [x] completed task
- [ ] another pending item> this is a blockquote.
> it can span multiple lines.```javascript
function hello() {
console.log("hello, world!");
}
```function hello() {
console.log("hello, world!");
}supported languages: javascript, typescript, tsx, jsx, python, css, html, json, bash, markdown, and more.
mermaid diagrams
```mermaid
graph TD
A[Start] --> B{Is it working?}
B -->|Yes| C[Great!]
B -->|No| D[Debug]
D --> B
```> [!NOTE]
> useful information that users should know.useful information that users should know, even when skimming content.
> [!TIP]
> helpful advice for doing things better.helpful advice for doing things better or more easily.
> [!IMPORTANT]
> key information users need to know.key information users need to know to achieve their goal.
> [!WARNING]
> urgent info that needs immediate attention.urgent info that needs immediate user attention to avoid problems.
> [!CAUTION]
> advises about risks or negative outcomes.advises about risks or negative outcomes of certain actions.
> [!NOTE/Custom Title Here]
> content with a custom title.content with a custom title instead of the default.
@video[Video caption](https://example.com/video.mp4)@gif[GIF description](https://example.com/animation.gif)@embed[Link title](https://example.com)| Header 1 | Header 2 | Header 3 |
|----------|----------|----------|
| Cell 1 | Cell 2 | Cell 3 |
| Cell 4 | Cell 5 | Cell 6 || feature | syntax | example |
|---|---|---|
| bold | **text** |
bold |
| italic | *text* |
italic |
| code | `code` |
code |
collapsible sections
<details>
<summary>click to expand</summary>
hidden content goes here.
</details>hidden content goes here. supports any markdown:
- lists work fine
- bold text renders correctly
- even code:
const x = 1
function secret() {
return "this was hidden!";
}
quick reference
| element | syntax |
|---|---|
| bold | **text** |
| italic | *text* |
| strikethrough | ~~text~~ |
| code | `code` |
| link | [text](url) |
| image |  |
| heading | ## heading |
| quote | > quote |
| list | - item |
| ordered list | 1. item |
| task list | - [ ] task |
| table | ` |
| code block | ``` |
| mermaid | ```mermaid |
| note | > [!NOTE] |
| video | @video[caption](url) |
| gif | @gif[caption](url) |
| embed | @embed[title](url) |
| component | @component[Name] |
| collapsible | <details> |
react components
embed interactive React components directly in posts:
@component[PixelLoader]
@component[PixelLoaderDemo]components render in a macOS-style frame. Props can be passed as JSON:
@component[ComponentName]({"prop": "value", "count": 5})available components: PixelLoader, PixelLoaderDemo, PixelLoaderAdjacencyDemo