Skip to content

Latest commit

 

History

History
61 lines (46 loc) · 1.53 KB

themes.md

File metadata and controls

61 lines (46 loc) · 1.53 KB
Raw

Themes

React Markmirror supports two build in themes named "light" and "dark", as well as supporting all themes supported by Codemirror by setting the theme prop. See the Codemirror site for a demo of all themes.

The "light" and "dark" themes may be used without any additional setup. For example:

<Markmirror theme="light" />

Light example

<Markmirror theme="dark" />

Dark example

Codemirror themes are also supported by including the appropriate css file from the Codemirror module.

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>React Markmirror</title>
        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1" name="viewport">
        <link href="/node_modules/codemirror/theme/dracula.css" rel="stylesheet">
    </head>
    <body>
        <div id="mount"></div>
        <script src="/build/js/app.js"></script>
    </body>
</html>

app.jsx

import React from 'react';
import Markmirror from 'react-markmirror';

const App = () => (
  <Markmirror theme="dracula" />
);

Note: The actual location of the Codemirror theme css files depends on your setup. The example above assumes node_modules is in your web root.

The light and dark themes may be combined with CodeMirror themes in the following way.

import React from 'react';
import Markmirror from 'react-markmirror';

const App = () => (
  <Markmirror theme="dark,dracula" />
);