Get started with remarkable CDN

MIT licensed

React is a popular library for building user interfaces, known for its component-based architecture and efficient rendering.

Tags:
  • md
  • markdown
  • process
  • text
  • parse
  • parser
  • render
  • renderer
  • commonmark

Stable version

Copied!

How to start using remarkable CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with remarkable CDN - cdnhub.io</title>
  <script src="https://cdn.jsdelivr.net/npm/remarkable/remarkable.min.js"></script>
  <style>
    pre.markdown { white-space: pre-wrap; }
  </style>
</head>
<body>
  <button id="convertToMarkdown">Convert to Markdown</button>
  <textarea id="textarea" rows="10" cols="50">
# Heading 1
## Heading 2
**Bold text**
*Italic text*
`Code block`
> Blockquote

</textarea>
<pre id="markdownOutput" class="markdown"></pre>

<script>
  const remark = require('remark')();
  const rehypeStringReplace = require('rehype-string-replace');
  const convertTextareaToMarkdown = () => {
    const textarea = document.getElementById('textarea');
    const markdownOutput = document.getElementById('markdownOutput');

    const markdown = remark()
      .use(rehypeStringReplace, {
        find: /<button id="convertToMarkdown">(.*?)<\/button>/g,
        replace: '',
      })
      .process(textarea.value)
      .toString();

    markdownOutput.innerHTML = markdown;
  };

  document.getElementById('convertToMarkdown').addEventListener('click', convertTextareaToMarkdown);
</script>
</body>
</html>
Copied!
Copied!

All versions