mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
update with-markdown example (#4839)
Changes: * replaced the `markdown-in-js` with nextjs plugin for `MDX` Highly inspired by the example from [MDX repository](https://github.com/mdx-js/mdx/tree/master/examples/next)
This commit is contained in:
parent
475b426ed1
commit
f4988e7fa3
|
@ -1,4 +0,0 @@
|
|||
{
|
||||
"presets": ["next/babel"],
|
||||
"plugins": ["markdown-in-js/babel"]
|
||||
}
|
|
@ -41,4 +41,4 @@ now
|
|||
|
||||
## The idea behind the example
|
||||
|
||||
This example shows the most basic idea behind implementing [markdown-in-js](https://github.com/threepointone/markdown-in-js), a library that allows you to write markdown that transpiles to React components *at build time*.
|
||||
This example shows how to integrate an [MDX](https://github.com/mdx-js/mdx) which is a _"JSX in Markdown loader, parser, and renderer for ambitious projects"_.
|
19
examples/with-markdown/md/markdown.mdx
Normal file
19
examples/with-markdown/md/markdown.mdx
Normal file
|
@ -0,0 +1,19 @@
|
|||
import Other from './other.mdx'
|
||||
|
||||
# Hello, world `awesome` :smile_cat:
|
||||
|
||||
<Other components={components} />
|
||||
|
||||
```jsx
|
||||
<Other />
|
||||
```
|
||||
|
||||
Here's a paragraph
|
||||
|
||||
https://c8r.imgix.net/028ab8c85da415103cb3b1eb/johno.png
|
||||
|
||||
Here's a table
|
||||
|
||||
| Test | Table |
|
||||
| :--- | :---- |
|
||||
| Col1 | Col2 |
|
3
examples/with-markdown/md/other.mdx
Normal file
3
examples/with-markdown/md/other.mdx
Normal file
|
@ -0,0 +1,3 @@
|
|||
### Other `awesome`
|
||||
|
||||
file
|
15
examples/with-markdown/next.config.js
Normal file
15
examples/with-markdown/next.config.js
Normal file
|
@ -0,0 +1,15 @@
|
|||
const images = require('remark-images')
|
||||
const emoji = require('remark-emoji')
|
||||
|
||||
const withMDX = require('@zeit/next-mdx')({
|
||||
options: {
|
||||
mdPlugins: [
|
||||
images,
|
||||
emoji
|
||||
]
|
||||
}
|
||||
})
|
||||
|
||||
module.exports = withMDX({
|
||||
pageExtensions: ['js', 'jsx', 'mdx']
|
||||
})
|
|
@ -7,10 +7,13 @@
|
|||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"markdown-in-js": "^1.1.4",
|
||||
"@mdx-js/mdx": "0.15.0-0",
|
||||
"@zeit/next-mdx": "1.1.0",
|
||||
"next": "latest",
|
||||
"react": "^16.0.0",
|
||||
"react-dom": "^16.0.0"
|
||||
"react-dom": "^16.0.0",
|
||||
"remark-emoji": "2.0.1",
|
||||
"remark-images": "0.8.1"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
1
examples/with-markdown/pages/hello.mdx
Normal file
1
examples/with-markdown/pages/hello.mdx
Normal file
|
@ -0,0 +1 @@
|
|||
# Hello, world! :smiley:
|
|
@ -1,9 +1,9 @@
|
|||
import markdown from 'markdown-in-js'
|
||||
import React from 'react'
|
||||
import Document from '../md/markdown.mdx'
|
||||
|
||||
// For more advanced use cases see https://github.com/threepointone/markdown-in-js
|
||||
const H1 = props => <h1 style={{ color: 'tomato' }} {...props} />
|
||||
const InlineCode = props => <code id='codes' style={{ color: 'purple' }} {...props} />
|
||||
const Code = props => <code id='codes' style={{ fontWeight: 600 }} {...props} />
|
||||
const Pre = props => <pre id='codes' style={{ color: 'red' }} {...props} />
|
||||
|
||||
export default () => <div>{markdown`
|
||||
## This is a title
|
||||
|
||||
This is a paragraph
|
||||
`}</div>
|
||||
export default () => <Document components={{ h1: H1, pre: Pre, code: Code, inlineCode: InlineCode }} />
|
||||
|
|
Loading…
Reference in a new issue