Trying mimic @narative/gatsby-theme-novela using NextJS. Novela is built by the team at Narative, and built for everyone that loves the web.

Headers

H1

It is recommended to NOT use H1s as it is reserved for the article heading. Any H1 is set as an H2.

H2

H3

H4

H5

H6

Emphasis

Emphasis, aka italics, with asterisks or underscores.

Strong emphasis, aka bold, with asterisks or underscores.

Combined emphasis with asterisks and underscores.

Strikethrough uses two tildes. Scratch this.

Lists

1. First ordered list item
2. Another item
3. Actual numbers don't matter, just that it's a number

• Unordered list can use asterisks
• Or pluses

• Or minuses
• Or minuses

Links

I'm an inline-style link

I'm an inline-style link with title

I'm a reference-style link

I'm a relative reference to a repository file

You can use numbers for reference-style link definitions

Or leave it empty and use the link text itself.

URLs and URLs in angle brackets will automatically get turned into links. http://www.example.com or http://www.example.com and sometimes example.com (but not on Github, for example).

Some text to show that the reference links can follow later.

Images

Small Image

Medium Image

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Code and Syntax Highlighting

1var s = 'JavaScript no-syntax highlighting'
2alert(s)

1var s = 'JavaScript no-syntax highlighting'
2// comment out
3alert(s)

1var s = 'JavaScript syntax highlighting'
2alert(s)

1import from './index.css'
2
3var s = "JavaScript syntax highlighting";
4alert(s);

1var sOne, sTwo = "JavaScript syntax highlighting", "Long string to check the view from the mobile browser";
2alert(s);

1No language indicated, so no syntax highlighting.
2But let's throw in a <b>tag</b>.

JavaScript

1import React from 'react'
2import { ThemeProvider } from 'theme-ui'
3import theme from './theme'
4
5export default (props) => (
6  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
7)

JavaScript Line Highlighting

1import React from 'react'
2import { ThemeProvider } from 'theme-ui'
3import theme from './theme'
4
5export default (props) => (
6  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
7)

JSX

1import React from 'react'
2import { ThemeProvider } from 'theme-ui'
3import theme from './theme'
4//start
5export default (props) => (
6  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
7)
8//end

JSX Line-Highlighting

1import React from 'react'
2import { ThemeProvider } from 'theme-ui'
3import theme from './theme'
4
5export default (props) => (
6  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
7)

JSX Comment-Out

1import React from 'react'
2import { ThemeProvider } from 'theme-ui'
3import theme from './theme'
4
5// there's only one export default on a file
6export default (props) => (
7  <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
8)

MDX

1I'm JS

Golang Line Highlight

1package main
2
3import "fmt"
4
5func main() {
6    fmt.Println("Cello Loves GatsbyJS & Netlify")
7}

CSS

1color: blue;
2overflow: auto;

Live Code

1const Wrapper = ({ children }) => (
2  <div
3    style={{
4      background: 'papayawhip',
5      width: '100%',
6      padding: '2rem',
7    }}
8  >
9    {children}
10  </div>
11)
12
13const Title = () => (
14  <h2 style={{ color: 'palevioletred', textAlign: 'center' }}>
15    Cello{' '}
16    <span img='role' style={{ fontSize: '10em' }}>
17      🌏
18    </span>
19    <br />
20    Try This Awesome Theme by Narative.
21  </h2>
22)
23
24render(
25  <Wrapper>
26    <Title />
27  </Wrapper>
28)

Blockquotes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing.

Blockquotes are very handy in email to emulate reply text. This line is part of the same quote.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Horizontal Rule

Horizontal Rule

Three or more...

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum

TABLE

code example within backtick