Fantastic Beasts and Where to Find Them

01.11.2019 — Novel — 1 min read

Here will a React component go:

Here will a live code example go:

Here will a normal code block go:

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 JSDoc comment, short, and long comment:

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:

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

Code block with code highlighting:

src/components/post.jsx

1import * as 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:

1Harry Potter and the Philosopher's Stone

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

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

Code block with only the title but without lineNumbers:

src/utils/scream.js

const 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 * as 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;