Part of the earth at night showing lit up cities and the aurora borealis can be seen

Posted : 12/22/2020

1 min. read

Written: 01/01/2020

# mdx # test # code # table

Code Tests

Hello Code

Imported React Component

Live Code Example with title

src/react-live-test.js

const onClick = () => {
  alert('You opened me')
}
render(<button onClick={onClick}>Alohomora!</button>)

const onClick = () => {
  alert('You opened me')
}
render(<button onClick={onClick}>Alohomora!</button>)

Normal code block with language defined

1(function() {
2
3var cache = {};
4var form = $('form');
5var minified = true;
6
7var dependencies = {};
8
9var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
10var treePromise = new Promise(function(resolve) {
11    $u.xhr({
12        url: treeURL,
13        callback: function(xhr) {
14            if (xhr.status < 400) {
15                resolve(JSON.parse(xhr.responseText).tree);
16            }
17        }
18    });
19});

A code block with a title, JSDoc comment, short, and long comment

src/util/getValue.js

1/**
2 * Get value out of string (e.g. rem => px)
3 * If value is px strip the px part
4 * If the input is already a number only return that value
5 * @param {string | number} input
6 * @param {number} [rootFontSize]
7 * @return {number} Number without last three characters
8 * @example removeLastThree('6rem') => 6
9 */
10const getValue = (input, rootFontSize = 16) => {
11  if (typeof input === `number`) {
12    return input / rootFontSize
13  }
14
15  const isPxValue = input.slice(-2) === `px`
16
17  if (isPxValue) {
18    return parseFloat(input.slice(0, -2))
19  }
20
21  return parseFloat(input.slice(0, -3))
22}
23
24// This is a little helper function
25const helper = (a, b) => a + b
26
27// This is also a little helper function but this time with a really long one-line comment that should show some more details
28const morehelper = (a, b) => a * b
29
30export { getValue, helper, morehelper }

Normal block without language or anything else specified

1import Test from "../components/test"
2
3const Layout = ({ children }) => (
4  <Test>
5    {children}
6  </Test>
7)
8
9export default Layout

Code block with title and code highlighting

src/components/post.jsx

1import React from 'react'
2
3const Post = ({ data: { post } }) => (
4  <Layout>
5    <Heading variant='h2' as='h2'>
6      {post.title}
7    </Heading>
8    <p
9      sx={{
10        color: `secondary`,
11        mt: 3,
12        a: { color: `secondary` },
13        fontSize: [1, 1, 2],
14      }}
15    >
16      <span>{post.date}</span>
17      {post.tags && (
18        <React.Fragment>
19          {` — `}
20          <ItemTags tags={post.tags} />
21        </React.Fragment>
22      )}
23    </p>
24    <section
25      sx={{
26        ...CodeStyles,
27        my: 5,
28        '.gatsby-resp-image-wrapper': { my: 5, boxShadow: `lg` },
29      }}
30    >
31      <MDXRenderer>{post.body}</MDXRenderer>
32    </section>
33  </Layout>
34)
35
36export default Post

Code block without title or language

1Harry Potter and the Philosopher's Stone

Some GraphQL

1query SITE_INDEX_QUERY {
2  allMdx(
3    sort: { fields: [frontmatter___date], order: DESC }
4    filter: { frontmatter: { published: { eq: true } } }
5  ) {
6    nodes {
7      id
8      excerpt(pruneLength: 250)
9      frontmatter {
10        title
11        date(formatString: "YYYY MMMM Do")
12      }
13      fields {
14        slug
15      }
16    }
17  }
18}

An SVG of something...twitter?

1<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#607D8B" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" class="icon icon-tabler icon-tabler-brand-twitter" viewBox="0 0 24 24">
2  <defs/>
3  <path stroke="none" d="M0 0h24v24H0z"/>
4  <path d="M22 4.01c-1 .49-1.98.689-3 .99-1.121-1.265-2.783-1.335-4.38-.737S11.977 6.323 12 8v1c-3.245.083-6.135-1.395-8-4 0 0-4.182 7.433 4 11-1.872 1.247-3.739 2.088-6 2 3.308 1.803 6.913 2.423 10.034 1.517 3.58-1.04 6.522-3.723 7.651-7.742a13.84 13.84 0 00.497-3.753C20.18 7.773 21.692 5.25 22 4.009z"/>
5</svg>

Ewww, XML (nah, good 'ol days)

1<Emp><name>Michael Hartstein</name><hiredate>2004-02-17</hiredate></Emp>
2<Emp><name>Pat Fay</name><hiredate>2005-08-17</hiredate></Emp>
3<Emp><name>Susan Mavris</name><hiredate>2002-06-07</hiredate></Emp>
4<Emp><name>Hermann Baer</name><hiredate>2002-06-07</hiredate></Emp>
5<Emp><name>Shelley Higgins</name><hiredate>2002-06-07</hiredate></Emp>
6<Emp><name>William Gietz</name><hiredate>2002-06-07</hiredate></Emp>

MD works, mdx does not

1---
2title: My Second Post! I'm liking this...
3slug: my-second-post
4date: 2020-09-02
5featureImage: ./mountain.jpg
6excerpt: something excerptatious
7---
8
9# Hi there!
10
11This is a blog page

How do you install this MDX again?

1npm install gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
2npm install mdx-utils

Aww, some funding code

1github: [thomaswang]

Here's some JSON

package.json

1{
2  "name": "gatsby-starter-hello-world",
3  "private": true,
4  "description": "Tutorial blog from Skillthrive's Build a Blog series",
5  "version": "0.1.0",
6  "license": "0BSD"
7}

Code block without lineNumbers (but lang):

Harry Potter and the Chamber of Secrets

Code block without lineNumbers (and without lang):

Harry Potter and the Chamber of Secrets

Code block with only the title:

src/utils/scream.js

const scream = (input) => window.alert(input)

Code block with only the title but with lineNumbers:

src/utils/scream.js

1const scream = (input) => window.alert(input)

Line highlighting without code title:

1const test = 3
2const foo = 'bar'
3const harry = 'potter'
4const hermione = 'granger'
5const ron = 'weasley'

Here will inline code go, just inside the text. Wow!

Code block without line numbers but with highlighting, language, and title:

src/components/blog.tsx

import React from 'react'

const Blog = ({ posts }: PostsProps) => {
  const { tagsPath, basePath } = useSiteMetadata()

  return (
    <Layout>
      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
        <Heading variant='h2' as='h2'>
          Blog
        </Heading>
        <Styled.a as={Link} sx={{ variant: `links.secondary` }} to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}>
          View all tags
        </Styled.a>
      </Flex>
      <Listing posts={posts} sx={{ mt: [4, 5] }} />
    </Layout>
  )
}

export default Blog

Exploration of diff and JavaScript. I would really like both! Currently, the prism-react-renderer does not support syntax highlighting diff and JavaScript. There is a plugin for prism that will using diff-javascript but plugins are currently not supported.

Just JavaScript

1function addTwoNumbers(num1, num2) {
2  return 1 + 2
3}

Now the diff version

1function addTwoNumbers (num1, num2) {
2-  return 1 + 2
3+  return num1 + num2
4}

Hopefully, javascript + diff version. This looks good! But, errors abound in lots of circumstances. Cannot add diff to:

JS Doc Example
JSON Example
Anything with highlighting (but that was expected)

funFunction.js

1function addTwoNumbers (num1, num2) {
2-  return 1 + 2
3+  return num1 + num2
4}

Attributions

Sometimes you search for a picture of code and get a computer screen, other times, something like this shows up. I'm not arguing! 🚀

Photo by NASA on Unsplash