114 |
115 | );
116 | }
117 |
--------------------------------------------------------------------------------
/docs/prism.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Prism with Next.js'
3 | description: 'Example using Prism / Markdown with Next.js including switching syntax highlighting themes.'
4 | ---
5 |
6 | # Using Prism with Next.js
7 |
8 | [**Prism**](https://prismjs.com/) is a popular syntax highlighter commonly used with Markdown.
9 | This example shows how to use Prism with [**Next.js**](https://nextjs.org/). Use the theme dropdown
10 | in the header to switch syntax highlighting themes.
11 |
12 | Next.js uses `getStaticPaths`/`getStaticProps` to generate [static pages](https://nextjs.org/docs/basic-features/data-fetching). These functions are _not_ bundled client-side, so you can **write server-side code directly**. For example, you can read Markdown files from the filesystem (`fs`) – including parsing front matter with [gray-matter](https://github.com/jonschlinkert/gray-matter). For example, let's assume you have a Markdown file located at `docs/my-post.js`.
13 |
14 | We can retrieve that file's contents using `getDocBySlug('my-post')`.
15 |
16 | ```js
17 | // lib/docs.js
18 |
19 | import fs from 'fs';
20 | import { join } from 'path';
21 | import matter from 'gray-matter';
22 |
23 | const docsDirectory = join(process.cwd(), 'docs');
24 |
25 | export function getDocBySlug(slug) {
26 | const realSlug = slug.replace(/\.md$/, '');
27 | const fullPath = join(docsDirectory, `${realSlug}.md`);
28 | const fileContents = fs.readFileSync(fullPath, 'utf8');
29 | const { data, content } = matter(fileContents);
30 |
31 | return { slug: realSlug, meta: data, content };
32 | }
33 | ```
34 |
35 | Then, we can **transform** the raw Markdown into HTML using [remark](https://github.com/remarkjs/remark) plugins.
36 |
37 | ```js
38 | // lib/markdown.js
39 |
40 | import { remark } from 'remark';
41 | import html from 'remark-html';
42 | import prism from 'remark-prism';
43 |
44 | export default async function markdownToHtml(markdown) {
45 | const result = await remark()
46 | // https://github.com/sergioramos/remark-prism/issues/265
47 | .use(html, { sanitize: false })
48 | .use(prism)
49 | .process(markdown);
50 | return result.toString();
51 | }
52 | ```
53 |
54 | Passing the `content` returned by `getDocBySlug('my-post')` into `markdownToHtml(content)`
55 | would convert a Markdown file like this:
56 |
57 | ````markdown
58 | ---
59 | title: 'My First Post'
60 | description: 'My very first blog post'
61 | ---
62 |
63 | # My First Post
64 |
65 | I **love** using [Next.js](https://nextjs.org/)
66 |
67 | ```js
68 | const doc = getDocBySlug(params.slug);
69 | ```
70 | ````
71 |
72 | into this HTML, which includes the proper elements and class names.
73 |
74 | ```html
75 |