How to use remarkable - 10 common examples

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Component } from 'react';
import Remarkable from 'remarkable';
import YoutubePreview from 'app/components/elements/YoutubePreview';
import sanitizeConfig, { noImageText } from 'app/utils/SanitizeConfig';
import sanitize from 'sanitize-html';
import HtmlReady from 'shared/HtmlReady';
import tt from 'counterpart';

const remarkable = new Remarkable({
    html: true, // remarkable renders first then sanitize runs...
    breaks: true,
    linkify: false, // linkify is done locally
    typographer: false, // https://github.com/jonschlinkert/remarkable/issues/142#issuecomment-221546793
    quotes: '“”‘’',
});

const remarkableToSpec = new Remarkable({
    html: true,
    breaks: false, // real markdown uses \n\n for paragraph breaks
    linkify: false,
    typographer: false,
    quotes: '“”‘’',
});

class MarkdownViewer extends Component {

/*
 * This function is not intended to be invoked directly. Instead it will be
 * triggered by an orchestrator function.
 */

const storage = require("azure-storage"),
      matter = require("gray-matter"),
      remarkable = require('remarkable'),
      hljs = require('highlight.js'),
      blobService = storage.createBlobService(process.env['AzureWebJobsStorage']);

var md = new remarkable.Remarkable({
    highlight: function (str, lang) {
      if (lang && hljs.getLanguage(lang)) {
        try {
          return hljs.highlight(lang, str).value;
        } catch (err) {}
      }
  
      try {
        return hljs.highlightAuto(str).value;
      } catch (err) {}
  
      return ''; // use external default escaping
    },
    typographer: true,
    html: true
});

// eslint-disable-next-line import/named
import { COMMUNITY_CHEATSHEET } from '@config'

import { uid } from '@utils'
import {
  Wrapper,
  CardWrapper,
  ErrorWrapper,
  ErrorTitle,
  ErrorLink,
} from './styles/cheatsheet'
import parser from './parser'
import CheatSheetStyle from './styles/CheatsheetMarkStyles'

const md = new Remarkable()

const Cards = ({ cards }) =>
  cards.map(item => (
    
      
        <div>
      
    
  ))

const Cheatsheet = ({ source, communityRaw }) =&gt; {</div>

const highlight = require('highlight.js')
const http = require('http')
const morgan = require('morgan')
const path = require('path')
const pug = require('pug')
const { Remarkable } = require('remarkable')

const config = require('../config')
const desktopApi = require('./desktop-api')

const PORT = Number(process.argv[2]) || 4000

const app = express()
const server = http.createServer(app)

const remark = new Remarkable({
  html: true,
  highlight: function (code, lang) {
    const h = lang
      ? highlight.highlight(lang, code)
      : highlight.highlightAuto(code)
    return '<div class="hljs">' + h.value + '</div>'
  }
})

pug.filters.markdown = (md, options) =&gt; {
  return remark.render(md)
}

// Trust "X-Forwarded-For" and "X-Forwarded-Proto" nginx headers
app.enable('trust proxy')

import { Remarkable } from 'remarkable'
import emojiPlugin from 'remarkable-emoji'
import mentionsPlugin from 'remarkable-mentions'
import Prism from 'mastani-codehighlight'

import { MENTION_USER_ADDR } from '@config'
import { buildLog } from '@utils'

import MarkDownStyle from '@containers/ThemeWrapper/MarkDownStyle'
import { PreviewerContainer } from './styles'

/* eslint-disable-next-line */
const log = buildLog('c:MarkDownRender:index')

// const md = new Remarkable()
const md = new Remarkable('full', {
  // NOTE:  html should always be false
  // Enable HTML tags in source
  html: false,
  breaks: false,
  linkTarget: '_blank',
})

md.use(mentionsPlugin({ url: MENTION_USER_ADDR }))
md.use(emojiPlugin)

class MarkDownRender extends React.Component {
  constructor(props) {
    super(props)

    this.state = { body: '' }
  }

import Remarkable from 'remarkable'
import hljs from 'highlight.js'
const regularMd = new Remarkable()

const codeMd = new Remarkable({
  highlight: (str) => {
    try {
      return hljs.highlight('javascript', str).value
    } catch (err) {
      return console.log(err)
    }
  },
})

export default {
  render: (text) => {
    return regularMd.render(text)
  },
  renderCode: (text) => {
    return codeMd.render(text)
  },

module.exports = function (tokens, idx, options) {
  const token = tokens[idx];
  let langClass = '';
  const langPrefix = options.langPrefix;
  let langName = '';
  let fenceName = '';

  if (token.params) {
    fenceName = token.params.split(/\s+/g)[0];
    langName = utils.escapeHtml(utils.replaceEntities(utils.unescapeMd(fenceName)));
    langClass = langName ? `class="${langPrefix}${langName}"` : '';
  }

  const highlighted = options.highlight(token.content, langName) || utils.escapeHtml(token.content);

  return `<pre><code>${highlighted}</code></pre>${this.getBreak(tokens, idx)}`;
};

module.exports = function (tokens, idx, options) {
  const token = tokens[idx];
  let langClass = '';
  const langPrefix = options.langPrefix;
  let langName = '';
  let fenceName = '';

  if (token.params) {
    fenceName = token.params.split(/\s+/g)[0];
    langName = utils.escapeHtml(utils.replaceEntities(utils.unescapeMd(fenceName)));
    langClass = langName ? `class="${langPrefix}${langName}"` : '';
  }

  const highlighted = options.highlight(token.content, langName) || utils.escapeHtml(token.content);

  return `<pre><code>${highlighted}</code></pre>${this.getBreak(tokens, idx)}`;
};

render() {
    const { children, params, options } = this.props;
    let fences
    let className;
    let content = utils.escapeHtml(children);

    if (params) {
      fences = params.split(/\s+/g);
      className = `hljs ${options.langPrefix}${utils.escapeHtml(
        utils.replaceEntities(utils.unescapeMd(fences.join(' ')))
      )}`;

      if (options.highlight) {
        content = options.highlight.apply(
          options.highlight, [content].concat(fences)) || content;
      }
    }

    return (
      <code>
    );
  }
}</code>

render() {
    const { children, params, options } = this.props;
    let fences
    let className;
    let content = utils.escapeHtml(children);

    if (params) {
      fences = params.split(/\s+/g);
      className = `hljs ${options.langPrefix}${utils.escapeHtml(
        utils.replaceEntities(utils.unescapeMd(fences.join(' ')))
      )}`;

      if (options.highlight) {
        content = options.highlight.apply(
          options.highlight, [content].concat(fences)) || content;
      }
    }

    return (