notie: React Markdown Note-taking Component

notie is a versatile note-taking solution built as a simple React component, designed to seamlessly integrate Markdown-based notes into any React application. This lightweight yet powerful tool allows you to create a customized note-taking experience that includes features like live, editable code execution, TikZ diagrams, and math equations, all within a single, intuitive interface.

Updates

9/24/2024: Version 1.3.0: notie adds support for graphing using desmos!

8/16/2024: Version 1.2.0: notie has migrated to using themes instead of dark mode. This allows for more customization options and better user experience.

8/12/2024: Version 1.1.0: Fully integrated automatic equation numbering and equation preview.

8/2/2024: Version 1.0.0: Initial release, published on npm registry here.

Getting Started

To start using notie, install the package via npm:

npm install notie-markdown

Then, import the Notie component in your React application:

import { Notie } from "notie-markdown";

const Example = () => (
  <Notie markdown="# Hello World\nThis is a Markdown content." />
);

The Notie component is used to render Markdown content. It accepts the following props:

Props

| Prop | Type | Description | | ------------------ | ------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | | markdown | string | The Markdown content to be rendered. | | config | NotieConfig (optional) | Configuration options for Notie, including table of contents settings, font size, and theme customization. | | theme | NotieThemes (optional) | Predefined theme option. Can be "default", "default dark", "Starlit Eclipse", or "Starlit Eclipse Light". | | customComponents | { [key: string]: () => JSX.Element } (optional) | Custom React components to be used for rendering specific elements in the markdown. |

Check out the tutorial for more detailed information on how to use notie.

Features

• Live Coding: Use the live coding feature write and RUN your code snippets in your notes.
• TikZ Support: Use TikZ to draw diagrams in your notes.
• Math Equations: Write math equations using LaTeX syntax.
  • Automatic Equation Numbering: Automatically number equations and refer to them in your notes.
• Customizable Themes: Customize the appearance of your notes with different themes.

Showcase

Features and Documentation

Checkout the tutorial to learn more about the features and documentation of notie.

Contribution

Checkout CONTRIBUTING.md.

Acknowledgements

This project makes use of several open-source projects and resources. We extend our gratitude to the developers and maintainers of these projects. Here is a list of them along with their respective licenses:

React CodeMirror

• Author(s): uiw
• License: MIT

Bootstrap

• Author(s): The Bootstrap Authors
• License: MIT

Evergreen UI

• Author(s): Segment.io, Inc.
• License: MIT

KaTeX

• Author(s): Khan Academy
• License: MIT

react-code-blocks

• Author(s): Raj K Singh
• License: MIT

react-markdown

• Author(s): Espen Hovlandsdal
• License: MIT

remark-math

• Author(s): Junyoung Choi
• License: MIT

We are thankful to all the open-source projects and their contributors for making their resources available, which have greatly facilitated the development of this project.