@segersniels/window

Syntax highlighting in a nicely framed OSX like terminal window for usage with react-markdown

Usage no npm install needed!

<script type="module">
  import segersnielsWindow from 'https://cdn.skypack.dev/@segersniels/window';
</script>

README

@segersniels/window

Actionsnpm

screenshot

Demo

You can view it in action on my blog.

Usage

react-markdown

Use it in combination with react-markdown to nicely present code to the user.

import Window from '@segersniels/window';
import ReactMarkdown from 'react-markdown';

...

<ReactMarkdown
  source={source}
  renderers={{
    code: Window,
  }}
/>

...

Custom usage

Use it independently and pass whatever children you want to it. Please note that when passing children you will not have syntax highlighting enabled.

<Window>
  <p>Hello World!</p>
</Window>

However you can pass your own code to the value prop directly and control the language by passing the language prop. This will override any children passed.

<Window value='const foo = "bar";' language="javascript" />

SSR

Server side rendering is currently not available due to a webpack style-loader limitation. Feel free to create a pull request to implement this behavior.

custom