— Tutorial — 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() {23var cache = {};4var form = $('form');5var minified = true;67var dependencies = {};89var 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 part4 * If the input is already a number only return that value5 * @param {string | number} input6 * @param {number} [rootFontSize]7 * @return {number} Number without last three characters8 * @example removeLastThree('6rem') => 69 */10const getValue = (input, rootFontSize = 16) => {11 if (typeof input === `number`) {12 return input / rootFontSize;13 }1415 const isPxValue = input.slice(-2) === `px`;1617 if (isPxValue) {18 return parseFloat(input.slice(0, -2));19 }2021 return parseFloat(input.slice(0, -3));22};2324// This is a little helper function25const helper = (a, b) => a + b;2627// This is also a little helper function but this time with a really long one-line comment that should show some more details28const morehelper = (a, b) => a * b;2930export { getValue, helper, morehelper };
Normal block without language:
1import Test from "../components/test"23const Layout = ({ children }) => (4 <Test>5 {children}6 </Test>7)89export default Layout
Code block with code highlighting:
1import React from "react";23const Post = ({ data: { post } }) => (4 <Layout>5 <Heading variant="h2" as="h2">6 {post.title}7 </Heading>8 <p9 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 <section25 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);3536export 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:
1const scream = (input) => window.alert(input)
Code block with only the title but without lineNumbers:
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:
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;