Enjoy the power of MDX!
Hey everyone!
We are thrilled to announce the launch of our new blog! After dedicating significant time and effort, it's finally ready for you to explore. Our blog will highlight some of the fantastic features MDX has to offer.
Looking ahead, we plan to expand our content beyond just news and announcements. We aim to create a platform where content creators and thought leaders can share their insights and experiences with the community through guides, tutorials, opinions, and more.
Text Formatting
You can make text bold, italic, or both. You can also use strikethrough for deleted text.
Lists
Unordered List
- First item
- Second item
- Nested item 1
- Nested item 2
- Third item
Ordered List
- First step
- Second step
- Sub-step A
- Sub-step B
- Third step
Tables
Basic Table
| Feature | Supported | Notes | |
|---|---|---|---|
| Tables | ✅ | Basic markdown tables | |
| Code Blocks | ✅ | With syntax highlighting | |
| Math Equations | ❌ | Not yet implemented | |
| Diagrams | ❌ | Future addition |
Table with Alignment
| Left | Center | Right | |
|---|---|---|---|
| Content | Content | Content | |
| Left-aligned | Centered | Right-aligned |
Code Examples
Inline Code
You can use inline code for short code snippets or technical terms.
Code Block with Filename
1def greet(name: str) -> str:
2 """A simple greeting function"""
3 return f"Hello, {name}!"
4TypeScript Example
1function example() {
2 const x = 1;
3 // Hello world
4 return x + 2;
5}
6Blockquotes
This is a blockquote. Perfect for highlighting important information or quotes.
You can have multiple paragraphs in blockquotes.
— Source Attribution
GitHub-style Alerts
You can use GitHub-style alerts to highlight important information:
Note
This is a note alert. Use it to highlight information that users should take into account, even when skimming.
Tip
This is a tip alert. Perfect for optional information to help users be more successful.
Important
This is an important alert. Use it for crucial information necessary for users to succeed.
Warning
This is a warning alert. Critical content demanding immediate user attention due to potential risks.
Caution
This is a caution alert. Use it to advise about negative potential consequences of an action.
Task Lists
- Support basic Markdown
- Add code highlighting
- Add table support
- Add math equations
- Add diagrams
Advanced Features
Custom Components
You can use React components directly in your MDX:
1<CodeBlock
2 language="typescript"
3 filename="example.tsx"
4 code={`
5 const greeting = "Hello, World!";
6 console.log(greeting);
7 `}
8 highlightLines={[2]}
9/>
10GitHub References
You can automatically link to GitHub issues, commits, and users:
Issues and Pull Requests
- Issue reference: #1
- Pull request: #1
- Issue in another repo: allthingslinux/tux#1
Commits
- Short commit: 37095db
- Commit range: 37095db→d1f9088
- Commit in another repo: allthingslinux/tux@5c6f6f7
Branches
- Main branch: allthingslinux/allthingslinux:main
- Feature branch: allthingslinux/allthingslinux:feature/mdx-components
- Branch in another repo: allthingslinux/tux:develop
Users and Organizations
- User mention: @kzndotsh
- Organization: @allthingslinux
These references will be automatically converted to links with avatars pointing to the correct GitHub pages.
Final Notes
This concludes our MDX features demo. Remember that you can combine all these elements to create engaging and informative blog posts. Looking forward to sharing more content with you soon!
Links and References
- External link: MDX Documentation
- Internal link: Back to Blog
Last updated: March 28, 2024
