@sbjr-react-utils-components/markdown NPM

Sbjr-React-Utils-Components - Markdown - V4.0.0

React image

Sommaire

Description

This module is a A Markdown Renderer for React. this module use markdown-it and the markdown-it-prism plugin to use prism, the syntax highlighting library.

Precondition

This module is a React component.

It depends on it module, so you must have them installed.

NPM

npm i -S react

CDN

<script crossorigin src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>

Installation

NPM

npm i -S @sbjr-react-utils-components/markdown

CDN

<script
  type="text/javascript"
  src="https://unpkg.com/@sbjr-react-utils-components/markdown@latest"
></script>

Usage

Component

Here is a basic example of how to use the Markown Component:

import React from 'react';
import { render } from 'react-dom';
import { Markdown } from '@sbjr-react-utils-components/markdown';

const textInMarkdown =
  '### Markdown Renderer \nContent right in **Markdown** !';

render(
  <Markdown>{textInMarkdown}</Markdown>,
  document.getElementById('react-container'),
);

With cdn:

const textInMarkdown =
  '### Markdown Renderer \nContent right in **Markdown** !';

ReactDOM.render(
  <SbjrRUCMarkdown.Markdown>{textInMarkdown}</SbjrRUCMarkdown.Markdown>,
  document.getElementById('react-container'),
);

Function

Here is a basic example of how to use the Markown function parser.

Example:

import React from 'react';
import { render } from 'react-dom';
import { parseMarkdownToHtml } from '@sbjr-react-utils-components/markdown';

render(
  <div>{parseMarkdownToHtml('Hello **world**')}</div>,
  document.getElementById('react-container'),
);

Docs

This package as 1 component:

Markdown

1 function:

parseMarkdownToHtml

a default configuration object:

MARKDOWN_DEFAULT_CONFIG

And 2 typescript interface:

IMarkdownProps.
IMarkdownConfig

import {
  Markdown,
  parseMarkdownToHtml,
  MARKDOWN_DEFAULT_CONFIG,
  IMarkdownProps,
  IMarkdownConfig,
} from '@sbjr-react-utils-components/markdown';

const {
  DashbMarkdownoard,
  parseMarkdownToHtml,
  MARKDOWN_DEFAULT_CONFIG,
  IMarkdownProps,
  IMarkdownConfig,
} = window.SbjrRUCMarkdown;

Markdown Props `IMarkdownProps`

Props Name	Description	Type	required
children	Markdown String to parse	`string`	x
config	Configuration object	`IMarkdownConfig`

parseMarkdownToHtml function `parseMarkdownToHtml(content, config)`

Props Name	Description	Type	required
content	Markdown String to parse	`string`	x
config	Configuration object	`IMarkdownConfig`

Config

This component uses the MarkdownIt lib, you can modify the markdown configuration.

IMarkdownConfig

Props Name	Description	Type
html	Enable HTML tags in source	`boolean`
xhtmlOut	Use '/' to close single tags ().	`boolean`
breaks	Convert '\n' in paragraphs into	`boolean`
langPrefix	CSS language prefix for fenced blocks. Can be useful for external highlighters.	`string`
linkify	Autoconvert URL-like text to links	`boolean`
typographer	Enable some language-neutral replacement + quotes beautification	`boolean`
quotes	Double + single quotes replacement pairs, when typographer enabled, and smartquotes on.	`string`
highlight	Highlighter function. Should return escaped HTML	`(str, lang) => ''`

Example:

import React from 'react';
import { render } from 'react-dom';
import Markdown from '@sbjr-react-utils-components/markdown';

// full options list (defaults)
const config = {
  html: false,
  xhtmlOut: false,
  // This is only for full CommonMark compatibility.
  breaks: true,
  langPrefix: 'language-',
  linkify: false,
  typographer: false,

  // Double + single quotes replacement pairs, when typographer enabled,
  // and smartquotes on.Could be either a String or an Array.
  // For example, you can use '«»„“' for Russian, '„“‚‘' for German,
  // and ['«\xA0', '\xA0»', '‹\xA0', '\xA0›'] for French (including nbsp).
  quotes: '“”‘’',

  // Highlighter function. Should return escaped HTML
  // or '' if the source string is not changed and should be escaped externally.
  // If result starts with <pre... internal wrapper is skipped.
  highlight: (/* str, lang */) => '',
};

render(
  <Markdown config={config}>Hello **world**</Markdown>,
  document.getElementById('react-container'),
);

To learn more about the options available -> github markdown-it