• 4 min read

Welcome to kippmr.com!

Hello World!

And welcome to my corner of the internet, glad to have you.

Consider this blog more of a tech demo of what functionality I have added, so I don't forget and create the same thing twice 🙈. First off, credit where credit is due.

Next.js: Vercel

  • Been a blast using an SSR framework
  • Is a blast admiring the page load speed 😍

mdx-bundler: Kent C. Dodds

  • Super nice mdx compiler and bundler
  • I will eventually be able to host my markdown files in a separate git repository than the entire website, which I plan on doing
  • The author's website is a great demo of how well mdx-bundler can work

Code blocks, but better: Pedro Duarte

  • Guided me to accomplish a lot of the code block features you see here
  • Learned a lot about rehype and associated packages
  • Ended up using typescript and esbuild to implement the features

General features

Uses MDX

  • Markdown is simple to write, easy to read, and stored in my GitHub
  • The X (for XTREME) allows me to load cool .tsx components like below
😎

WOW!! This is cool.

Has a Table of Contents

  • These always make it easy to quickly parse a document to find what you're looking for
  • This is one of those cool ones that stick with you and follow you down the page
  • Clicking on a Header (in the Table of Contents or on the page) will add an id to the url for easier sharing

Code block features

This is where it starts to get really fun. There is a bunch of interactive and visually distinctive features to help show code, feature specific lines, and differentiate between portions of relevant code. So far what we can do includes:

  • Show line numbers
  • Show a file name
  • Highlight lines
  • Highlight words
  • Link words to out-of-block content
  • Link words to external sites

Code block demo

Show line numbers

Adding showLineNumbers to start of a code block will show line numbers, not including it will not

//

// This code block does not have line numbers!

//

//

// This code block has line numbers!

//

Show a file name

Adding a file name fileName=__FILENAME__.ext

FILENAME.ext
// Look up there ^^

// I can see a file name, can you?

Link words to out-of-block content

To highlight the words hover me. I have set a jsx element with an id and an index. The code block starts with id=TheId, then inside the code block I surround my word to highlight with double underscores.

import React from 'react';



function Hello() {

  return <h1>Hello world</h1>;

}

Link words to external sites

Similar to above, I have set a jsx element with an id and an index. Except now there is also an href with the external site that should be linked to. Finally, add the id to the code block start and double underscore inside of it.

import React from 'react';

Highlight lines

Here we can choose a range of lines that should be specified. line=1-2,4,6 will select lines 1 to 2, line 4, and line 6.

SimplePage.html
<main>

  <h2>The header</h2>

  <article class="bold">something in here</article>

</main>

Conclusion

That is all I have for now. This was mostly just a reference I can look back on, but I figured it would be fun to share the cool things possible through mdx here. Hope you enjoyed! 👋