@sbjr-react-utils-components/markdown

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

Sommaire

---

• Description

• Precondition

  • NPM
  • CDN

• Installation

  • NPM
  • CDN

• Usage

  • Component
  • function

• Docs

  • Markdown Props
  • parseMarkdowntoHtml
  • Configuration

• Exemple

---

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';

Or

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	required
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

Exemple

You can see an example here

Have fun