mirror of
https://github.com/jxnblk/mdx-deck.git
synced 2024-11-26 00:35:02 +03:00
Update docs
This commit is contained in:
Brent Jackson
parent
b79a20189e
commit
8f2adc429c
17
README.md
17
README.md
@ -1,4 +1,4 @@
|
||||
# mdx-deck
|
||||
# MDX Deck
|
||||
|
||||
|
||||
|
||||
@ -53,7 +53,7 @@ import Demo from './components/Demo'
|
||||
# The end
|
||||
````
|
||||
|
||||
Add a run script to your `package.json` with the mdx-deck CLI
|
||||
Add a run script to your `package.json` with the MDX Deck CLI
|
||||
pointing to the `.mdx` file to start the dev server:
|
||||
|
||||
```json
|
||||
@ -112,7 +112,7 @@ Read more about MDX syntax in the [MDX Docs][mdx].
|
||||
|
||||
## Theming
|
||||
|
||||
mdx-deck uses [emotion][] for styling, making practically any part of the presentation themeable.
|
||||
MDX Deck uses [emotion][] for styling, making practically any part of the presentation themeable.
|
||||
|
||||
### Built-in Themes
|
||||
|
||||
@ -122,7 +122,7 @@ mdx-deck uses [emotion][] for styling, making practically any part of the presen
|
||||
<img src='docs/images/yellow.png' width='256' />
|
||||
</div>
|
||||
|
||||
mdx-deck includes several built-in themes to change the look and feel of the presentation.
|
||||
MDX Deck includes several built-in themes to change the look and feel of the presentation.
|
||||
Export `theme` from your MDX file to enable a theme.
|
||||
|
||||
```mdx
|
||||
@ -164,13 +164,13 @@ Read more about theming in the [Theming docs](docs/theming.md)
|
||||
|
||||
### Components
|
||||
|
||||
mdx-deck includes built-in components to help with creating presentations, including a full screen Image component, the Appear component that allows stepping through parts of a single slide, and the Notes component for adding speaker notes.
|
||||
MDX Deck includes built-in components to help with creating presentations, including a full screen Image component, the Appear component that allows stepping through parts of a single slide, and the Notes component for adding speaker notes.
|
||||
|
||||
Read more in the [components docs](docs/components.md).
|
||||
|
||||
### Libraries
|
||||
|
||||
These third-party libraries are great for use with mdx-deck.
|
||||
These third-party libraries are great for use with MDX Deck.
|
||||
|
||||
- [CodeSurfer][]: React component for scrolling, zooming and highlighting code.
|
||||
- [mdx-code][]: Runnable code playgrounds for MDX Deck.
|
||||
@ -221,12 +221,12 @@ which means you can use a nested ThemeProvider or target elements with CSS-in-JS
|
||||
|
||||
### Built-in Layouts
|
||||
|
||||
mdx-deck includes some built-in layouts for inverting theme colors and changing the layout of a slide.
|
||||
MDX Deck includes some built-in layouts for inverting theme colors and changing the layout of a slide.
|
||||
Read more about [built-in layouts](docs/components.md#layouts).
|
||||
|
||||
## Presenter Mode
|
||||
|
||||
mdx-deck includes a built-in _Presenter Mode_, with a preview of the next slide and a timer.
|
||||
MDX Deck includes a built-in _Presenter Mode_, with a preview of the next slide and a timer.
|
||||
|
||||
|
||||
|
||||
@ -304,7 +304,6 @@ See more exporting options in the [Exporting Documentation](docs/exporting.md)
|
||||
- [Components](docs/components.md)
|
||||
- [Exporting](docs/exporting.md)
|
||||
- [Advanced Usage](docs/advanced.md)
|
||||
- [React API](docs/react.md)
|
||||
|
||||
## Examples
|
||||
|
||||
|
||||
@ -1,40 +1,35 @@
|
||||
|
||||
# Advanced Usage
|
||||
|
||||
## Custom MDX components
|
||||
|
||||
mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], add a `components` object to the `theme`.
|
||||
MDX Deck includes default components for MDX, but to provide custom components to the [MDXProvider][], add a `components` object to the `theme`.
|
||||
|
||||
```js
|
||||
// example theme
|
||||
import { theme } from 'mdx-deck/themes'
|
||||
import Heading from './Heading'
|
||||
|
||||
export default {
|
||||
...theme,
|
||||
components: {
|
||||
h1: Heading
|
||||
}
|
||||
h1: Heading,
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
See the [MDX][] docs for more or take a look
|
||||
at the [default set of components](../src/components.js) as a reference.
|
||||
at the [default set of components](../packages/components/src/mdx-components.js) as a reference.
|
||||
|
||||
## Custom Provider component
|
||||
|
||||
A custom Provider component can be added to the theme to wrap the entire application.
|
||||
This is useful for adding custom context providers in React.
|
||||
This is useful for adding custom context providers in React or adding persistent UI elements to the entire deck.
|
||||
|
||||
```js
|
||||
// example theme.js
|
||||
import { theme } from 'mdx-deck/themes'
|
||||
import Provider from './Provider'
|
||||
|
||||
export default {
|
||||
...theme,
|
||||
font: 'Georgia, serif',
|
||||
Provider
|
||||
Provider,
|
||||
}
|
||||
```
|
||||
|
||||
@ -43,20 +38,19 @@ which can be used to show custom page numbers or add other elements to the UI.
|
||||
|
||||
#### Props
|
||||
|
||||
- `slides`: (array) the components for each slide
|
||||
- `index`: (number) the current slide index
|
||||
- `length`: (number) the length of the slides array
|
||||
- `mode`: (string) the current mode (one of `'NORMAL'`, `'PRESENTER'`, or `'OVERVIEW'`)
|
||||
- `notes`: (object) custom [speaker notes](#speaker-notes) for all slides
|
||||
- `step`: (number) the current visible step in an Appear component
|
||||
|
||||
- `mode`: (string) the current mode (one of `'normal'`, `'presenter'`, or `'overview'`)
|
||||
- `step`: (number) the current visible step in an Appear or Step component
|
||||
- Each slide includes a `meta` object with a `notes` field when the Notes component is used within a slide
|
||||
|
||||
## Combining multiple mdx files
|
||||
|
||||
Unlike the official `@mdx-js/loader`,
|
||||
the `mdx-deck/loader` exports an array of components instead of just one.
|
||||
the `@mdx-deck/loader` exports an additional `slides` array of components instead of just the entire document.
|
||||
Multiple MDX files can be combined into a single presentation if the filesize is getting difficult to manage.
|
||||
|
||||
First create a couple `.mdx` files like any other mdx-deck file, with `---` to separate the different slides.
|
||||
First create a couple `.mdx` files like any other MDX Deck file, with `---` to separate the different slides.
|
||||
|
||||
```mdx
|
||||
# one.mdx
|
||||
@ -78,16 +72,13 @@ Next, create a `.js` file to import and combine the two `.mdx` files.
|
||||
|
||||
```js
|
||||
// deck.js
|
||||
import one from './one.mdx'
|
||||
import two from './two.mdx'
|
||||
import { slides as one } from './one.mdx'
|
||||
import { slides as two } from './two.mdx'
|
||||
|
||||
export default [
|
||||
...one,
|
||||
...two
|
||||
]
|
||||
export default [...one, ...two]
|
||||
```
|
||||
|
||||
Then, point the mdx-deck CLI comment in your `package.json` to the `deck.js` file.
|
||||
Then, point the MDX Deck CLI comment in your `package.json` to the `deck.js` file.
|
||||
|
||||
```json
|
||||
"scripts": {
|
||||
@ -97,35 +88,34 @@ Then, point the mdx-deck CLI comment in your `package.json` to the `deck.js` fil
|
||||
|
||||
## Custom webpack config
|
||||
|
||||
Webpack configuration files named `webpack.config.js` will automatically be merged with the built-in configuration, using [webpack-merge](https://github.com/survivejs/webpack-merge). To use a custom filename, pass the file path to the `--webpack` flag.
|
||||
Webpack configuration files named `webpack.config.js` will automatically be merged with the built-in configuration,
|
||||
using [webpack-merge](https://github.com/survivejs/webpack-merge).
|
||||
To use a custom filename, pass the file path to the `--webpack` flag.
|
||||
|
||||
```js
|
||||
// webpack.config.js example
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{ loader: 'babel-loader' },
|
||||
{ loader: 'react-svg-loader' }
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
{
|
||||
test: /\.svg$/,
|
||||
use: [{ loader: 'babel-loader' }, { loader: 'react-svg-loader' }],
|
||||
},
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
**Careful**: When overwriting the loader for `mdx` files, make sure to include the default loader from `mdx-deck/loader`.
|
||||
**Careful**: When overwriting the loader for `mdx` files, make sure to include the default loader from `@mdx-deck/loader`.
|
||||
|
||||
## Custom build setups
|
||||
|
||||
The core mdx-deck components can also be used in any React application,
|
||||
The core MDX Deck components can also be used in any React application,
|
||||
such as [create-react-app][] or [next.js][].
|
||||
|
||||
See the [React API](react.md) docs for more.
|
||||
See the [`@mdx-deck/components`](../packages/components) package for more.
|
||||
|
||||
[MDX]: https://github.com/mdx-js/mdx
|
||||
[MDXProvider]: https://github.com/mdx-js/mdx#mdxprovider
|
||||
[mdx]: https://mdxjs.com
|
||||
[mdxprovider]: https://github.com/mdx-js/mdx#mdxprovider
|
||||
[create-react-app]: https://github.com/facebook/create-react-app
|
||||
[next.js]: https://github.com/zeit/next.js/
|
||||
|
||||
30
docs/code.js
30
docs/code.js
@ -1,30 +0,0 @@
|
||||
export const a = `import React from 'react'
|
||||
|
||||
const Foo = props =>
|
||||
<h1>Bar</h1>
|
||||
|
||||
export default Foo`
|
||||
|
||||
export const b = `import styled from 'styled-components'
|
||||
import { space, color } from 'styled-system'
|
||||
|
||||
const Box = styled.div([], space, color)
|
||||
|
||||
export default Box`
|
||||
|
||||
export const surfer = `import { CodeSurfer } from 'mdx-deck-code-surfer'
|
||||
import codeExample from './code-example'
|
||||
|
||||
<CodeSurfer
|
||||
title='Check out my code'
|
||||
code={codeExample}
|
||||
steps={[
|
||||
{
|
||||
lines: [ 4, 5 ],
|
||||
notes: 'This is lines 4 & 5 highlighted'
|
||||
},
|
||||
]}
|
||||
/>
|
||||
`
|
||||
|
||||
export default { a, b, surfer }
|
||||
@ -1,7 +1,6 @@
|
||||
|
||||
# Components
|
||||
|
||||
mdx-deck includes a few built-in components to help with creating presentations.
|
||||
MDX Deck includes a few built-in components to help with creating presentations.
|
||||
|
||||
## Head
|
||||
|
||||
@ -13,11 +12,11 @@ import { Head } from 'mdx-deck'
|
||||
|
||||
<Head>
|
||||
<title>My Presentation</title>
|
||||
<meta name='twitter:card' content='summary_large_image' />
|
||||
<meta name='twitter:site' content='@jxnblk' />
|
||||
<meta name='twitter:title' content='My Presentation' />
|
||||
<meta name='twitter:description' content='A really great presentation' />
|
||||
<meta name='twitter:image' content='https://example.com/card.png' />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@jxnblk" />
|
||||
<meta name="twitter:title" content="My Presentation" />
|
||||
<meta name="twitter:description" content="A really great presentation" />
|
||||
<meta name="twitter:image" content="https://example.com/card.png" />
|
||||
</Head>
|
||||
```
|
||||
|
||||
@ -28,10 +27,11 @@ Use the `<Image />` component to render a fullscreen image (using the CSS `backg
|
||||
```mdx
|
||||
import { Image } from 'mdx-deck'
|
||||
|
||||
<Image src='kitten.png' />
|
||||
<Image src="kitten.png" />
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
- `src` (string) image URL
|
||||
- `size` (string) CSS background-size
|
||||
|
||||
@ -52,31 +52,23 @@ import { Appear } from 'mdx-deck'
|
||||
</ul>
|
||||
```
|
||||
|
||||
Internally, the `<Appear />` component uses the `<Step />` component, which can be used to build custom components with similar behavior.
|
||||
|
||||
## Speaker Notes
|
||||
|
||||
Speaker notes that only show in presenter mode can be added to any slide with either markdown syntax or with the Notes component.
|
||||
|
||||
````mdx
|
||||
# Markdown speaker notes
|
||||
|
||||
```notes
|
||||
These are only visible in presenter mode
|
||||
```
|
||||
````
|
||||
Speaker notes that only show in presenter mode can be added to any slide with the Notes component.
|
||||
|
||||
```mdx
|
||||
import { Notes } from 'mdx-deck'
|
||||
|
||||
# Slide Content
|
||||
|
||||
<Notes>
|
||||
Only visible in presenter mode
|
||||
</Notes>
|
||||
<Notes>Only visible in presenter mode</Notes>
|
||||
```
|
||||
|
||||
## Layouts
|
||||
|
||||
mdx-deck includes a few built-in layouts for common slide variations.
|
||||
MDX Deck includes a few built-in layouts for common slide variations.
|
||||
Export a layout as the `default` within a slide to wrap the contents.
|
||||
|
||||
### Invert
|
||||
@ -123,6 +115,10 @@ export default SplitRight
|
||||
## Meow
|
||||
```
|
||||
|
||||
### Horizontal
|
||||
|
||||
Similar to the Split components, but renders all children side-by-side
|
||||
|
||||
### FullScreenCode
|
||||
|
||||
Render fenced code blocks fullscreen.
|
||||
@ -136,4 +132,3 @@ export default FullScreenCode
|
||||
<Button>Beep</Button>
|
||||
```
|
||||
````
|
||||
|
||||
|
||||
@ -2,7 +2,6 @@ export { future as theme } from '@mdx-deck/themes'
|
||||
import { Head, Image, Notes, Appear } from '@mdx-deck/components'
|
||||
import { Invert, Split, SplitRight, FullScreenCode, Horizontal} from '@mdx-deck/layouts'
|
||||
import Counter from './Counter'
|
||||
import code from './code'
|
||||
|
||||
<Head>
|
||||
<title>mdx-deck</title>
|
||||
@ -13,7 +12,7 @@ import code from './code'
|
||||
<meta name='twitter:image' content='https://jxnblk.com/mdx-deck/card.png' />
|
||||
</Head>
|
||||
|
||||
# mdx-deck
|
||||
# MDX Deck
|
||||
|
||||
MDX-based presention decks
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
# Exporting
|
||||
|
||||
## Static Bundle
|
||||
@ -12,6 +11,12 @@ add a `build` script to your `package.json` file.
|
||||
}
|
||||
```
|
||||
|
||||
### PDF & Screenshots
|
||||
|
||||
Version 2 will support exporting to PDF or screenshot with a separate CLI.
|
||||
This has not been released yet.
|
||||
|
||||
<!-- TK
|
||||
## PDF Export
|
||||
|
||||
Presentations can be exported as PDF using the CLI.
|
||||
@ -46,4 +51,4 @@ import { Head } from 'mdx-deck'
|
||||
<meta name='og:image' content='https://example.com/card.png' />
|
||||
</Head>
|
||||
```
|
||||
|
||||
-->
|
||||
|
||||
@ -6,8 +6,8 @@
|
||||
"author": "Brent Jackson <jxnblk@gmail.com>",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"start": "mdx-deck index.mdx",
|
||||
"build": "mdx-deck build index.mdx"
|
||||
"start": "mdx-deck demo.mdx",
|
||||
"build": "mdx-deck build demo.mdx"
|
||||
},
|
||||
"dependencies": {
|
||||
"@emotion/core": "^10.0.7",
|
||||
|
||||
@ -1,36 +0,0 @@
|
||||
export { yellow as theme } from '../src/themes'
|
||||
|
||||
# Say hello to...
|
||||
|
||||
---
|
||||
|
||||
# Presenter mode
|
||||
|
||||
(press *Option + P*)
|
||||
|
||||
---
|
||||
|
||||
## You can see the next slide
|
||||
|
||||
---
|
||||
|
||||
## And the *next* one
|
||||
|
||||
---
|
||||
|
||||
## And a timer
|
||||
|
||||
---
|
||||
|
||||
## And [speaker notes][] too!
|
||||
|
||||
[speaker notes]: https://github.com/jxnblk/mdx-deck#speaker-notes
|
||||
|
||||
```notes
|
||||
No one will see this 🙈
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# mdx-deck
|
||||
|
||||
@ -1,48 +0,0 @@
|
||||
|
||||
# React API
|
||||
|
||||
The core mdx-deck components can also be used in any React application, such as [create-react-app][] or [next.js][].
|
||||
|
||||
### Webpack Loader
|
||||
|
||||
mdx-deck uses a custom webpack loader to split MDX files into an array of slides. Use this loader to import mdx files in a webpack application.
|
||||
|
||||
```js
|
||||
// example webpack.config.js
|
||||
module.exports = {
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.mdx$/,
|
||||
ignore: /node_modules/,
|
||||
use: [
|
||||
'babel-loader',
|
||||
'mdx-deck/loader'
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### SlideDeck Component
|
||||
|
||||
```js
|
||||
import React from 'react'
|
||||
import { SlideDeck } from 'mdx-deck'
|
||||
import slides from './deck.mdx'
|
||||
import theme from './theme'
|
||||
|
||||
export default () =>
|
||||
<SlideDeck
|
||||
slides={slides}
|
||||
theme={theme}
|
||||
width='100vw'
|
||||
height='100vh'
|
||||
/>
|
||||
```
|
||||
|
||||
View the source for other components available for use.
|
||||
|
||||
[create-react-app]: https://github.com/facebook/create-react-app
|
||||
[next.js]: https://github.com/zeit/next.js/
|
||||
@ -1,11 +1,11 @@
|
||||
|
||||
# Themes
|
||||
|
||||
|
||||
Default
|
||||
|
||||
```mdx
|
||||
export { default as theme } from 'mdx-deck/themes'
|
||||
export { default as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -14,7 +14,8 @@ export { default as theme } from 'mdx-deck/themes'
|
||||
Big
|
||||
|
||||
```mdx
|
||||
export { big as theme } from 'mdx-deck/themes'
|
||||
export { big as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -23,7 +24,8 @@ export { big as theme } from 'mdx-deck/themes'
|
||||
Book
|
||||
|
||||
```mdx
|
||||
export { book as theme } from 'mdx-deck/themes'
|
||||
export { book as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -32,7 +34,8 @@ export { book as theme } from 'mdx-deck/themes'
|
||||
Code
|
||||
|
||||
```mdx
|
||||
export { code as theme } from 'mdx-deck/themes'
|
||||
export { code as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -41,7 +44,8 @@ export { code as theme } from 'mdx-deck/themes'
|
||||
Comic
|
||||
|
||||
```mdx
|
||||
export { comic as theme } from 'mdx-deck/themes'
|
||||
export { comic as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -50,7 +54,8 @@ export { comic as theme } from 'mdx-deck/themes'
|
||||
Condensed
|
||||
|
||||
```mdx
|
||||
export { condensed as theme } from 'mdx-deck/themes'
|
||||
export { condensed as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -59,7 +64,8 @@ export { condensed as theme } from 'mdx-deck/themes'
|
||||
Dark
|
||||
|
||||
```mdx
|
||||
export { dark as theme } from 'mdx-deck/themes'
|
||||
export { dark as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -68,7 +74,8 @@ export { dark as theme } from 'mdx-deck/themes'
|
||||
Future
|
||||
|
||||
```mdx
|
||||
export { future as theme } from 'mdx-deck/themes'
|
||||
export { future as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -77,7 +84,8 @@ export { future as theme } from 'mdx-deck/themes'
|
||||
Hack
|
||||
|
||||
```mdx
|
||||
export { hack as theme } from 'mdx-deck/themes'
|
||||
export { hack as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -91,7 +99,8 @@ Lobster
|
||||
Notes
|
||||
|
||||
```mdx
|
||||
export { notes as theme } from 'mdx-deck/themes'
|
||||
export { notes as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -105,7 +114,8 @@ Rye
|
||||
Script
|
||||
|
||||
```mdx
|
||||
export { script as theme } from 'mdx-deck/themes'
|
||||
export { script as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -114,7 +124,8 @@ export { script as theme } from 'mdx-deck/themes'
|
||||
Swiss
|
||||
|
||||
```mdx
|
||||
export { swiss as theme } from 'mdx-deck/themes'
|
||||
export { swiss as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
@ -123,6 +134,33 @@ export { swiss as theme } from 'mdx-deck/themes'
|
||||
Yellow
|
||||
|
||||
```mdx
|
||||
export { yellow as theme } from 'mdx-deck/themes'
|
||||
export { yellow as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Poppins
|
||||
|
||||
```mdx
|
||||
export { poppins as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Syntax Highlighter
|
||||
|
||||
```mdx
|
||||
export { syntaxHighlighter as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
Syntax Highlighter Prism
|
||||
|
||||
```mdx
|
||||
export { syntaxHighlighterPrism as theme } from 'mdx-deck/themes
|
||||
'
|
||||
```
|
||||
|
||||
125
docs/theming.md
125
docs/theming.md
@ -1,6 +1,6 @@
|
||||
# Theming
|
||||
|
||||
mdx-deck uses [styled-components][] for styling, making practically any part of the presentation themeable.
|
||||
mdx-deck uses [emotion][] for styling, making practically any part of the presentation themeable.
|
||||
|
||||
## Built-in Themes
|
||||
|
||||
@ -26,15 +26,10 @@ export { default as theme } from './theme'
|
||||
```
|
||||
|
||||
The theme should be an object with fields for fonts, colors, and CSS for individual components.
|
||||
It's recommended that all custom themes extend the default theme as a base.
|
||||
|
||||
```js
|
||||
// Example theme.js
|
||||
import theme from 'mdx-deck/themes'
|
||||
|
||||
export default {
|
||||
// extends the default theme
|
||||
...theme,
|
||||
// add a custom font
|
||||
font: 'Roboto, sans-serif',
|
||||
// custom colors
|
||||
@ -45,99 +40,47 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
## Composing Themes
|
||||
|
||||
Multiple themes can be used together.
|
||||
For example, this allows the use of a syntax highlighting theme,
|
||||
along with a color theme, and a separate typography theme.
|
||||
|
||||
To compose themes together export a `themes` array instead of a single theme.
|
||||
|
||||
```mdx
|
||||
import { syntaxHighlighter } from 'mdx-deck/themes'
|
||||
import customTheme from './theme'
|
||||
|
||||
export const themes = [syntaxHighlighter, customTheme]
|
||||
|
||||
# Cool. :sunglasses:
|
||||
```
|
||||
|
||||
Please note that themes are deep merged together and the last theme specified will override fields from themes before it.
|
||||
|
||||
### Google Fonts
|
||||
|
||||
TK
|
||||
|
||||
<!--
|
||||
To use webfonts, mdx-deck will attempt to add `<link>` tags for any font from Google Fonts.
|
||||
To load webfonts from other sources, use a custom [Provider component](advanced.md#custom-provider-component) to add custom `<link>` tags.
|
||||
-->
|
||||
Themes can specify a `googleFont` field to automatically add a `<link>` tag to the document head.
|
||||
Alternatively, use the `<Head />` component to add a custom `<link>` tag.
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
TK
|
||||
|
||||
<!--
|
||||
By default fenced code blocks do not include any syntax highlighting.
|
||||
Syntax highlighting in fenced code blocks can be enabled by providing a `prism` style object in a theme.
|
||||
The syntax highlighting is built with [react-syntax-highlighter][] and [PrismJS][].
|
||||
Create a `theme.js` file and export it via the `MDX` file.
|
||||
Themes can provide a set of custom MDX components, including a replacement for the default `code` component that can add syntax highlighting with libraries like [react-syntax-highlighter][].
|
||||
|
||||
```js
|
||||
export { default as theme } from './theme'
|
||||
//...
|
||||
```
|
||||
MDX Deck includes two themes for adding syntax highlighting with [react-syntax-highlighter][]: `syntaxHighlighter` and `syntaxHighlighterPrism`.
|
||||
|
||||
```js
|
||||
// example theme.js
|
||||
import { future } from 'mdx-deck/themes'
|
||||
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
|
||||
|
||||
export default {
|
||||
...future,
|
||||
prism: {
|
||||
style: okaidia
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
By default, only JavaScript and JSX are enabled for syntax highlighting to keep bundle sizes to a minimum.
|
||||
To enable other languages, add a `languages` object to the `prism` object in the theme.
|
||||
|
||||
```js
|
||||
// example theme.js
|
||||
import { future } from 'mdx-deck/themes'
|
||||
import okaidia from 'react-syntax-highlighter/styles/prism/okaidia'
|
||||
import prismRuby from 'react-syntax-highlighter/languages/prism/ruby'
|
||||
|
||||
export default {
|
||||
...future,
|
||||
prism: {
|
||||
style: okaidia,
|
||||
languages: {
|
||||
ruby: prismRuby
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
For lists of available syntax styles and languages, see:
|
||||
|
||||
- [Prism languages](https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_PRISM.MD)
|
||||
- [Prism styles](https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD)
|
||||
|
||||
[PrismJS]: https://github.com/PrismJS/prism
|
||||
[react-syntax-highlighter]: https://github.com/conorhastings/react-syntax-highlighter
|
||||
-->
|
||||
|
||||
<!--
|
||||
### Slide Transitions
|
||||
|
||||
The slide transition timing function and duration can be customized with a custom theme.
|
||||
|
||||
```js
|
||||
// example theme
|
||||
import theme from 'mdx-deck/themes'
|
||||
|
||||
export default {
|
||||
...theme,
|
||||
transitionTimingFunction: 'linear',
|
||||
transitionDuration: '.1s'
|
||||
}
|
||||
```
|
||||
-->
|
||||
Since MDX supports using React components inline, you can also import a syntax highlighting component directly, if you prefer.
|
||||
|
||||
### Styling Elements
|
||||
|
||||
Each element can be styled with a theme. Add a style object (or string) to the theme to target specific elements.
|
||||
Each element can be styled with a theme.
|
||||
Add a style object (or string) to the theme to target specific elements.
|
||||
|
||||
```js
|
||||
// example theme
|
||||
import theme from 'mdx-deck/themes'
|
||||
|
||||
export default {
|
||||
...theme,
|
||||
h1: {
|
||||
textTransform: 'uppercase',
|
||||
letterSpacing: '0.1em',
|
||||
@ -159,27 +102,35 @@ The following keys are available for theming:
|
||||
- `colors`: object of colors used for MDX components
|
||||
- `text`: root foreground color
|
||||
- `background`: root background color
|
||||
- `code`: text color for `<pre>` and `<code>`
|
||||
- `codeBackground`: background color for `<pre>` and `<code>`
|
||||
- `css`: root CSS object
|
||||
- `heading`: CSS for all headings
|
||||
- `h1`: CSS for `<h1>`
|
||||
- `h2`: CSS for `<h2>`
|
||||
- `h3`: CSS for `<h3>`
|
||||
- `h4`: CSS for `<h4>`
|
||||
- `h5`: CSS for `<h5>`
|
||||
- `h6`: CSS for `<h6>`
|
||||
- `paragraph`: CSS for `<p>`
|
||||
- `link`: CSS for `<a>`
|
||||
- `p`: CSS for `<p>`
|
||||
- `a`: CSS for `<a>`
|
||||
- `ul`: CSS for `<ul>`
|
||||
- `ol`: CSS for `<ol>`
|
||||
- `li`: CSS for `<li>`
|
||||
- `img`: CSS for `<img>`
|
||||
- `blockquote`: CSS for `<blockquote>`
|
||||
- `table`: CSS for `<table>`
|
||||
- `pre`: CSS for `<pre>`
|
||||
- `code`: CSS for `<code>`
|
||||
- `Slides`: CSS to apply to the wrapping Slide component
|
||||
- `components`: object of MDX components to render markdown
|
||||
- `Provider`: component for wrapping the entire app
|
||||
- `googleFont`: CSS HREF for adding a Google Font `<link>` tag
|
||||
|
||||
## Advanced Usage
|
||||
|
||||
For more advanced customizations see the [Advanced Usage](advanced.md) docs.
|
||||
|
||||
[styled-components]: https://github.com/styled-components/styled-components
|
||||
[emotion]: https://emotion.sh
|
||||
[mdx]: https://github.com/mdx-js/mdx
|
||||
[react-syntax-highlighter]: https://github.com/conorhastings/react-syntax-highlighter
|
||||
|
||||
@ -201,8 +201,6 @@ export class MDXDeck extends React.Component {
|
||||
const { slides } = this.state
|
||||
const mode = pathname === '/print' ? PRINT : this.state.mode
|
||||
const index = this.getIndex()
|
||||
// todo figure out how to rerender on location change
|
||||
// console.log('MDXDeck', index)
|
||||
const meta = this.getMeta(index)
|
||||
const context = {
|
||||
...this.state,
|
||||
|
||||
@ -51,7 +51,9 @@ export const Root = styled.div(
|
||||
'p',
|
||||
'blockquote',
|
||||
'img',
|
||||
'table'
|
||||
'table',
|
||||
'pre',
|
||||
'code'
|
||||
)
|
||||
)
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import React from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
|
||||
export const Heading = styled.h1({ margin: 0 })
|
||||
|
||||
export const inlineCode = styled.code(
|
||||
props => ({
|
||||
fontFamily: props.theme.monospace,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user