This is certainly more fun than I had expected, in this post I will be shortly guiding you to the amazing MDX (that X in here is for React-Components) features and also custom MDX components that I can use to compose those interesting blog posts that I do rarely write 😂
#Alright Let's start with basics then~
Here is a simple example of a footnote[1] that you might use in your blog posts. You can add cited text pointing to a source.[2] Also, you can add the link to the source you are reffering to and[3] you might have use in your blog posts.
#Formatting
#Heading Level 4
#Heading Level 3
#Heading Level 2
#Heading Level 1
This is how underlined text looks likeThis is how bold text looks like
This is how italic text looks like
This is how strikethrough looks like
#Ordered List
- Item 1
- Item 2
- Item 3
#Unordered List
- Item 1
- Item 2
- Item 3
#BlockQuote
“The best part of beauty is that which no picture can express”– Francis Bacon
#Table
Tables are useful for presenting structured data in a clear, organized manner. Here’s an example of a table I use to display various levels of experience, learning appetite, project sizes, and solutions:
| Experience Level | Learning Appetite | Project/Team Size | Recommended Solution |
|---|---|---|---|
| Beginner | Low | Small | useState |
| Beginner | Medium | Small to Medium | useContext + useReducer |
| Intermediate | High | Large | Redux Toolkit |
| Advanced | High | Medium to Large | Jotai, Valtio |
| Advanced | High | Large | Recoil (or Relay for GraphQL) |
#Pro-Con Cards
#Inline Code
HashMap<Integer, String>
SELECT Count(*) FROM users
float x=9.99
const func=() => {}
#Code Block
import React from "react";
const Greeting = () => {
React.useEffect(() => {
console.log("Hello, world!");
}, []);
return <div>Check the console for a greeting!</div>;
};
export default Greeting;#Live Code
Live code allows interactive code snippets and their outputs directly in my webpage. Here’s how I use a live code block with the Angular template:
Callout: Alright this block is a callout block to highlight essential information that readers shouldn’t overlook. Below is how the tweet card looks like.
You’re doing sales because you failed at marketing. You’re doing marketing because you failed at product.