https://github.com/krakenui/octopus-marked

ReactJs library for markdown viewer by KrakenTeam!!!
https://github.com/krakenui/octopus-marked

Last synced: about 2 months ago
JSON representation

ReactJs library for markdown viewer by KrakenTeam!!!

• Host: GitHub
• URL: https://github.com/krakenui/octopus-marked
• Owner: krakenui
• Created: 2020-12-09T06:45:31.000Z (about 4 years ago)
• Default Branch: master
• Last Pushed: 2020-12-09T06:52:32.000Z (about 4 years ago)
• Last Synced: 2024-10-28T23:52:04.503Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React Marked Markdown

A react components package that helps you use Markdown easily.

---

Writing in Markdown is an amazing experience. Setting up all components and parser is kind of a pain.

## Basic Usage

- Install with `npm install --save octopus-marked`

- Import component(s) you want

```js

import { MarkdownPreview } from "octopus-marked";

```

## MarkdownPreview

### Basic Markdown view

Display Markdown is really easy with **MarkdownPreview** component.

Here is a simple example :

```js

import React from "react";

import { MarkdownPreview } from "octopus-marked";

const Post = ({ post }) => (

  


    
{post.title}

    

  

);


export default Post;

```

### Options

Behind the scenes, **octopus-marked** uses **marked** as Markdown parser.

So all **marked** options are available here.

Here is an example with default options :

```js

```

A list of options can be found [here](https://github.com/chjj/marked#options-1).

### Syntax highlighting

**octopus-marked** supports syntax highlighting with [highlight.js](https://highlightjs.org)

## CSS Classes

All **octopus-marked** components are unstyled, meaning that you can style them as you want like every others React elements.

```js

```

## LiveMarkdownTextarea

LiveMarkdownTextarea allows you to write Markdown in a textarea and see a preview of what you are writing.

```js

```

## Create your own Markdown Editor

You can even create your own Markdown Editor with **MarkdownPreview** and **MarkdownInput** components.

As an example here is the code of **LiveMarkdownTextarea** component.

Note that there is also a **clear()** method that we can call from parent component to clear the editor.

```js

class LiveMarkdownTextarea extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      value: props.defaultValue ? props.defaultValue : "",

    };

  }

  handleTextChange(e) {

    this.setState({ value: e.target.value });

    if (this.props.onTextChange) {

      this.props.onTextChange(e.target.value);

    }

  }

  clear() {

    this.setState({ value: "" });

  }

  render() {

    const {

      placeholder,

      className,

      inputClassName,

      previewClassName,

    } = this.props;

    const { value } = this.state;

    return (

      

        

        

      

    );

  }

}

```