Skip to content

Ryan

Fantastic Beasts and Where to Find Them

Tutorial1 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 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 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;