Skip to main content
CSS is fun and cool and I like it.
Article

Working With MDX Custom Elements and Shortcodes

MDX is a killer feature for things like blogs, slide decks and component documentation. It allows you to write Markdown without worrying about HTML elements, their formatting and placement while sprinkling in the magic of custom React components when necessary.

Let’s harness that magic and look at how we can customize MDX by replacing Markdown elements with our own MDX components. In the process, we’ll introduce the concept of “shortcodes” when using those components.

As a heads up, the code … Read article “Working With MDX Custom Elements and Shortcodes”

Article

An Introduction to MDXJS

Markdown has traditionally been a favorite format for programmers to write documentation. It’s simple enough for almost everyone to learn and adapt to while making it easy to format and style content. It was so popular that commands from Markdown have been used in chat applications like Slack and Whatsapp as document applications, like Dropbox Paper and Notion. When GitHub introduced Markdown support for README documentation, they also rendered HTML content from it — so, for example, we could drop … Read article “An Introduction to MDXJS”

Article

Embedded Content in Markdown

Markdown supports HTML, so if you need to, say, embed a YouTube video, you can just copy and paste the embed code from them, drop it into a Markdown document, and you should be good to go. With YouTube specifically, there are other options. But in general, you don’t need to do anything special to embed third-party media in Markdown.

You do need to do whatever is necessary for that particular service though. For example, on CodePen, you visit … Read article “Embedded Content in Markdown”

Article

How to Modify Nodes in an Abstract Syntax Tree

One of the more powerful concepts I’ve stumbled across recently is the idea of abstract syntax trees, or ASTs. If you’ve ever studied alchemy, you may recall that the whole motivation for alchemists was to discover some way to transform not-gold into gold through scientific or arcane methods.

ASTs are kind of like that. Using ASTs, we can transform Markdown into HTML, JSX into JavaScript, and so much more.… Read article “How to Modify Nodes in an Abstract Syntax Tree”

Article

Front-End Documentation, Style Guides and the Rise of MDX

You can have the best open source project in the world but, if it doesn’t have good documentation, chances are it’ll never take off. In the office, good documentation could save you having to repeatedly answer the same questions. Documentation ensures that people can figure out how things work if key employees decide to leave the company or change roles. Well documented coding guidelines help bring consistency to a codebase.

If you’re writing long-form text, Markdown is clearly a great … Read article “Front-End Documentation, Style Guides and the Rise of MDX”

Link

Dealing with Spacing in Compiled Markdown Articles

Article

Plugins Loaded

A huge high-five to John James Jacoby for his help here on CSS-Tricks fixing up our Markdown + bbPress integration. John runs Plugins Loaded, a source of high-quality WordPress plugins that you can use for free, or choose to pay to support.
Article

You Should Probably Blog in Markdown

Maybe you’ll read that title and think:

Damn, Chris. Little dogmatic isn’t it? There are lots of ways to do things, especially on the web. Why be all prescriptive?

You’d be right. What I actually want is for everyone creating content on the web to create that content in a clean way that will serve them long into the future. Markdown, I feel, highly encourages that.

Let us explore some of those ways.

If you have no idea what Markdown … Read article “You Should Probably Blog in Markdown”