How to use marked - 10 common examples

`Header clicked! nextSort: ${nextSort}, sortKey: ${sortKey}`
                  )
                }
              />
            
          
        
        <div>
          <button>Log Ref</button>
        </div>
      
    )
  },
  {
    readme: {
      content: marked(IndexListHeaderCellReadme),
    },
  }
)

indexListStories.add(
  'IndexListBody',
  () =&gt; {
    const indexListBodyRef = createRef()

    const logRef = (): void =&gt; {
      /* eslint-disable */
      console.log(indexListBodyRef.current)
      /* eslint-enable */
    }

    return (

function mdToJsonSchema(mdStr, maxDepth, imagePath) {

    var renderer = new marked.Renderer();
    renderer.link = function (href, title, text) {
        if (href.match(/^~/)) { // Property link
            return '<a href="#' + href.slice(1) + '">' + text + '</a>';
        }
        else {
            // All other links are opened in new page
            return '<a href="' + href + '">' + text + '</a>';
        }
    };

    renderer.image = function (href, title, text) {
        var size = (text || '').split('x');
        if (isNaN(size[0])) {
            size[0] = 'auto';
        }
        if (isNaN(size[1])) {

const jdown = require('../dist');
const marked = require('marked');

// See https://marked.js.org/#/USING_PRO.md#renderer
const renderer = new marked.Renderer();
renderer.heading = (text, level) =>
  `${text}`;

jdown('example/content', {
  fileInfo: true,
  markdown: {renderer},
  assets: {output: 'example/public', path: '/'}
}).then(content => console.log(content));

async getMarkdownPage() {
    try {
      const response = await this.gitHubService.getFile(this.filePath);
      this.readmeText = parse(response);
      this.doneLoading.emit();
    } catch (error) {
      // TODO: error handling
    }
  }
}

function parseContent(content) {
  // Block Indentation
  content = content.split('\n').map((line) => {
    if (!line.startsWith(':::')) return line;
    return '\n\n' + encode(line) + '\n\n'
  }).join('\n');

  // Parse Markdown (but override HTML detection)
  const lexer = new marked.Lexer();
  lexer.rules.html = /^<.*[\n]{2,}/;
  const tokens = lexer.lex(content);
  let parsed = marked.Parser.parse(tokens, {renderer});

  // Parse custom element attributes
  parsed = parsed.replace(/{([^}]+)}/g, (selection, body) => {
    return body.match(/^[0-9]+$/) ? selection : encode(selection)
  });

  parsed = parsed.replace(/ /g, ' ');

  // Split into sections of length at most 1000.
  const output = [''];
  for (const row of parsed.split(/\n\n/)) {
    if (output[output.length - 1].length + row.length < 4950) {
      output[output.length - 1] += '\n\n' + row

const processMarkdown = function(src) {
  // Lex
  const lexer = new marked.Lexer();
  let tokens;
  try {
    tokens = lexer.lex(src);
  } catch (err) {
    throw new Error(`Lexer Error ${err}`);
  }

  // Extract Headers
  const parsed = parseNavigationItems(tokens);
  console.log('parsed: ', parsed);

  // Pass tokens to HTML renderer
  const html = marked(src, {
    renderer: getHTMLRenderer(),
  });

describe('marked', () => {
    const marked = require('marked');

    const getCleanMarkup = markeup => marked(markeup).replace(/\r\n|\r|\n/g, ''); // remove new lines charactes

    const originalOptions = { ...marked.defaults };
    afterEach(() => {
      marked.setOptions(originalOptions);
    });

    // This functionality was broken by initial version of markedjsOverrides.js. So put tests here
    // to avoid this in future.
    it('Table is rendered', () => {
      const inputString = `| a | b | c | d | e |
      |---|---|---|---|---|
      | 1 | 2 | 3 | 4 | 5 |`;
      const html = '<table><thead><tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th></tr></thead><tbody><tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr></tbody></table>';
      expect(getCleanMarkup(inputString)).to.be.equal(html);
    });

    const listOptionTests = isSmartLists =&gt; {
      // This functionality was broken by initial version of markedjsOverrides.js. So put tests here

var updatedTokens = [];
	//console.log('file:', file.filename, 'tags:', commonTags);
	for (i = 0; i < tokens.length; i++) {
		if ((i !== 0) && (tokens[i].type === 'heading')) {
			if (tokens[i].depth <= 2) {
				updatedTokens.push({'type': 'paragraph', 'text': '#HSLIDE'});
			} else if (tokens[i].depth <= (commonTags.slideshow.headingLevel ? commonTags.slideshow.headingLevel : 3)) {
				updatedTokens.push({'type': 'paragraph', 'text': '#VSLIDE'});
			}
		}
		updatedTokens.push(tokens[i]);
	}
	updatedTokens.links = tokens.links;
	//console.log(updatedTokens);
	var renderer = mdRenderer(new marked.Renderer());
	var parser = new marked.Parser({renderer: renderer});
	var slideMarkdown = parser.parse(updatedTokens);

	// HTML content *************************************************************
	var content = marked.parser(tokens);

	// Autoreload tag ***********************************************************
	var autoReload = '';
	if ((config.mode === 'serve') && config.serveAutoReload) {
		autoReload = '' +
		'';
	}

	// Add content to index *****************************************************

export const addMessage = (io, action) => {
  const rawMarkup = marked(action.text);
  const doc = {
    username: action.username,
    text: action.text,
    rawMarkup,
    convo: action.convo
  };

  Convo.findOne({name: action.convo})
    .then(/* istanbul ignore next */(convo) => (_createMessage(doc, convo)))
    .then(_saveConvo)
    .then(/* istanbul ignore next */(result) => (_emitAddMessage(io, result)))
    .catch(/* istanbul ignore next */(err) => {
      logger.log('error', err);
    });
};

function renderMarkdown(body: string): string {
  const rendered = marked(body, { gfm: true, sanitize: true });
  return rendered.replace(/<(\/?sub)>/g, '<$1>'); // TODO: is it okay?
}