Prism style of Geist UI

This is the code styles for prism.js, design style from Geist UI. Report an issue on GitHub.

Usage

Prism require on the latest version of the Geist UI, make sure you always have @geist-ui/core installed. When you change the themes of the Geist, prism will automatically follow.

yarn add @geist-ui/core @geist-ui/prism

Import

import { GeistProvider, CSSBaseline } from '@geist-ui/core'
import { PrismBaseline } from '@geist-ui/prism'

const app = () => (
  <GeistProvider>
    <CSSBaseline />
    <PrismBaseline />
    <YourAppComponent />
  </GeistProvider>
)

Previews

Here is the display effect of different code blocks:

.jsx

import { Button } from '@geist-ui/core'

const MyExampleComponent = () => {
  return <Button auto>Actions</Button>
}

export default MyExampleComponent

.tsx

type Props = {
  text: string
}

const Colors: React.FC<Props> = ({ text }) => {
  return <Button auto>{text}</Button>
}

.html

<html>
  <body>
    <div>main</div>
  </body>
</html>

.js

/**
 * The opposite of `before`. This method creates a function that invokes
 * `func` once it's called `n` or more times.
 *
 * const saves = ['profile', 'settings']
 * const done = after(saves.length, () => console.log('done saving!'))
 *
 * forEach(saves, type => asyncSave({ 'type': type, 'complete': done }))
 * // => Logs 'done saving!' after the two async saves have completed.
 */
function after(n, func) {
  if (typeof func !== 'function') {
    throw new TypeError('Expected a function')
  }
  n = n || 0
  return function (...args) {
    if (--n < 1) {
      return func.apply(this, args)
    }
  }
}

export default after

License

Licensed under the MIT LICENSE.