Code Block Examples

11.09.2022 — Code — 3 min read

Here will a React component go:

Here will a normal code block go:

(function() {

var cache = {};
var form = $('form');
var minified = true;

var dependencies = {};

var treeURL = 'https://api.github.com/repos/PrismJS/prism/git/trees/gh-pages?recursive=1';
var treePromise = new Promise(function(resolve) {
  $u.xhr({
    url: treeURL,
    callback: function(xhr) {
      if (xhr.status < 400) {
        resolve(JSON.parse(xhr.responseText).tree);
      }
    }
  });
});

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

/**
 * Get value out of string (e.g. rem => px)
 * If value is px strip the px part
 * If the input is already a number only return that value
 * @param {string | number} input
 * @param {number} [rootFontSize]
 * @return {number} Number without last three characters
 * @example removeLastThree('6rem') => 6
 */
const getValue = (input, rootFontSize = 16) => {
  if (typeof input === `number`) {
    return input / rootFontSize
  }

  const isPxValue = input.slice(-2) === `px`

  if (isPxValue) {
    return parseFloat(input.slice(0, -2))
  }

  return parseFloat(input.slice(0, -3))
}

// This is a little helper function
const helper = (a, b) => a + b

// This is also a little helper function but this time with a really long one-line comment that should show some more details
const morehelper = (a, b) => a * b

export { getValue, helper, morehelper }

Normal block without language:

import Test from "../components/test"

const Layout = ({ children }) => (
  <Test>
    {children}
  </Test>
)

export default Layout

Code block with code highlighting:

src/components/post.jsx

import * as React from "react"

const Post = ({ data: { post } }) => (
  <Layout>
    <Heading variant="h2" as="h2">
      {post.title}
    </Heading>
    <p
      sx={{
        color: `secondary`,
        mt: 3,
        a: { color: `secondary` },
        fontSize: [1, 1, 2],
      }}
    >
      <span>{post.date}</span>
      {post.tags && (
        <React.Fragment>
          {` — `}
          <ItemTags tags={post.tags} />
        </React.Fragment>
      )}
    </p>
    <section
      sx={{
        ...CodeStyles,
        my: 5,
        ".gatsby-resp-image-wrapper": { my: 5, boxShadow: `lg` },
      }}
    >
      <MDXRenderer>{post.body}</MDXRenderer>
    </section>
  </Layout>
)

export default Post

Code block without title:

Harry Potter and the Philosopher's Stone

Code block with lineNumbers (and lang):

1Harry Potter and the Chamber of Secrets

Code block with lineNumbers (and without lang):

1Harry 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 and with lineNumbers:

src/utils/scream.js

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

Line highlighting without code title:

const test = 3
const foo = "bar"
const harry = "potter"
const hermione = "granger"
const ron = "weasley"

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

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

src/components/blog.tsx

1import * as React from "react"
2
3const Blog = ({ posts }: PostsProps) => {
4  const { tagsPath, basePath } = useSiteMetadata()
5
6  return (
7    <Layout>
8      <Flex sx={{ alignItems: `center`, justifyContent: `space-between` }}>
9        <Heading variant="h2" as="h2">
10          Blog
11        </Heading>
12        <Styled.a as={Link} sx={{ variant: `links.secondary` }} to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}>
13          View all tags
14        </Styled.a>
15      </Flex>
16      <Listing posts={posts} sx={{ mt: [4, 5] }} />
17    </Layout>
18  )
19}
20
21export default Blog