Demo of markdown features

This is a quick demo of markdown features

By Conrad OsvikSeptember 19, 2025blogmarkdownshadcn

Introduction

This is the introduction to my first blog. Let me show you what we can do with inline code and other markdown features.

This is a blockquote to demonstrate the styling. It should have nice borders and muted text colors that work well with the shadcn design system.

Lists and Text

Here's an unordered list:

• First item with some text
• Second item that's longer to show how wrapping works in the list items
• Third item

And an ordered list:

1. First numbered item
2. Second numbered item with inline code
3. Third item with a link

Tables

Code Examples

Here's a TypeScript example with line numbers:

console.log('Hello, world!')
 
function add(a: number, b: number): number {
    return a + b
}
 
class Calculator {
    constructor(private initialValue: number = 0) {}
 
    add(value: number): this {
        this.initialValue += value
        return this
    }
 
    getValue(): number {
        return this.initialValue
    }
}
 
const calc = new Calculator(10).add(5).add(3)
 
console.log(calc.getValue()) // 18

Math Examples

Inline math like $E = mc^2$ should be styled nicely.

Block math gets special treatment:

More complex math:

GitHub Flavored Markdown (GFM)

Task Lists

• Implement feature
• Write tests
  • Unit tests
  • Integration tests
• Update docs

Strikethrough

This text has obsolete information that was updated later.

Autolink Literals

Bare links are automatically linked in GFM:

https://example.com and www.github.com will both be clickable.

Footnotes

Here is a statement with a footnote.¹

Aligned Table

Diff Code Block

diff --git a/app/page.tsx b/app/page.tsx
index 1111111..2222222 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@
- return <h1>Hello</h1>
+ return <h1>Hello, world!</h1>

Details Disclosure

Conclusion

This demonstrates all the styling features working together with the shadcn design system!