Skip to content
Youngho Chaa cha cha
TwitterHomepage

Code Block Examples

Code3 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
13 as={Link}
14 sx={{ variant: `links.secondary` }}
15 to={`/${basePath}/${tagsPath}`.replace(/\/\/+/g, `/`)}
16 >
17 View all tags
18 </Styled.a>
19 </Flex>
20 <Listing posts={posts} sx={{ mt: [4, 5] }} />
21 </Layout>
22 );
23};
24
25export default Blog;
© 2024 by Youngho Chaa cha cha. All rights reserved.
Theme by LekoArts