notie-markdown
v1.3.17TypeScript
A simple markdown note-taking app with live executable and editable code blocks.
0/weekUpdated 2 weeks agoUnpacked: 26.5 MB
Published by branyang02
npm install notie-markdownnotie: 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.
!reference
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:
``bash`
npm install notie-markdown
Then, import the Notie component in your React application:
`tsx
import { Notie } from "notie-markdown";
const Example = () => (
);
`
The Notie component is used to render Markdown content. It accepts the following props:
$3
| 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:
- Author(s): uiw
- License: MIT
- Author(s): The Bootstrap Authors
- License: MIT
- Author(s): Segment.io, Inc.
- License: MIT
- Author(s): Khan Academy
- License: MIT
- Author(s): Raj K Singh
- License: MIT
- Author(s): Espen Hovlandsdal
- License: MIT
- 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.